setState 异步更新

Question

状态更新可能是异步的

React 可以将多个 setState() 调用批处理到单个更新中以提高性能。

因为 this.props 和 this.state 可能会异步更新，所以您不应该依赖它们的值来计算下一个状态。

例如，这段代码可能无法更新计数器：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

要修复它，请使用接受函数而非对象的第二种形式的 setState()。该函数将接收先前的状态作为第一个参数，应用更新时的道具作为第二个参数：

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

我不太清楚这是什么意思。我发现这些例子令人困惑。

所以我想出了一个自己的例子。

如果我对上面的评论理解正确，那么下面的不正确？

const [var, set_var] = useState(false);

...

set_var(!var)

我正在尝试使用当前状态的值设置新状态。

根据教程，这不正确？

Answer 1

它是正确的，但在某些情况下它可能不会像您预期的那样工作。

比如你用了两次

const [var, set_var] = useState(false);

set_var(!var);
set_var(!var);

你希望它变成 false->true->false 吗？因为它不会。它会去 false->true->true 因为在第二次调用中 var 不会被更新，所以它会再次使用 !false .

使用回调形式，它将在回调执行时使用变量的当前值，它将按预期工作。

set_var( prevVar => !prevVar )
set_var( prevVar => !prevVar )

这确实改了两次，又结束到false

setState updates asynchronously