Linter 抱怨 React Native 钩子中的空依赖数组答案

【问题标题】：Linter complains about empty dependency array in React Native hooksLinter 抱怨 React Native 钩子中的空依赖数组
【发布时间】：2022-01-12 07:27:27
【问题描述】：

在 React Native useEffect 中，使用空的依赖数组是可以接受的（这通常是出于正当理由故意这样做的）。

In useEffect, what's the difference between providing no dependency array and an empty one?

然而 Linter 一直抱怨并建议要么添加某些参数作为依赖数组的元素，要么将其删除。删除依赖数组不是我的选择。我是否应该接受 Linter 建议并将一长串项目添加到依赖项数组中？或者有没有一种简单的方法可以更改 Linter 设置？

【问题讨论】：

标签： javascript react-native react-hooks linter

【解决方案1】：

AFAIK 没有配置 react-hooks/exhaustive-deps linting 规则，但您可以忽略特定行的 eslint 规则。

如果您真的希望效果在组件安装时只运行一次，那么使用空依赖数组是正确的。您可以禁用该行的 eslint 规则以忽略它。

useEffect(() => {
  ... business logic ...

  // NOTE: Run effect once on component mount, please
  // recheck dependencies if effect is updated.
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

注意：如果您稍后更新效果并且它需要在其他依赖项之后运行，那么这个禁用的注释可能会掩盖未来的错误，所以我建议留下一个相当 overt 评论覆盖已建立的 linting 规则的原因。

【讨论】：

【解决方案2】：

通常 linter 建议（添加依赖项）是最好的解决方案，因为通常当效果中使用的一些变量发生变化时，您会想要重新运行效果。请参阅https://typeofnan.dev/you-probably-shouldnt-ignore-react-hooks-exhaustive-deps-warnings/ 了解更多信息。也在这里讨论过：https://github.com/facebook/react/issues/14920

【讨论】：