我是一名经验丰富的程序员(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) 是否需要额外记忆? (但我也听说过度记忆会降低性能)。
functionA
和
functionB
(如果它们发生更改或重新渲染),然后将它们添加到依赖项数组中。这样,您的回调就会保持稳定并按预期运行,而不会过度记忆。