应该将refs列为useEffect等的依赖项吗？

Question

据我了解，useRef返回的容器始终是相同的-但在useEffect和类似函数中引用它们会导致eslint详尽-deps警告。在这种情况下，忽略警告是否安全？有什么好的方法来避免同时用警告阻塞输出日志和避免使用禁用行注释的代码？还是我应该将它们放入依赖项列表以使eslint满意？

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