【问题标题】:Why React setState can be asynchronous?为什么 React setState 可以是异步的?
【发布时间】:2017-04-16 15:58:11
【问题描述】:
我知道setState 可以是同步的或异步的:
setState() 不会立即改变 this.state 而是创建一个
等待状态转换。调用后访问this.state
方法可能会返回现有值。
不保证对setState的调用同步操作
并且调用可能会被批处理以提高性能。
是的,我知道该函数执行了一些操作:
- 更新状态中的实际值
- 根据需要使用新的状态值更新虚拟和真实 DOM
但我想弄清楚为什么这有时是同步的,有时是异步的?幕后发生了什么?为什么不能一直同步?
谢谢。
【问题讨论】:
标签:
javascript
reactjs
asynchronous
【解决方案1】:
您的状态更改可能来自多个来源(取决于您的应用),并且组件中的每个状态更改都安排在一个队列中。因此,如果您在组件中执行 this.setState() ,那么它会等待,以及解决该组件的所有其他潜在 setState。当您执行类似 this.setState({ value: this.state.value + 1 }) 并期望结果时,可能会发生这种情况然后此操作正在等待解决,如果在此等待期间发生了另一个操作操作系统状态更改那么我们将在最新的 this.stare.value 上进行操作,从而导致意外的返回。一般来说,当我处理基于先前状态的状态更改时,我会以这种方式更改状态: this.setState((prevState) => prevState.value + 1) 这意味着我正在传递状态我目前已经根据这个记住的状态进行修改,而不必依赖 this.state。