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