Question

时

将setState（）视为请求，而不是立即更新组件的命令。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不保证立即应用状态更改。

React可以批量多个setState（）调用单个更新以提高性能。因为this.props和this.state可以异步更新，所以不应该依赖它们的值来计算下一个状态。

底层机制是什么？据我了解，这不是批量更新，而是按照先进先出规则排队吗？

我正在努力确保 setState 的FIFO规则如下：

this.setState({loading: true});
...// no matter what happened here as long as it's not stopped by errors;
this.setState({loading: false}); // the loading will always be set to **false**;

所以我不需要像以下丑陋的方式处理这个：

this.setState({loading: true}, () => {
    ...
    this.setState({loading: false});
});

最后，当我查看Functional setState is the future of React时，我认为它确实遵循FIFO规则。

要非常清楚，将对象传递给setState（）不是问题所在。当你想要计算前一个状态的下一个状态时，真正的问题是将对象传递给setState（）。

哈哈，一劳永逸

来自Dan Abramov的

Quote

使用函数多次调用setState是安全的。更新将排队，然后按照调用的顺序执行。

如果我错了，请纠正我。如果可以的话，请分享更多细节。

谢谢！

Answer 1

您似乎无法正确发送操作，也需要使用调度处理承诺，而不是像

这样的功能

  dispatch(askForData()).then(() => {
    ...
    this.setState({ loading: false });
  };

Answer 2

是的，您可以连续setState多次，最后一次调用将确定您的状态值（当然，如果您设置了相同的键）。

确切地说，出于优先考虑，更新的顺序可能与setState调用不完全相同。可以跳过某些呼叫，然后在CPU有更多时间提供之后重播。（很像git rebase）。

您可以在this file, from the react source code中了解有关此内容的更多信息。

由于React可以批量更新（如果覆盖了旧值，则忽略旧值），在这种情况下，您可能需要在另一个setState回调中调用setState，这就是您需要状态暂时具有特定值。

您可能会想象一个className，具体取决于状态，需要添加一个className，然后将其从DOM中快速删除以执行动画。

React this.setState会正常排队吗？

哈哈，一劳永逸

2 个答案: