reactjs - React.Component setState 原子更新

Question

https://facebook.github.io/react/docs/react-component.html#setstate

也可以传递带有签名 function(state, props) => newState 的函数。这会将原子更新排入队列，该更新会在设置任何值之前咨询 state 和 props 的先前值。例如，假设我们想通过 props.step 增加 state 中的值：

this.setState((prevState, props) => {
  return {myInteger: prevState.myInteger + props.step};
});

这里的原子更新是什么意思？JavaScript 不是单线程语言吗？这意味着所有更新都必然是原子的？

Answer 1

单线程是的，但也有很多潜在的异步性。

let atom = 10
atom = 20
console.log(atom) // guaranteed to be 20, so "atomic"

// race condition
setTimeout(() => atom = 30, Math.random() * 1000)
setTimeout(() => atom = 40, Math.random() * 1000)

setTimeout(() => console.log(atom), 2000) // 30? or 40? random!

setState是一个异步调用，因此它可能state在执行后发生了变化。

也许适用的不同措辞是回调函数将事务更新入队，尽管我认为任何花哨的措辞在这里都可能令人困惑。最好只是解释状态可能已经改变，所以回调有前一个状态的确切快照。