React中setState

mountComponent 本质上是通过递归渲染内容的，由于递归的特性，父组件的 componentWillMount 一定在其子组件的 componentWillMount 之前调用，而父组件的 componentDidMount 肯定在其子组件的 componentDidMount 之后调用。

若使用 this.state.xxx 赋值更新状态，的确能够改变状态，但是无意义，也不会触发重新渲染。
因为，this.state 只是一个对象，单纯去修改一个对象的值无意义，去驱动 UI 的更新才是有意义的。
而 setState 方法被调用时，能驱动组件的更新过程，引发 shouldComponentUpdate、componentWillUpdate、 reader、 componentDidUpdate 等一系列方法调用，完成 UI 更新。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React中setState</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                count: 0
                
            };
        }
        componentWillMount() {
            let me = this;
            me.setState({
                count: me.state.count + 2
            });
            me.setState({
                count: me.state.count + 1
            });
        }
        componentDidMount() {
            let me = this;
            me.setState({
                count: me.state.count + 2
            });
            me.setState({
                count: me.state.count + 1
            });
        }

        onClick() {
            let me = this;
            me.setState({
                count: me.state.count + 1
            });
            me.setState({
                count: me.state.count + 1
            });

            setTimeout(() => {
                me.setState({
                    count: me.state.count + 1
                });
                me.setState({
                    count: me.state.count + 1
                });
            }, 1000);            
        }

        render() {
            console.log(this.state.count);
            return (
                <div>
                    <h1>{this.state.count}</h1>
                    <input type="button" value="点击我" onClick={this.onClick.bind(this)} /><br />
                    <br />
                </div>
            )
        }
      }
 
      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

willmount中的setState会合并成一次执行，count只会保留最后一次的设置，前面的放弃，所以willmount之后是1，并不是3；并且在render之前执行，不会引起新的render
render之后执行didMount，setState做同样的处理，这是count是2，并且引起新的render
点击按钮，setState做同样处理，count是3，引起新的render

备注：

定时器中的setState没走react的事物机制，执行时批量更新没被设置true，所以每次都直接render了。

在按钮原生事件中定义的setState,和定时器效果一样，每次setState都会引起新的render

因为setState并不会立刻修改this.state的值，所以下面的code可能产生很不直观的结果。

function incrementMultiple() {
  this.setState({count: this.state.count + 1});
  this.setState({count: this.state.count + 1});
  this.setState({count: this.state.count + 1});
}

直观上来看，当上面的incrementMultiple函数被调用时，组件状态的count值被增加了3次，每次增加1，那最后count被增加了3，但是，实际上的结果只给state增加了1。

原因并不复杂，就是因为调用this.setState时，并没有立即更改this.state，所以this.setState只是在反复设置同一个值而已，上面的code等同下面这样。

function incrementMultiple() {
  const currentCount = this.state.count;
  this.setState({count: currentCount + 1});
  this.setState({count: currentCount + 1});
  this.setState({count: currentCount + 1});
}

currentCount就是一个快照结果，重复地给count设置同一个值，不要说重复3次，哪怕重复一万次，得到的结果也只是增加1而已。

猜你喜欢