专注于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); |