React学习笔记(二) 组件状态

组件的状态(this.state)：

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取

    <script type="text/babel">
        var Myfirst = React.createClass({
            getInitialState :  function(){
                return {
                    color : "red",
                    title : "哈哈，这是我的第一个状态"
                }
            },
            render : function(){
                var styleObj = {
                    color : this.state.color
                }
                return    (
                    <div>
                        <div style={styleObj}>{this.state.title}</div>
                    </div>
                );
            }
        })
        var myComponent = ReactDOM.render(
            <Myfirst />,
            document.getElementById('example'),
            function(){
                console.log("我已经渲染完了");
            }
        );

        console.log(myComponent);
        myComponent.setState({title:});
    </script>

我们可以通过setState来修改状态的值。

    <script type="text/babel">
        var Myfirst = React.createClass({
            getInitialState :  function(){
                return {
                    clickCount : ,
                }
            },
            myClicks : function(){
                this.setState({
                    clickCount :
                })
            },
            render : function(){
                return    (
                    <div>
                        <p>点击下面的按钮</p>
                        <button onClick = {this.myClicks}>点击我</button>
                        <p>{this.state.clickCount}</p>
                    </div>
                );
            }
        })
        var myComponent = ReactDOM.render(
            <Myfirst />,
            document.getElementById('example'),
            function(){
                console.log("我已经渲染完了");
            }
        );
    </script>

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。