reactjs - 对相互取消的状态进行 2 次更改而不重新触发 useEffect

Question

我在这里的代码示例中看到了一些意想不到的东西：https ://codesandbox.io/s/react-redux-application-forked-lb7zk?file=/src/pages/DashboardPage.js:415-452

我正在记录变量的x变化（来自 redux 状态）。

我调度了 2 个相互取消的动作：

1. x从 1 开始
2. 第一次调度将其更改为：x=2
3. 第二次调度将其更改回：x=1

我期待看到 3 个 console.logs，一个用于初始渲染，另外两个用于上述每个更改。但相反，我只得到 1，即初始渲染的那个。似乎由于它们都是突然发生的，redux 似乎对动作进行了批处理，因此在这种情况下状态并没有真正改变。

这真的让我怀疑，我想了解发生了什么。，这是怎么回事？

Answer 1

编辑：反应批处理发生在事件处理程序和生命周期方法中的状态更新。因此，如果您在 UseEffects 钩子中多次更新状态，React 将在重新渲染之前等待事件处理完成。

相关问题

你是对的。发生的事情是它运行所有 3 个动作一次，并且 console.log() 在状态更新后运行。它本质上是这样运行的：

useEffect(() => {
    dispatch(test(2));
    dispatch(test(1));
    console.log("Did X change?", x);
  }, [dispatch, x]);

Answer 2

我相信原因是 React 中的自动批处理。正如我们所知，“React 将多个状态更新分组到一个重新渲染中以获得更好的性能”。

有关更多信息，请查看 React 18 组中的精彩讨论： https ://github.com/reactwg/react-18/discussions/21

我希望它对您发现问题有所帮助。