reactjs - 在 useEffect 中使用额外的依赖有什么后果？

Question

假设我有这段代码:

useEffect(() => {
  makeBreakfast(pig)
}, [pig, chicken])

makeBreakfast 在 pig 上被调用，它在依赖项中是有道理的。然而在这个虚拟示例中，我们还想在 chicken 发生变化时用 pig 做早餐(我不知道为什么，这只是一个例子!)。我们实际上是在监听 chicken 的变化，即使它没有参与 makeBreakfast 函数。

useEffect(() => {
  if(breakfastMadeRef.current) {
    farmerFed.current = true;
  }
}, [farmerIndex])

在这个例子中，没有实际的依赖关系，但我们确实想检查/更改对 farmerIndex 更改的引用(同样，只是一个虚拟示例)。

这种“额外”依赖会产生什么后果吗？这对我来说似乎是不干净的，正如我所期望的(从文档和我见过/使用过的其他地方 useEffect)，所有依赖项都将在效果函数的主体中使用。

如果我使用规则 react-hooks/exhaustive-deps，就像预期的那样，没有任何提示。所以我倾向于认为这没问题，尽管如果我们最终将整个农场添加到依赖项列表可能会产生误导/混淆？

Answer 1

没有任何后果，但通常表示有代码味道。

提供给 useEffect() 的数组最好被认为是“这个效果与这个数据同步”而不是“每次这个数据改变时运行这个效果”。如果效果实际上没有使用提供给它的数据，那么当它发生变化时不需要重新运行。

通常，提供给 useEffect() 的无关变量最终将成为派生状态，或者变量更改由函数触发，而函数本身应该是突变的来源。

没有更具体的例子很难说太多；您选择的示例不太可能出现在现实世界中。