React state

来源1 来源2

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

//demo1
<div id="demo1"></div>

<script type="text/jsx">
    var HelloWorld = React.createClass({
        getInitialState: function () {
            return {liked: false, qqli: '25'};
        },

        handleClick: function () {
            //this.replaceState({liked: !this.state.liked});
            this.setState({liked: !this.state.liked});
        },

        render: function () {
            var text = this.state.liked ? 'love' : 'hate';

            return (
                <div>
                    <button type="button" onClick={this.handleClick}>切换</button>
                    <p>I {text} you</p>
                    <p>{this.state.qqli}</p>
                    <!--使用replaceState(), 执行第一次后，qqli状态会被删除-->
                </div>
            );
        }
    });

    React.render(
        <HelloWorld />,
        document.getElementById('demo1')
    )
</script>

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

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

//demo2
<div id="demo2"></div>

<script type="text/jsx">
    var HelloWorld = React.createClass({
        getInitialState: function () {
            return {inputValue: '123'};
        },

        handleChange: function (e) {
            this.setState({inputValue: e.target.value});
        },

        render: function () {
            var text = this.state.inputValue;

            return (
                <div>
                    <input type="text" value={text} onChange={this.handleChange}/>
                    <p>{text}</p>
                </div>
            );
        }
    });


    React.render(
            <HelloWorld />,
            document.getElementById('demo2')
    );
</script>

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。

textarea 元素、select元素、radio元素都属于这种情况。

React 组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用，可以在组件方法中通过 this 访问。唯一一种在 React 之外获取React 组件实例句柄的方式就是保存 React.render 的返回值。在其它组件内，可以使用 refs 得到相同的结果。

看下关于 state 的相关方法：

1、setState

setState(object nextState[, function callback])

合并 nextState 和当前 state。这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。另外，也支持可选的回调数，该函数在 setState 执行完毕并且组件重新渲染完成之后调用。

注意：

绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。

setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。

不保证 setState() 调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。

setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state存在差异的时候调用 setState() 可以避免不必要的重新渲染。

2、replaceState

replaceState(object nextState[, function callback])

类似于 setState()，但是删除之前所有已存在的 state 键，这些键都不在 nextState 中。可查看demo1。