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立即生效。

你可能感兴趣的:(React源码解读之setState机制)