react中，组件的交互及this.state属性

一、React组件是状态机

1.1 状态理解

React的数据流：数据由父节点向下传递到子节点（由外到内传递），如果顶层组件某个prop改变，React会向下传递，重新渲染所有使用过该属性的组件。

react组件是一个状态机，组件都有一个初始状态，通过与用户的交互，使状态发生改变，然后重新渲染UI，让用户界面与数据保持一致。 在传统js中，如果数据发生了变化，我们需要操作都DOM来重新设置渲染UI，而react中只需要根据state，然后根据新的state重新渲染用户界面。

1.2 state和prop都是设置数据，它们有什么区别？

1、this.props属性：由父节点传入到组件内部，只读，不可修改。组件动态传入参数的关键。 组件默认值是一个对象，会在组件使用时，把外部的传参“合并”到props属性中 2、this.state 状态:由组件自己创建，可以修改，一般由用户交互产生新的状态(数据)。 总结props和state的区别：它们都可以用来存放数据，但props不可修改（只是设置属性），state可修改（用于用户交互）

1.3 交互实例

对react组件的this.state使用大概三步： 1、创建组件 React.createClass() 2、初始化状态： getInitialState 3、根据状态渲染数据 4、设计交互改变state的逻辑：this.setState

<script type="text/babel"> var Inte=React.createClass({ doClick:function(){ if(this.state.stateNow==='on'){ this.setState({ stateNow:'off' }) }else{ this.setState({ stateNow:'on' }) } }, getInitialState:function(){ return { stateNow:'off' } }, render:function(){ return ( <div> <p>现在的状态是：{this.state.stateNow==='on'?'已开启':'已关闭'}</p> <button onClick={this.doClick}>点我改变状态</button> </div> ) } }); ReactDOM.render( <Inte />, document.querySelector('#box') ) </script>

如上：

1、通过{this.state.stateNow===’on’?’已开启’:’已关闭’}来渲染数据 2、通过绑定点击事件doClick来根据用户点击改变state。通过this.setState来改变状态值。