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

Question

假设我有以下使用 react Hook 的组件

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 将批量更新状态，这就是为什么你的副作用 block 只被调用一次的原因。有关更多信息，您可以引用此线程:https://github.com/facebook/react/issues/14259