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

问题:

因为业务需求,一个方法里需要多次调用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这篇博客有需要的可以借鉴一下。

但是我用了没用

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

this.forceUpdate() 

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

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

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值