如果我需要更新 2 个依赖变量，React 如何只执行一次副作用函数

Question

假设我有以下组件使用反应钩子

const Component = (props) => {
   [state1, setState1] = useState();
   [state2, setState2] = useState();
   useEffect(()=>{
       // use state1 and state2 as param to fetch data
       ...
   }, [state1, state2])

   onSomethingChange = () => {
       setState1(...);
       setState2(...);
   }

   return (..);
}

当onSomethingChange触发时，我认为它会调用副作用函数两次，因为我在同一个依赖项数组中更新了 2 个不同的状态变量。我打算将这 2 个变量重构为 1 个对象，但我想我会首先将它们作为 2 个单独的变量进行测试。

我观察到的是，即使我在同一个依赖项数组中更新了 2 个不同的状态变量，副作用函数也只会执行一次，这就是我想要的，但我不知道为什么。有人可以解释一下它在引擎盖下是如何工作的吗？

Answer 1

这是因为 React 有时可能会将多个状态更改批处理为一个更新以提高性能。如果从基于 React 的事件中触发状态更新，React 将批处理状态更新，这就是为什么您的副作用块只被调用一次的原因。有关更多信息，您可以参考此线程：https : //github.com/facebook/react/issues/14259