React源码解读之setState机制

众所周知，React 通过 this.state 来访问 state,通过 this.setState() 来更新 state。当 this.setState() 被调用时，React 会重新调用 render 渲染 UI。下面来谈谈 setState 的更新机制。

1、异步更新

setState 通过一个队列机制实现 state 的异步更新，避免了频繁重复的更新 state。

当执行 setState 时，会将需要更新的state合并后放入状态队列，而不会立刻更新this.state，队列机制可以高效批量的更新 state。如果不是有 setState 而直接修改 this.state 的值，那么该 state 不会被放入状态队列中，当下次调用 setState 并对状态队列进行合并时，将会忽略之前被直接修改的 state ，从造成错误。

2、循环调用的风险

在 shouldComponentUpdate 或 componentWillUpdate 方法中调用 setState，会造成循环调用，使浏览器内存占满后崩溃。

3、state调用栈

调用 setState 时，实际上会执行 enqueueSetState 方法，将原来的及当前新的状态队列进行合并，最终通过 enqueueUpdate 执行 state 更新。那么，enqueueUpdate 是如何更新 state 的呢？

setState(newState)调用后，会将 newState 存入pending 队列，在调用 enqueueUpdate 进行更新时， 会判断当前是否处于批量更新模式( isBatchingUpdates 是否为true )。如果处于，则将组建保存到 dirtyComponent ；如果不处于，则执行batchedUpdates() 。该方法会遍历 dirtyComponent，并调用 updateComponent，对state、props进行更新。

以以下代码为例：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  componentDidMount() {
    this.setState({count: this.state.count + 1});
    console.log(this.state.count);    // 打印出0
   
    this.setState({ count: this.state.count + 1});
    console.log(this.state.count);    // 打印出0
    
    setTimeout(function(){
        this.setState({ count: this.state.count + 1});
        console.log(this.state.count);   // 打印出2
    }, 0);

    setTimeout(function(){
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count);   // 打印出3
    }, 0);
  }
  render() {
    return (
      
{this.state.count}
    )
  }
}

结果会输出0、0、2、3。为什么？

实际上，在将组件渲染到DOM的过程中，就会触发 isBatchingUpdates 为 true ，因此，前两次的setState并没有立即生效，而是被放进了 dirtyComponent 中。故而前两次都是打印0。而在 setTimeout 中的 setState，因为 isBatchingUpdates 为 false， 故而新的state立即生效。