资源描述：
《react 中文版 - v1.1》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、前言React是Facebook推出的一个用来构建用户界面的JavaScript库。具备以下特性：•不是一个MVC框架•不使用模板•响应式更新非常简单•HTML5仅仅是个开始仅仅是UI许多人使用React作为MVC架构的V层。尽管React并没有假设过你的其余技术栈，但它仍可以作为一个小特征轻易地在已有项目中使用虚拟DOMReact为了更高超的性能而使用虚拟DOM作为其不同的实现。它同时也可以由服务端Node.js渲染－而不需要过重的浏览器DOM支持数据流React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。一个简单的组件React组件通过一个render(
2、)方法，接受输入的参数并返回展示的对象。以下这个例子使用了JSX，它类似于XML的语法输入的参数通过render()传入组件后，将存储在this.propsJSX是可选的，并不强制要求使用。点击"CompiledJS"可以看到JSX编译之后的JavaScript代码LiveJSXEditorvarHelloMessage=React.createClass({render:function(){return
Hello{this.props.name}
;}});React.render(
,mountNode)HelloJo
3、hnCompiledJSvarHelloMessage=React.createClass({displayName:"HelloMessage",render:function(){returnReact.createElement("div",null,"Hello",this.props.name);}});React.render(React.createElement(HelloMessage,{name:"John"}),mountNode);一个有状态的组件除了接受输入数据（通过this.props），组件还可以保持内部状态数据（通过this.state）。当一个组件的状态数据的
4、变化，展现的标记将被重新调用render()更新。LiveJSXEditorvarTimer=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
5、(){clearInterval(this.interval);},render:function(){return(
SecondsElapsed:{this.state.secondsElapsed}
);}});React.render(
,mountNode);CompiledJSvarTimer=React.createClass({displayName:"Timer",getInitialState:function(){return{secondsElapsed:0};},tick:function(){this.setState({second
6、sElapsed:this.state.secondsElapsed+1});},componentDidMount:function(){this.interval=setInterval(this.tick,1000);},componentWillUnmount:function(){clearInterval(this.interval);},render:function(){return(React.createElement("div",null,"SecondsElapsed:",this.state.secondsElapsed));}});React.render(Reac
7、t.createElement(Timer,null),mountNode);一个应用程序通过使用props和state,我们可以组合构建一个小型的Todo程序。下面例子使用state去监测当前列表的项以及用户已经输入的文本。尽管事件绑定似乎是以内联的方式，但他们将被收集起来并以事件代理的方式实现。LiveJSXEditorCompiledJSvarTodoList=React.createCla
