React useState钩子调用时是否保证同时调用函数参数？

提问者：小点点

React useState钩子调用时是否保证同时调用函数参数？

我有一些类似的代码：

const [thing, setThing] = useState('');
const [value, setValue] = useState({
  thing: '',
  somethingElse: '',
});

//...

setThing(aThing);
setValue((prev) => ({ ...prev, thing: aThing }));

在后面的代码中，我可以保证thing==value。东西？或者这两个useState设置程序可能在不同的时间调用？

共1个答案

匿名用户

setState是异步函数，如果不批处理更新，则第一个setState可能在第二个语句之前完成。

如果从基于React的事件（如按钮单击或输入更改）中触发，React当前将批处理状态更新。如果在React事件处理程序（如setTimeout（））外部触发更新，则不会对其进行批处理。

setState（）并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得阅读成为可能。调用setState（）后立即声明可能存在的陷阱。相反，使用componentDidUpdate或setState回调（setState（updater，callback）），这两种回调都保证在应用更新后触发。如果需要基于上一个状态设置状态，请阅读下面的updater参数。

这种形式的setState（）也是异步的，同一周期内的多个调用可能会被批处理在一起。例如，如果您试图在同一周期中多次增加物品数量，将导致以下等效结果：

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

后续调用将覆盖同一周期中先前调用的值，因此数量只会增加一次。如果下一个状态取决于当前状态，我们建议使用updater函数形式，而不是：

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

你可以在这里阅读更多关于反应官方文档的状态。