React hooks linting：它总是有意义吗？答案

【问题标题】：React hooks linting : Does it always make sense?React hooks linting：它总是有意义吗？
【发布时间】：2019-10-05 17:59:01
【问题描述】：

你可能知道，create-react-app 3 带有一个新的 eslint 规则：react-hooks/exhaustive-deps。当挂钩的依赖数组中缺少依赖时，会显示警告。但这似乎并不总是有意义的。

一些依赖可能是“静默”或“弱”的依赖。

在代码中，我有以下情况：

const Project = ({ id, '*': tab }) => {
  const [{ openProjects }, { openProject, setProjectTab }] = useStore()

  useLayoutEffect(() => {
    if(find(openProjects, { id }))
      setProjectTab(id, tab)
    else openProject(id, tab)
  }, [tab])

  return (...)
}

这给了我：

第 98 行：React Hook useLayoutEffect 缺少依赖项： 'id'、'openProject'、'openProjects' 和 'setProjectTab'。包括它们或删除依赖数组 react-hooks/exhaustive-deps

openProject 和 setProjectTab 是常量函数，它们总是指向相同的引用，所以我可以将它们包含在数组中以缩短警告。没问题。

但openProjects 是来自我的全局状态的数组，其处理方式与 redux 类似：每次有更新时，都会创建一个新数组。

但是，该更新恰好作为效果发生，如果我将其添加为依赖项，则会创建无限更新循环。

所以：

遵守 linter 规则：无限循环。
不遵守 linter 规则：烦人的警告。

我的设计有问题还是exhaustive-deps 真的太严格了，应该考虑弱依赖的概念（即。不要触发对更改的影响) ?

【问题讨论】：

标签： reactjs eslint react-hooks

【解决方案1】：

如果某些效果取决于某些计算的结果，例如find(openProjects, { id })，但不是基于该计算的参数，那么可以使其显式仅取决于该计算的结果，例如通过提取变量：

const isFound = find(openProjects, { id })

useLayoutEffect(() => {
  if(isFound)
    setProjectTab(id, tab)
  else openProject(id, tab)
}, [isFound, setProjectTab, openProject, id, tab])

我建议保持启用 eslint 规则，并更加努力地考虑可能影响代码执行结果的所有依赖项的最小集。

【讨论】：

【解决方案2】：

我遇到了同样的问题。当我使用钩子时，我只包含依赖数组中改变的变量，我不包含我知道不会改变的常量或数据。

您可以使用 // eslint-disable-next-line react-hooks / exhaustive-deps 禁用下一行的 linting。

【讨论】：