是否总是需要将 useEffect 中所有使用的函数添加到其依赖项数组中？

Question

我目前正在 React 上构建一个俄罗斯方块游戏，只是为了练习钩子（过去用于在类组件中开发，有点离开 React 一段时间，昨天我决定再次使用它）。

游戏运行良好，在每种情况下都按预期运行，但是，在 useEffect 中使用函数而不是依赖项时，会不断出现警告。

澄清一下 - 我有一个 useEffect 函数，它所做的只是调用一个 updateFunction 并且仅依赖于移动俄罗斯方块块的 x 和 y 坐标。每当形状的位置发生变化时，更新函数都会更新棋盘的状态。

我知道 React 在每次渲染时都会重新创建函数，但是给更新函数一个 useCallback 会导致它被无休止地重新创建（那时，编译器会要求我让它依赖于板子状态，因此每次更新板子时，都会强制重新创建一次），这会导致渲染无限循环。

是否真的有必要将每个函数作为依赖项放在 useEffect 中，即使这些函数只会导致视觉渲染来显示游戏的当前状态？

Answer 1

你总是可以把整个函数放在 useEffect 中，你想得到这个错误和问题

Answer 2

刚刚有人问了类似的问题，我的答案就在那里，React won't let me use `useEffect` in a completely reasonable way

您的问题的答案是，不，您不必这样做，如果警告没有打扰您，并且您的代码仍在工作，那么继续。

否则，您可以尝试找到一种方法来禁用此 linter，或者问自己为什么不满足所有依赖项要求。

Answer 3

最好将效果依赖关系视为“正确”与否，而不是尝试对它们进行剪裁以实现某些特定行为。 （无论如何，绝大多数时间）

这意味着如果一个效果使用一个可能改变的值，那么它就被声明为一个依赖。有时，如果您的依赖项“不正确”，您的应用程序可以正常工作，因为在其他地方您可以保证值是恒定的。但这更多是为了维护应用程序，而不是让它当前工作。

稍后，如果您在重构中更改其中一个依赖项的工作方式，那么现在可能需要重新运行效果，并且不会导致奇怪且难以诊断的错误，例如您无法分辨它们在哪里的陈旧值来自。

如果这会导致繁琐的 hooks 带有巨大的依赖数组，它们本身无限循环，那么这表明逻辑是混乱的，需要重构、拆分为多个效果、重新考虑数据如何通过 hooks 流动等等。

p>

如果没有看到您的代码，很难给出具体建议。但是在您的情况下，您似乎可以让“更新函数”取而代之的是参数，这意味着它可以是完全静态的。或者，如果您确实使用了依赖于 x,y 的 useCallback，那么它会在这些更改时重新生成，但是当这些更改时您可能需要运行很多逻辑，所以这可能是意料之中的。

---

总结：

我建议您认真对待eslint-plugin-react-hooks 的警告，并清理您的代码，直到它通过为止。长期以来，在大型复杂的应用程序中，它确实有助于保持清洁。

在做非标准的事情时会出现非常罕见的例外情况，但在忽略这些警告之前尽你最大的努力是值得的。