是否应该将 refs 列为 useEffect 等的依赖项？答案

【问题标题】：Should refs be in listed as dependencies for useEffect and such?是否应该将 refs 列为 useEffect 等的依赖项？
【发布时间】：2020-11-30 09:46:24
【问题描述】：

据我了解，useRef 返回的容器总是相同的——但在 useEffect 和类似函数中引用它们会导致 eslint 详尽的deps 警告。在这种情况下忽略警告是否安全，以及避免用警告阻塞输出日志和禁用行 cmets 的代码的好方法是什么？还是我应该将它们添加到依赖列表中以保持 eslint 满意？

【问题讨论】：

标签： javascript reactjs react-hooks eslint

【解决方案1】：

当首次调用useRef 时，它会创建一个具有current 属性的对象。该对象将在后续渲染中保持不变。即：对该对象的引用不会改变。

https://reactjs.org/docs/hooks-reference.html#useref

所以从依赖数组中省略它是安全的。

请参阅下面的代码（也可在沙盒链接中找到）：

https://codesandbox.io/s/cocky-dhawan-ys267?file=/src/App.js

const someRef = useRef({foo: "bar"});
let x = 1;

useEffect(() => {
  console.log(someRef.current.foo);
  console.log(x);
}, []);              // THERE IS A WARNING HERE FOR THE "x"

eslint/exhaustive-deps 只担心x，而不是someRef.current.foo。

注意：我刚刚将x 放在那里以确保警告是由 eslint 触发的。

这背后的原因是useRef 与渲染周期无关。我的意思是，它不会重新创建，也不会在每次渲染后自动更新，例如在渲染期间创建的状态、道具或变量。

您确定收到useRef 的警告吗？查看 CodeSandbox 链接并仔细检查。检查您如何将它们引用到 useEffect 并检查您的 React 和 Eslint/plugin 版本。

【讨论】：