react 连续调用了两次this.setState，但是只会引发一次更新生命周期render（）只执行一次

怼烎@ 2021-11-17 09:12 666阅读 0赞

### **问题：** ###

因为业务需求，一个方法里需要多次调用setState（也可能是我自己菜，我觉得这些set不能整合到一块），

setState了很多次，然后render（）只调用了一次

### **原因：** ###

React会将多个this.setState产生的修改放在一个队列里，缓一缓，攒在一起，觉得差不多了再引发一次更新过程。

react为了提高整体的渲染性能，会将一次渲染周期中的state进行合并，在这个渲染周期中你对所有setState的所有调用都会被合并起来之后，再一次性的渲染，这样可以避免频繁的调用setState导致频繁的操作dom，提高渲染性能。具体的实现方面，可以简单的理解为react中存在一个状态变量isBatchingUpdates，当处于渲染周期开始时，这个变量会被设置成true，渲染周期结束时，会被设置成false，react会根据这个状态变量，当出在渲染周期中时，仅仅只是将当前的改变缓存起来，等到渲染周期结束时，再一次性的全部render。

### **解决：** ###

尝试过

setTimeout(() => \{  
      this.setState(\{xxx: xxx\});  
    \}, 0);

可能是我操作的方式不对，这个没有生效

这个setTimeout的方法参考[https://blog.csdn.net/handsomexiaominge/article/details/86348235][https_blog.csdn.net_handsomexiaominge_article_details_86348235]这篇博客有需要的可以借鉴一下。

但是我用了没用

然后 我就换个思路，既然是因为render（）没有实时重绘，那么我就想办法让我这些值改变后强制重绘

this.forceUpdate()

这样算是不完美的解决了这个问题。

调用 forceUpdate() 将会导致 render() 方法在相应的组件上被调用，并且子级组件也会调用自己的 render()，但是如果标记改变了，那么 React 仅会更新 DOM。通常情况下，应该尽量避免所有使用 forceUpdate() 的情况，在 render() 中仅从 this.props 和 this.state 中读取数据。这会使应用大大简化，并且更加高效。  
这个方法借鉴与Himi的技术博文[https://blog.csdn.net/xiaominghimi/article/details/51397192][https_blog.csdn.net_xiaominghimi_article_details_51397192]有需要的可以借鉴下。

[https_blog.csdn.net_handsomexiaominge_article_details_86348235]: https://blog.csdn.net/handsomexiaominge/article/details/86348235
[https_blog.csdn.net_xiaominghimi_article_details_51397192]: https://blog.csdn.net/xiaominghimi/article/details/51397192