React 钩子的依赖项是什么？

Question

查看文档，本节[编辑链接]底部有一个注释，这使得钩子依赖项列表中似乎只应使用 props 或 state。但是，当列表中使用 props 或 state 上的“复杂表达式”时，eslint 插件会给出以下内容：

React Hook useEffect 在依赖数组中有一个复杂的表达式。将其提取到一个单独的变量中，以便对其进行静态检查。eslint(react-hooks/exhaustive-deps)

这让我思考什么可以用作依赖项。我们可以使用从 props 计算的局部变量吗？在这种情况下，我们是否需要创建某种新的状态变量或引用？我不确定钩子是在组件内就地执行（所以局部变量可用）还是从渲染的上下文中提升（所以我们必须只使用状态、道具或其他钩子值，如 refs/memos ）。

一个组件有一个道具，数据，也就是一个对象。

data: {
  name: 'name',
  id: 2
}

1）看起来data.name可以在依赖项中使用。但是我们可以使用设置为属性的局部变量吗？

data: {
  name: 'name',
  id: 2
}

2）我们是否能够使用由依赖数组中的道具计算的变量？

const { name } = data;

useEffect(fn, [name]);

这两种情况似乎都适用于小型测试。我对 Hooks 不够了解，不知道它是否违反了一些会使结果不确定的规则。

Answer 1

通过跳过效果来优化性能可能有助于理解钩子依赖性。

笔记

如果您使用此优化，请确保数组包含组件范围中随时间变化且由效果使用的所有值（例如 props 和 state）。否则，您的代码将引用先前渲染中的陈旧值。详细了解如何处理函数以及数组更改过于频繁时应采取的措施。

重要的一点是“...组件范围中的所有值...”，表示钩子中使用的组件范围内的任何值。

问：我们可以使用根据 props 计算得出的局部变量吗？

问：在这种情况下，我们是否需要创建某种新的状态变量或引用？

问：我不确定钩子是在组件内就地执行（因此局部变量可用）还是从渲染上下文中提升（因此我们必须仅使用状态、道具或其他钩子值，例如 refs /备忘录）