0

我试图更好地理解 React（功能）组件生命周期，useEffect()当它被赋予一个依赖数组作为第二个参数时，我感到困惑。我已经阅读了文档，我觉得我理解了useEffect它的第二个论点的基础知识，但仍然想知道更多。

For example

一个组件有两个状态变量：stateVarA和stateVarB。

setStateVarA()被调用，组件返回...渲染运行...协调发生...发生了某种变化，因此更新了 DOM。

现在，这就是我感到困惑的地方。如果我们有两个useEffect()，一个带有[stateVarA]依赖数组，另一个带有[stateVarB]依赖数组，React 如何“知道”哪个状态变量负责最新更新（因为在这种情况下，只有useEffect(f(),[stateVarA])将运行）？此信息是否存储在状态对象的某个位置？我觉得我在这里缺少一些基本的东西。

4

1 回答 1

1

对于useEffect组件中的每一个，它都会遍历依赖数组的每一项。如果其中一项不同（或者这是初始渲染），则该效果将运行。

当一个效果运行时，相关的依赖数组存储在 React 的内部。例如，给定

useEffect(() => {
  // do stuff
}, [foo, bar]);

假设两个变量在初始渲染时都是 1。然后，与此效果关联的依赖数组保存为

[1, 1]

在随后的渲染中，[foo, bar]再次评估，并与先前的依赖数组进行比较。当发生变化时，新的依赖数组值替换了 React 内部的旧依赖数组值，并且效果回调运行。

例如，bar可能更改为 2，导致

[1, 2]

并且回调将运行，并且 React 会将该效果的“当前依赖数组值”更新为[1, 2]. 这些当前值不存储在 state 中——它们是useEffect's 实现的内部。

于 2021-02-02T17:59:05.487 回答