初识React

分享者:邢政     2015-05-07

专注于UI

在MVC分层设计模式中,react常被拿来实现视图层(V)。

React不依赖于技术栈的其他部分,因此可以方便的在现有项目中尝试用它来实现一个小特性。

虚拟DOM

React从DOM中抽象出来,给出一种更简洁的编程模型,且性能表现更好。能够通过NodeJS实现服务端渲染,通过React Native开发原生app。

数据流

React实现单向、响应式数据流,减少boilerplate且比传统数据绑定更容易理解。

简洁的组件

React的组件都实现了一个render()方法,它接收输入的数据并返回要显示的内容。这个例子中我们使用JSX(类XML语法)来编写代码。render()方法通过this.props属性来访问输入的数据。

React并不强制要求开发者使用JSX。在“编译的JS”中可以查看JSX生成的原始Javascript代码。

// JSX code

var HelloMessage = React.createClass({

    render: function() {

        return <div>Hello {this.props.name}</div>;

    }

});

React.render(<HelloMessage name="John" />, mountNode);

 

// compiled javascript code

var HelloMessage = React.createClass({displayName: "HelloMessage",

    render: function() {

        return React.createElement("div", null, "Hello ", this.props.name);

    }

});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

带状态的组件

除了可以通过this.props访问输入数据之外,组件还可以通过this.state来维持他的内部状态数据。当一个组件的状态数据改变时,组件将重新调用render()方法来重绘。

// JSX code

var Timer = React.createClass({

    getInitialState: function() {

        return {secondsElapsed: 0};

    },

    tick: function() {

        this.setState({secondsElapsed: this.state.secondsElapsed + 1});

    },

    componentDidMount: function() {

        this.interval = setInterval(this.tick, 1000);

    },

    componentWillUnmount: function() {

        clearInterval(this.interval);

    },

    render: function() {

        return (

            <div>Seconds Elapsed: {this.state.secondsElapsed}</div>

        );

    }

});

React.render(<Timer />, mountNode);

 

// compiled javascript code

var Timer = React.createClass({displayName: "Timer",

    getInitialState: function() {

        return {secondsElapsed: 0};

    },

    tick: function() {

        this.setState({secondsElapsed: this.state.secondsElapsed + 1});

    },

    componentDidMount: function() {

        this.interval = setInterval(this.tick, 1000);

    },

    componentWillUnmount: function() {

        clearInterval(this.interval);

    },

    render: function() {

        return (

            React.createElement("div", null, "Seconds Elapsed: ", this.state.secondsElapsed)

        );

    }

});

React.render(React.createElement(Timer, null), mountNode);

React应用

结合使用属性(props)和状态(state),可以构建一个基础的代办事项应用。这个例子中使用状态来跟踪事项列表和用户输入的新事项名称,即使事件处理程序看起来是内联的,他们仍将会通过代理被收集和实现。

// JSX code

var TodoList = React.createClass({

    render: function() {

        var createItem = function(itemText, index) {

            return <li key={index + itemText}>{itemText}</li>;

        };

        return <ul>{this.props.items.map(createItem)}</ul>;

    }

});

var TodoApp = React.createClass({

    getInitialState: function() {

        return {items: [], text: ''};

    },

    onChange: function(e) {

        this.setState({text: e.target.value});

    },

    handleSubmit: function(e) {

        e.preventDefault();

        var nextItems = this.state.items.concat([this.state.text]);

        var nextText = '';

        this.setState({items: nextItems, text: nextText});

    },

    render: function() {

        return (

            <div>

                <h3>TODO</h3>

                <TodoList items={this.state.items} />

                <form onSubmit={this.handleSubmit}>

                    <input onChange={this.onChange} value={this.state.text} />

                    <button>{'Add #' + (this.state.items.length + 1)}</button>

                </form>

            </div>

        );

    }

});

React.render(<TodoApp />, mountNode);

 

// compiled javascript code

var TodoList = React.createClass({displayName: "TodoList",

    render: function() {

        var createItem = function(itemText, index) {

            return React.createElement("li", {key: index + itemText}, itemText);

        };

        return React.createElement("ul", null, this.props.items.map(createItem));

    }

});

 

var TodoApp = React.createClass({displayName: "TodoApp",

    getInitialState: function() {

        return {items: [], text: ''};

    },

    onChange: function(e) {

        this.setState({text: e.target.value});

    },

    handleSubmit: function(e) {

        e.preventDefault();

        var nextItems = this.state.items.concat([this.state.text]);

        var nextText = '';

        this.setState({items: nextItems, text: nextText});

    },

    render: function() {

        return (

            React.createElement("div", null,

                React.createElement("h3", null, "TODO"),

                React.createElement(TodoList, {items: this.state.items}),

                React.createElement("form", {onSubmit: this.handleSubmit},

                    React.createElement("input", {onChange: this.onChange, value: this.state.text}),

                    React.createElement("button", null, 'Add #' + (this.state.items.length + 1))

                )

            )

        );

    }

});

React.render(React.createElement(TodoApp, null), mountNode);

组件可以使用第三方插件

React非常灵活,通过钩子允许与其他的库和框架对接。这个例子使用外部的Markdown库来实时转化文本域中的内容。

 

// JSX code

var MarkdownEditor = React.createClass({

    getInitialState: function() {

        return {value: 'Type some *markdown* here!'};

    },

    handleChange: function() {

        this.setState({value: React.findDOMNode(this.refs.textarea).value});

    },

    render: function() {

        return (

            <div className="MarkdownEditor">

                <h3>Input</h3>

                <textarea onChange={this.handleChange} ref="textarea" defaultValue={this.state.value} />

                <h3>Output</h3>

                <div className="content" dangerouslySetInnerHTML={{

                    __html: marked(this.state.value, {sanitize: true})

                }}/>

            </div>

        );

    }

});

React.render(<MarkdownEditor />, mountNode);

 

// compiled javascript code

var MarkdownEditor = React.createClass({displayName: "MarkdownEditor",

    getInitialState: function() {

        return {value: 'Type some *markdown* here!'};

    },

    handleChange: function() {

        this.setState({value: React.findDOMNode(this.refs.textarea).value});

    },

    render: function() {

        return (

            React.createElement("div", {className: "MarkdownEditor"},

                React.createElement("h3", null, "Input"),

                React.createElement("textarea", {

                    onChange: this.handleChange,

                    ref: "textarea",

                    defaultValue: this.state.value

                }),

                React.createElement("h3", null, "Output"),

                React.createElement("div", {

                    className: "content",

                    dangerouslySetInnerHTML: {

                        __html: marked(this.state.value, {sanitize: true})

                    }

                })

            )

        );

    }

});

React.render(React.createElement(MarkdownEditor, null), mountNode);

返回