这是一个很长的答案。 如果您不想全部阅读，请向下滚动至底部的TLDR。
请注意，我描述了一些可能在React 17+中更改的实现细节。
这就是为什么我们的文档稍微模糊一些的原因，以便大多数人不会过多地依赖实现细节。但是在这种情况下，您似乎对它的 真正
工作方式特别感兴趣，所以我必须比我想做的更加具体。
现在，我从理论上担心，在克隆状态（clickHandler中的第三条语句）的地方，可能会发生我没有获得该状态的最新版本的情况-
因为来自上一次clickHandler调用的一些setState调用正在等待处理，这是否有效？
否。在收到此回复（React 16和任何早期版本）时，
this.state可以安全地读取事件处理程序， 然后自己更新状态 。所以这段代码很好：
handleClick() { var something = this.state.something;它将为您提供当前状态。
唯一的陷阱是，如果您称呼
setState自己，则不应期望
this.state立即进行更新。所以这段代码行不通：
handleClick(e) { this.setState({ something: e.target.value }); var something = this.state.something; // Don't expect to get newValue here注意：注释中还指出了另一个极端情况：如果您有多个
onClick处理程序，则存在相同的陷阱：调用setState()子事件处理程序后，您将不能依赖于this.state父事件处理程序运行时进行更新。实际上，这就是此优化如此有用的原因：setState()来自单个浏览器事件的所有调用都被分批处理，无论它们是在事件冒泡时发生在一个组件中还是在不同组件中发生。
不过，这不是问题，因为 如果您打电话给setState
您，您已经知道将其设置为什么：
handleClick(e) { var newValue = e.target.value; this.setState({ something: newValue }); // There's no need to "read" something from state. // Since you just set it, you already *know* // what you set it to. For example: doSomethingWith(newValue);现在，有些情况下您想 根据先前的状态 更新 状态 。尽管您可能刚刚读
this.state了事件处理程序，但这仅能运行一次：
handleIncrement() { // This will increment once: this.setState({ counter: this.state.counter + 1 }); // These won't work because this.state.counter isn't updated yet: this.setState({ counter: this.state.counter + 1 }); this.setState({ counter: this.state.counter + 1 });为了让您不必担心此类情况，
React提供了另一个setState()
接受函数的重载。该功能将在应用更新时接收当前状态，因此您可以安全地使用它。React将确保通过所有未决函数“线程化”当前状态：
function increment(prevState) { return { counter: prevState.counter + 1 };}// ...handleIncrement() { // Each function in the queue will receive the right state: this.setState(increment); this.setState(increment); this.setState(increment); // So this will increment three times.从React 16及更早版本开始，此重载仅在您
setState()从同一事件处理程序多次调用时才有用。但是，由于它也可以在其他情况下
使用，因此我们通常建议您
setState()在每次 呼叫取决于当前状态 时都使用它，
因此您根本不需要考虑这一点。但是，如果您的代码在没有它的情况下可以工作，并且尝试对其进行重写，则会使其更加混乱，请暂时不要打扰。
将来我们可能还会在更多情况下使用它，但是我们会在将来的版本中明确指出此类更改。我们还将为此开发一个更“自然”的API，因为我们注意到人们对矛盾感到困惑，因为的明显的命令性
setState()和我们建议的更实用的方法。
在您的特定情况下，我实际上认为第一种方法更简单。您只能
setState()在事件处理程序中调用一次（超时会在以后发生），因此，多个连续调用的陷阱不适用。
您使用功能
setState()形式的第二种方法实际上并未正确使用它，从而使整个代码更加混乱。函数形式
setState()假定您传递给它的函数是纯函数。例如，这是一个纯函数：
function increment(prevState) { return { counter: prevState.counter + 1 };}但是，传递给您的函数不仅会计算下一个状态，而且还会安排超时，保留一部分状态，将其更改为适当的位置，然后在超时内
setState再次调用。显然，这
不是 纯函数的行为。经验法则是，
如果您不打算在内部执行任何操作
render()，则也不应在
setState()updater函数中执行该操作。
再一次，在React
16或更少的版本中，在这种特殊情况下将代码重写为函数形式是没有好处的（我在上面解释了原因：您只调用
setState()一次，并且您不打算立即读取状态）它）。但是，如果您确实想使用函数形式，则需要确保传递的函数是纯函数。问题是：那么您将超时逻辑放在哪里？
我认为
超时逻辑最好放在componentDidUpdate()
生命周期挂钩中。这样，只要满足必要条件，状态更改就会真正触发它（无论组件在何处发生）。例如，即使你有两个按钮触发相同的状态变化，他们两个都会引起
componentDidUpdate()火灾，而且它可以根据运行超时逻辑
是如何 的状态改变。
由于您的问题是关于实现内存游戏的，因此基于GitHub讨论，我编写了一些伪代码来说明如何执行此任务。让我在这里引用我的答案：
我认为，如果将此逻辑的与超时相关的部分拆分为
componentDidUpdate生命周期挂钩，则代码可能更易于理解。可能还有更好的方法来对状态本身进行建模。匹配的游戏看起来像是一个“状态机”，具有几个不同的有效状态（未选择任何内容，选择一项并等待，选择了两个正确的项目，选择了两个错误的项目）。可能需要将这些可能的游戏状态更直接地编码到组件状态中，并更仔细地考虑如何用对象表示它们。例如，可能不是一个单元格值数组，而是更容易考虑如下显式状态：
{ openedCells: [1, 2], // array of ids firstSelectedCell: 5, // could be null secondSelectedCell: 7, // could be null}然后在执行条件逻辑
componentDidUpdate，例如handleClick(e) { // Are we waiting for a timeout? Reset it. if (this.resetTimeout) { clearTimeout(this.resetTimeout); } const id = ... // get it from target node, or bind event handler to IDin render()
this.setState(prevState => {
if (prevState.firstSelectedCell !== null &&
prevState.secondSelectedCell === null) {
// There is just one selected cell. We clicked on the second one.
return {
secondSelectedCell: id
};
}
// We are selecting the first cell
// (either because we clicked to reset both or because none were
selected).
return {
firstSelectedCell: id,
secondSelectedCell: null
};
}componentDidUpdate(prevState) { if (prevState.secondSelectedCell !== this.state.secondSelectedCell) { // We just picked the second cell. if (isSamePicture( this.state.secondSelectedCell, this.state.firstSelectedCell ) { // Same picture! Keep them open. this.setState(prevState => { // Add them both to opened cells and reset. return {firstSelectedCell: null,secondSelectedCell: null,openedCells: [ ...prevState.openedCells, prevState.firstSelectedCell, prevState.secondSelectedCell] }; } else { // Clear both in a second. this.resetTimeout = setTimeout(() => { this.setState({ firstSelectedCell: null, secondSelectedCell: null, }); }, 1000); }}然后，在渲染方法，可以显示电池如果他们要么是
openedCells或他们firstSelectedCell或secondSelectedCell。
我希望这有帮助！总结一下， 这是TLDR ：
- 至少在React 16（或更早版本）中，在事件处理程序中
this.state
的第一次setState()
调用之前进行读取将为您提供当前状态。但是不要期望它会在之后立即 更新setState()
。 - 函数的重载
setState()
可以防止这种陷阱，但是它要求传递的函数是纯函数。设置超时 不是 纯粹的。 - 在
componentDidUpdate()
生命周期挂钩可能是用于设置取决于状态超时一个更好的地方。
