Question

让我们说我有以下使用React钩子的组件

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个不同的状态变量。我打算将这两个变量重构为1个对象，但我想我会首先将它们作为2个单独的变量进行测试。

我观察到的是，即使我在同一依赖项数组中更新2个不同的状态var，副作用函数也只能执行一次，这是我想要的，但是我不知道为什么。有人可以解释一下阀盖下的工作原理吗？

Answer 1

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

Answer 2

反应批次在后台显示更新。

那只是意味着打电话

setState1(...);
setState2(...);

在相同的同步（！）执行周期（例如，在相同的函数中）不会触发两个组件的重新渲染周期。

相反，该组件将只重新渲染一次，并且两个状态更新将同时应用。

新状态值可用时，没有直接关系，但有时也会被误解。

考虑以下代码：

console.log(name); // prints name state, e.g. 'Doe'
setName('John');

console.log（名称）; // ???打印什么？ “约翰”？

您可能认为在setName（'John'）;之后访问名称状态；应该产生新值（例如“ John”），但事实并非如此。

新状态值仅在下一个组件渲染周期（通过调用setName（）进行调度）中可用。

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

2 个答案: