深入 setState 机制

原文：https://github.com/sisterAn/blog/issues/26

React 通过状态管理来实现对组件的管理，当使用 this.setState() 时，React会调用 render 方法来重新渲染 UI。
先看一个例子：

import React from 'react';

class Example extends React.Component {
    constructor() {
      super();
      this.state = {
        val: 0
      };
    }
    
    componentDidMount() {
      this.setState({val: this.state.val + 1});
      console.log(1,this.state.val);    // 第 1 次 log
  
      this.setState({val: this.state.val + 1});
      console.log(2,this.state.val);    // 第 2 次 log
  
      setTimeout(() => {
        this.setState({val: this.state.val + 1});
        console.log(3,this.state.val);  // 第 3 次 log

        this.setState({val: this.state.val + 1});
        console.log(4,this.state.val);  // 第 4 次 log
      }, 0);
    }
  
    render() {
      return 
React Hello --- {this.state.val}
;
    }
};
export default Example

答案是： 0 0 2 3。
原因是：
1、第一次和第二次都是在 react 自身生命周期内，触发时 isBatchingUpdates 为 true，所以并不会直接执行更新 state，而是加入了 dirtyComponents，所以打印时获取的都是更新前的状态 0。

2、两次 setState 时，获取到 this.state.val 都是 0，所以执行时都是将 0 设置成 1，在 react 内部会被合并掉，只执行一次。设置完成后 state.val 值为 1。

3、setTimeout 中的代码，触发时 isBatchingUpdates 为 false，this.setState 同步执行代码，所以能够直接进行更新，所以连着输出 2，3。

一、setState 异步更新：

setState通过一个队列机制来实现 state 更新，当执行 setState() 时，会将当前执行栈中所有需要更新的 state 浅合并后放入状态队列中，而不会立即更新 state。

// 假设 state.count === 0
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
// state.count === 1, 而不是 3

本质上等同与将当前执行栈中多个 setState 与 state 进行了浅合并：

// 假设 state.count === 0
Object.assign(state,
              {count: state.count + 1},
              {count: state.count + 1},
              {count: state.count + 1} )
// {count: 1}

如何解决这个问题，即使用 setState() 的第二种形式：以 function(state, props) => newState 函数作为参数，而不是一个对象，此函数第一参数为前一刻的 state， 第二参数为 接收的 props 属性。

// 使用方法：
this.setState((prevState, props) => {
  count: prevState.count + 1
})

二、setState 循环调用的风险：

当调用 setState 时，实际上会执行 enqueueSetState 方法，最终通过 enqueueUpdate 执行 state 的更新。但如果在 shouldComponentUpdate 或者 componentWillUpdate 方法里调用 this.setState 会导致调用 updateComponent 方法进行组件更新，而 updateComponent 方法又会调用 shouldComponentUpdate 和 componenitWillUpdate 方法，因此造成循环调用，使得浏览器沾满后崩溃。

三、总结：

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理）、生命周期函数中，调用setState不会同步更新this.state，除此之外如 addEventListener 、setTimeout、setInterval 会同步执行。

原因：在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中等待更新，而isBatchingUpdates默认是false，即默认是同步执行。但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理setState不会同步更新this.state。