在 useEffect 等中，是否应将 refs 列为依赖项？

Question

据我理解，由useRef返回的容器始终相同 - 但在useEffect和类似函数中引用它们会导致eslint exhaustive-deps警告。在这种情况下是否可以安全地忽略该警告？有没有好的方法既避免将输出日志与禁用行注释一起混杂，又避免让我的代码过多依赖项列表，或者是否应将它们放入依赖项列表中以让eslint满意？

- riv

Answer 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版本。

- cbdeveloper