React-setState执行过程(为什么不会同步更新组件)

小灰灰 2022-11-15 11:16 241阅读 0赞

### 文章目录 ###

*  一、setState 为什么不会同步更新组件？
 *  二、setState执行过程
 *   *  1.流程图
     *  2.执行过程
 *  三、分场景讨论
 *   *  1.钩子函数和合成事件中
     *  2.异步函数和原生事件中
     *  3.componentDidMount调用setstate
     *  4.componentWillUpdate componentDidUpdate
     *  5.事件处理类型
     *  6.传入的是函数
     *   *   *  例子

# 一、setState 为什么不会同步更新组件？ #

*  setState 不会立刻改变React组件中state的值.
 *  setState 通过触发一次组件的更新来引发“重绘”.
 *  多次 setState 函数调用产生的效果会合并。

这里的“重绘”指的是：引起 React 的更新生命周期函数4个函数：

*  shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state仍然会被更新）
 *  componentWillUpdate（被调用时this.state没有更新）
 *  render（被调用时this.state得到更新）
 *  componentDidUpdate

如果每一次 setState 调用都走一圈生命周期，会带来性能的问题，特别是render函数返回的结果会拿去做Virtual DOM比较和更新DOM树.

目前React会将setState的效果放在队列中，积攒着一次引发更新过程。

为的就是把 Virtual DOM 和 DOM 树操作降到最小，用于提高性能。

# 二、setState执行过程 #

## 1.流程图 ##

流程图：[来源][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

*  partialState：setState传入的第一个参数，对象或函数
 *  \_pendingStateQueue：当前组件等待执行更新的state队列
 *  isBatchingUpdates：react用于标识当前是否处于批量更新状态，所有组件公用
 *  dirtyComponent：当前所有处于待更新状态的组件队列
 *  transcation：react的事务机制，在被事务调用的方法外包装n个waper对象，并一次执行：waper.init、被调用方法、waper.close
 *  FLUSH\_BATCHED\_UPDATES：用于执行更新的waper，只有一个close方法

## 2.执行过程 ##

1.  将setState传入的partialState参数存储在当前组件实例的state暂存队列中。
2.  判断当前React是否处于批量更新状态，如果是，将当前组件加入待更新的组件队列中。
3.  如果未处于批量更新状态，将批量更新状态标识设置为true，用事务再次调用前一步方法，保证当前组件加入到了待更新组件队列中。
4.  调用事务的waper方法，遍历待更新组件队列依次执行更新。
5.  执行生命周期componentWillReceiveProps。
6.  将组件的state暂存队列中的state进行合并，获得最终要更新的state对象，并将队列置为空。
7.  执行生命周期componentShouldUpdate，根据返回值判断是否要继续更新。
8.  执行生命周期componentWillUpdate。
9.  执行真正的更新，render。
10. 执行生命周期componentDidUpdate。

# 三、分场景讨论 #

## 1.钩子函数和合成事件中 ##

在react的生命周期和合成事件中，react仍然处于他的更新机制中，这时isBranchUpdate为true。

按照上述过程，这时无论调用多少次setState，都会不会执行更新，而是将要更新的state存入\_pendingStateQueue，将要更新的组件存入dirtyComponent。

当上一次更新机制执行完毕，以生命周期为例，所有组件，即最顶层组件didmount后会将isBranchUpdate设置为false。这时将执行之前累积的setState。

## 2.异步函数和原生事件中 ##

由执行机制看，setState本身并不是异步的，而是如果在调用setState时，如果react正处于更新过程，当前更新会被暂存，等上一次更新执行后在执行，这个过程给人一种异步的假象。

在生命周期，根据JS的异步机制，会将异步函数先暂存，等所有同步代码执行完毕后在执行，这时上一次更新过程已经执行完毕，isBranchUpdate被设置为false，根据上面的流程，这时再调用setState即可立即执行更新，拿到更新结果。

## 3.componentDidMount调用setstate ##

> 在componentDidMount()中，你 可以立即调用setState()。它将会触发一次额外的渲染，但是它将在浏览器刷新屏幕之前发生。这保证了在此情况下即使render()将会调用两次，用户也不会看到中间状态。谨慎使用这一模式，因为它常导致性能问题。在大多数情况下，你可以 在constructor()中使用赋值初始状态来代替。然而，有些情况下必须这样，比如像模态框和工具提示框。这时，你需要先测量这些DOM节点，才能渲染依赖尺寸或者位置的某些东西。

以上是官方文档的说明，不推荐直接在componentDidMount直接调用setState，由上面的分析：componentDidMount本身处于一次更新中，我们又调用了一次setState，就会在未来再进行一次render，造成不必要的性能浪费，大多数情况可以设置初始值来搞定。

当然在componentDidMount我们可以调用接口，再回调中去修改state，这是正确的做法。

当state初始值依赖dom属性时，在componentDidMount中setState是无法避免的。

## 4.componentWillUpdate componentDidUpdate ##

这两个生命周期中不能调用setState。

由上面的流程图很容易发现，在它们里面调用setState会造成死循环，导致程序崩溃。

## 5.事件处理类型 ##

> 在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用 setState 不会同步更新 this.state，除此之外的setState调用会同步执行this.state。

所谓“除此之外”，指的是绕过React通过 addEventListener 直接添加的事件处理函数，还有通过setTimeout || setInterval 产生的异步调用。

简单一点说， 就是经过React 处理的事件是不会同步更新 this.state的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。

## 6.传入的是函数 ##

> 调用 setState 其实是异步的 —— 不要指望在调用 setState 之后，this.state 会立即映射为新的值。如果你需要基于当前的 state 来计算出新的值，那你应该传递一个函数，而不是一个对象（详情见下文）。

我们看下流程中\_processPendingState的代码，这个函数是用来合并state暂存队列的，最后返回一个合并后的state。

_processPendingState: function (props, context) {
        var inst = this._instance;
        var queue = this._pendingStateQueue;
        var replace = this._pendingReplaceState;
        this._pendingReplaceState = false;
        this._pendingStateQueue = null;
    
        if (!queue) {
          return inst.state;
        }
    
        if (replace && queue.length === 1) {
          return queue[0];
        }
    
        var nextState = _assign({}, replace ? queue[0] : inst.state);
        for (var i = replace ? 1 : 0; i < queue.length; i++) {
          var partial = queue[i];
          _assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);
        }
    
        return nextState;
      },

重点看这段代码

_assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);

如果传入的是对象，很明显会被合并成一次：

Object.assign(
      nextState,
      {index: state.index+ 1},
      {index: state.index+ 1}
    )

如果传入的是函数，函数的参数preState是前一次合并后的结果，所以计算结果是准确的。  
在调用setState时使用函数传递state值，在回调函数中获取最新更新后的state。

#### 例子 ####

[例子来源][Link 2]  
想要实现 每一次点击， 累加三次，  
这样，是不行的

this.state = {
      count: 0，
    }
    
    incrementCount() {
      this.setState({
        count: this.state.count + 1,
      });
    }
    
    handleIncrement = () => {
     this.incrementCount();
     this.incrementCount();
     this.incrementCount();
      // 当 React 重新渲染该组件时，`this.state.count` 会变为 1，而不是你期望的 3。
    
      // 这是因为上面的 `incrementCount()` 函数是从 `this.state.count` 中读取数据的，
      // 但是 React 不会更新 `this.state.count`，直到该组件被重新渲染。
      // 所以最终 `incrementCount()` 每次读取 `this.state.count` 的值都是 0，并将它设为 1。
    }

改为传入一个更新函数  
传递一个函数可以让你在函数内访问到当前的 state 的值。因为 setState 的调用是分批的，所以你可以链式地进行更新，并确保它们是一个建立在另一个之上的，这样才不会发生冲突：

incrementCount() {
      this.setState((state) => {
        // 重要：在更新的时候读取 `state`，而不是 `this.state`。
        这里函数的参数state即为 state 的前一个状态以及 props。
        return {count: state.count + 1}
      });
    }
    
    handleSomething() {
      // 假设 `this.state.count` 从 0 开始。
      this.incrementCount();
      this.incrementCount();
      this.incrementCount();
    
      // 如果你现在在这里读取 `this.state.count`，它还是会为 0。
      // 但是，当 React 重新渲染该组件时，它会变为 3。
    }

参考：  
[https://reactjs.bootcss.com/docs/faq-state.html][Link 2]  
[https://juejin.cn/post/6844903781813993486][https_juejin.cn_post_6844903781813993486]

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/115350055][https_blog.csdn.net_qq_39903567_article_details_115350055]

[Link 1]: https://juejin.cn/post/6844903781813993486#heading-2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221022/26da7a264c88415e8c0cd8b0dcdf17c8.png
[Link 2]: https://reactjs.bootcss.com/docs/faq-state.html
[https_juejin.cn_post_6844903781813993486]: https://juejin.cn/post/6844903781813993486
[https_blog.csdn.net_qq_39903567_article_details_115350055]: https://blog.csdn.net/qq_39903567/article/details/115350055