React入门04-组件的交互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来改变状态值。