React.Component setState 原子更新

【问题标题】：React.Component setState atomic updatesReact.Component setState 原子更新
【发布时间】：2017-01-03 22:12:43
【问题描述】：

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

也可以传递带有签名的函数功能（状态，道具）=> 新状态。这将原子更新排入队列在设置任何之前咨询 state 和 props 的先前值价值观。例如，假设我们想在 state 中增加一个值通过 props.step:

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

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

【问题讨论】：

标签： reactjs atomic setstate

【解决方案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 自执行后可能已更改。

也许适用的不同措辞是回调函数将 事务性 更新排入队列，尽管我认为任何花哨的措辞都可能在这里造成混淆。最好只解释状态可能已更改，因此回调具有先前状态的确切快照。

【讨论】：