当 React hook 依赖于来自 hook 的函数时，我应该先记住它吗？

Question

我是一名经验丰富的程序员（10 年以上），但对 React 很陌生（< 2 years). I picked up React in a very "operational" way (i.e. being happy when things work without very deep understanding of its inner workings). Now I'm trying to correct that.

令我惊讶的一件事是它让你很容易做“错误”的事情。 ESLint 可能会警告您，但修复可能会完全误导您。这是我试图找出最佳实践的一种情况。

function MyComponent() {
  const [functionA, functionB] = useMyHooks();

  const shouldOnlyCallOnce = useCallback(() => {
    functionA();
    functionB();
  }
  []);
  ...
}

现在 ESLint 会抱怨 functionA 和 functionB 不在依赖项数组中，并建议我 (a) 将它们添加到依赖项数组中，或 (b) 删除依赖项数组。我认为这两个建议都是错误的，我不确定这里的最佳实践是什么。

我的想法是这样的：

(a) 如果我想进行防御性编码，我不应该对 functionA 和 functionB 何时重新定义进行任何假设。它们可能会在每次重新渲染时重新定义。因此，要走这条路，ESLint 还应该建议我先记住它们。

(b) 删除依赖数组会产生与我想要的相反的效果，即运行一次 shouldOnlyCallOnce 。

那么正确的模式是什么？ (a) 是否需要额外记忆？ （但我也听说过度记忆会降低性能）。

Answer 1

functionA

和

functionB

（如果它们发生更改或重新渲染），然后将它们添加到依赖项数组中。这样，您的回调就会保持稳定并按预期运行，而不会过度记忆。