我们可以将变量添加为不属于 useEffect 的依赖项吗？

Posted 2023-04-14

【中文标题】我们可以将变量添加为不属于 useEffect 的依赖项吗？

【英文标题】：Can we add variable as a dependencies which is not part of useEffect?

【发布时间】：2021-09-07 14:48:11

【问题描述】：

useEffect(()=>
    history.push("/home")
  ,[token, history])

即这里令牌不是useEffect 的一部分，但我想将其添加为useEffect 的依赖项。 我可以这样做吗？如果不是那为什么？

【问题讨论】：

是的，你可以。对这些变量的任何更改都会触发 useEffect 的更改。它们不必在 useEffect 中。

当然，您可以将任何您喜欢的依赖项添加到 React 挂钩。你试过了吗？是不是有些事情没有按您的预期工作？

这就是 useEffect 中依赖数组的重点...

@DrewReese 它工作正常，但我认为我们应该只添加应该是 useEffect 一部分的变量。

不。数组中任何改变的依赖都会触发 useEffect 的重新渲染。这就是它的全部工作，真的。

【参考方案1】：

useEffect(()=>
  history.push("/home");
, [token, history]);

i.e Here token 不是 useEffect 的一部分，但我想将其添加为 useEffect 的依赖项。我可以这样做吗？如果不是那为什么？

是的，您可以包含或省略任何依赖项，或省略整个依赖项数组。

它工作正常，但我认为我们应该只添加应该 成为 useEffect 的一部分。

查看官方文档Rules of Hooks 和Conditionally firing an effect，并注意没有规定或要求依赖项只能是挂钩回调中引用的值。

在每次渲染后通过不包含依赖数组来触发效果。

useEffect(() => console.log('every render'));

通过包含一个空的依赖数组来触发仅在挂载时的效果。

useEffect(() => console.log('on component mount only'), []);

有条件地通过在您希望效果回调在更新后运行的依赖数组中包含值来触发效果。

useEffect(() => 
  console.log('any time a, b, or c update'); // or d or e
, [a, b, c, d, e]);

React 建议您使用 ESLint Plugin (eslint-plugin-react-hooks) 来帮助执行 Hooks 规则并提出依赖建议。请注意，尽管这些只是固执己见的建议，并且当包含 more 依赖项时，或者没有依赖项（例如安装效果）时，此插件会警告您。另请注意，这只是一个警告，而不是错误（常见的误解）。

【参考方案2】：

是的，你绝对可以。对该变量的任何更改都会触发 useEffect。

【讨论】：

但是我的useEffect里面没有使用token

【参考方案3】：

我建议遵循 React 文档给出的指南，并正确提供依赖数组。

或许您可以执行以下操作：

useEffect(()=>
  if (token) 
    history.push("/home")
  
,[token, history])

获取提示的一种简单方法是使用 React 提供的 eslint-plugin-react-hooks 官方 eslint 插件，请参阅 documentation here。

还请注意，通常，如果您使用一些导入的东西，比如在您的示例中可能是 history，这不会改变，因此没有必要将其添加到依赖项数组中。