在 Reactjs 中是否尊重多个 setState() 的顺序？答案

【问题标题】：does order of multiple setState() is respected in Reactjs?在 Reactjs 中是否尊重多个 setState() 的顺序？
【发布时间】：2020-07-09 11:19:56
【问题描述】：

在我的问题中，如果我有不同的 setState() 调用，在执行它们时是否会尊重它们的顺序？我知道 setState() 是异步的，所以如果 setState() 数字 [1] 例如很重（从繁重的代码计算中更新），它会执行并在轻 setState() 数字 [2] 之前或之后给出结果]（从轻代码更新）？我的意思是 setState() [2] 会等到 setstate() [1] 完成吗？

setState({imgfile:imgf});//[1]
setState({title:tit});//[2]

【问题讨论】：

在这种情况下可以自己完成一个实验。我不认为这是一个有效的问题。但我猜的答案是否定的。 Setstate 不会等待，因为它是异步的
这能回答你的问题吗？ Does React keep the order for state updates?

标签： javascript reactjs

【解决方案1】：

如果您想在更新后立即采取行动，您应该使用this.setState 的回调。通过将第二个参数传递给this.setState，您可以保证您的函数将在更新标题后执行。

this.setState({
  title: 'My title'
}, () => {
  this.setState({
    dogName: 'Rocky'
  });
});

【讨论】：

【解决方案2】：

setState 在设计上是异步的。当您调用setState 时，不能保证立即更新状态，它会发送更新请求。如果它正在执行复杂的更改，您不希望它同步并阻止 UI 的呈现。

如果您需要等待您的第一个 setState 完成后再执行其他操作，那么您可以使用如下回调：

setState({imgfile:imgf}, () => 
{
   //do something
});

如果您的下一个操作是另一个状态更改，那么您应该对它们进行批处理。

setState({imgfile:imgf, title: tit})

【讨论】：

【解决方案3】：

如果我有不同的setState() 调用，在执行它们时它们的顺序是否重要？

基本上，是的，确实如此。它们按照在每个渲染周期中排队（和批处理）的顺序进行处理。

setState()[2] 会等到setstate()[1] 完成吗？

不，所有状态更新都在 React 的协调周期中进行批处理和处理。

如果每个状态更新都是独立的，那么它们处理的顺序并不重要。
然而，有时状态更新依赖之前的状态值，（即递增计数器）；这些是您要使用的地方功能状态更新，因此如果有多个更新排队，则每次后续更新都使用上一次更新的结果。
在 在一些其他情况下，一个状态值可能依赖于另一个不同的状态值。

这是我用来帮助说明第二种情况的codesandbox demo。

对于第三种情况，有几个选项。首先是基于类的组件的setState 回调（功能组件的useState 钩子没有这个），它保证在状态更新后运行。但是，这可能会导致嵌套问题。第二种，也是 IMO 更正确的方法，是使用组件生命周期函数（或功能组件中的钩子）来响应特定状态值的更新，并触发其他状态对其他状态值的更新。

【讨论】：