为什么 React Linter 抱怨没有将 const 变量添加到依赖项数组中？

Question

如果我们有一个这样获取用户数据的函数：

const fetchUserData = () => {
  /* code here */
}

然后我们有一个带有空数组的 useEffect，因此它会在组件渲染后运行一次：

useEffect(() => {
  fetchUserData();
}, []);

然后 eslint/tslint 抛出此警告： React Hook useEffect has a missing dependency: 'fetchUserData'. Either include it or remove the dependency array. 我知道如果说我们的函数变量是 let 或 var 这是一个很好的做法，但是如果 fetchUserData 变量是用 const 关键字声明的，它会如何变化。

这是 linter 上的错误，我们应该忽略它还是我遗漏了什么？

Answer 1

引用函数的“变量”¹ 是 let、var 还是 const 是无关紧要的。请记住，每次需要渲染您的组件时，都会再次调用您的组件函数，这将创建一个全新的执行上下文，它具有自己的 const（或 let 或 var）“变量”分配给它的 new fetchUserData 函数。 useEffect 只会调用已创建的 first 之一（因为您有一个 [] 依赖项数组）。对于这种特定情况，它可能是无害的，但在一般情况下，您运行有关闭陈旧数据的风险，因此会出现 linter 警告。

如果您不在 fetchUserData 中使用任何状态或道具，您可以将其重新定位在 useEffect 回调中，这样既可以消除错误又可以避免在每次渲染时重新创建函数你不会使用的。（如果你确实在 fetchUserData 中使用了 state 或 props，它可能不应该只在安装组件时被调用一次，而是每次 state/props 它使用的变化。）

¹ 更一般地，binding（将名称绑定到存储槽，存储槽包含函数调用执行上下文的词法环境对象中的值）。

为什么 React Linter 抱怨没有将 const 变量添加到依赖项数组中？

Why does React Linter complain about a const variable not being added to the dependency array?

javascript

reactjs

typescript

react-hooks

eslint