Eslint 反应钩子/详尽的 derps 递归答案

【问题标题】：Eslint react-hooks/exhaustive derps recursionEslint 反应钩子/详尽的 derps 递归
【发布时间】：2020-06-15 07:06:55
【问题描述】：

我需要一些帮助来了解 eslint react-hooks/exhaustive derps。我只希望在listenToMe 发生更改时运行效果，但react-hooks/exhaustive derps 正在对我大喊要添加history。这会导致递归。在这条规则之前，useEffect 对我来说是 React 黄金。

ESLint：React Hook useEffect 缺少依赖项：'history'。要么包含它们，要么删除依赖数组。(react-hooks/exhaustive-deps)

谁能帮我理解：

为什么在 useEffect 中只监听您关心的更改是不好的做法？
什么是只监听状态变化的特定变化的“正确”方式？

  useEffect(() => {
    if (listenToMe) {
        const search = new URLSearchParams(location.search);
        search.delete('q')
        history.replace({ ...location, search: search.toString() });
      }
    }
  }, [listenToMe]);

我已经阅读了github并做出了反应，但我没有阅读任何点击的内容。

https://github.com/facebook/create-react-app/issues/6880
https://reactjs.org/docs/hooks-rules.html
还有很多...

【问题讨论】：

React 的解释reactjs.org/docs/…

标签： reactjs react-hooks eslint

【解决方案1】：

来自文档

只有在依赖列表中没有任何内容（或由它调用的函数）引用道具、状态或从它们派生的值时，从依赖列表中省略函数才是安全的。

当您使用传递的道具时会出现问题，或者在您的情况下，历史道具来自 HOC 或来自 react-router 的钩子。

首先，它作为道具传递，道具本身可以改变。

其次，您正在调用一个 history.push 函数。 linter 不知道 push 将始终是 history 类的同一个函数，并且该函数本身不会使用任何状态或 props。

根据 facebook，“正确”的方法是将函数移动到效果中，但如果您只是重用某个文件中的代码或使用诸如 history.push 之类的函数，那么这是没有意义的。所以我认为在你的情况下，解决方案是将它包装在一个 useCallback 中，并在它自己的依赖数组中记录历史。根据开发人员的说法，这是最后的手段。

本质上，useCallback 将简单地返回一个记忆值，而不是实际访问该值，并且每当它的依赖关系中的值发生变化时，都会有一个带有新记忆值的新回调。

History.push 当然总是有相同的身份，所以这有点反模式。

就我个人而言，我在传递这样的值时从来没有遇到过任何问题。所以我认为当你只处理在别处声明的函数（或任何完全稳定的变量）时编写 useCallback 是没有意义的，我认为跳过 linting 该行是合理的。

正如其他人指出的那样，我保持启用该规则，因为它可以让您对写作效果保持警惕。

【讨论】：

感谢您的解释。这很有帮助！
@boy 问题是关于 useEffect，而不是 useCallback。我认为只听 useEffect 中变量变化的子集是完全可以的（如果这是你的意图）。

【解决方案2】：

这个 eslint 规则只是在大多数情况下有用的提示，但在某些情况下你必须忽略它。

React.useEffect(()=> {

  // I have some code with dependencies here but I only want to run it on mount

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

【讨论】：

感谢重播。我只是想弄清楚为什么这是一条规则。 VS Code 和 IntelliJ 通过自动添加依赖项来自动“修复”此错误。造成的伤害比好的 IMO 更大。添加 /* eslint-disable react-hooks/exhaustive-deps */ 到页面可以防止这种情况，但我觉得添加验证跳过哈！我宁愿理解而不是无知地忽略规则。
我宁愿将规则添加到每个 useEffect 中，也不愿全局禁用它，因为该规则对于防止错误仍然有用。一开始我也很困惑，因为违反 linting 规则似乎是一种不好的做法，但 imo 这个有时需要被覆盖。

【解决方案3】：

React 禁用了自动修复程序 https://github.com/facebook/react/issues/15204

我安装了新的devDependancies（eslint@latest 和eslint-plugin-react-hooks）

npm install eslint@latest eslint-plugin-react-hooks@latest --save-dev

我在 IntelliJ IDEA 2020.1（EAP Build #IU-201.5985.32）中进行了测试，它显示警告，但ESLint Fix 不会自动添加依赖项到@ 987654329@

IntelliJ 中的 ESLint 警告

ESLint：React Hook useEffect 缺少依赖项：'dispatch'。要么包含它，要么删除依赖数组。如果 'dispatch' 更改过于频繁，请找到定义它的父组件并将该定义包装在 useCallback 中。（react-hooks/exhaustive-deps）

VS Code 在预发布版2.1.0-next.1 中有“修复”，但我还没有测试过。

https://github.com/microsoft/vscode-eslint/pull/814#issuecomment-587020489 https://github.com/microsoft/vscode-eslint/releases/tag/release%2F2.1.0-next.1

这并不能回答问题，但对遇到 react-hooks/exhaustive-deps 自动“修复”问题的任何人都有帮助。

【讨论】：