Question

看一下文档，this section [编辑链接]的底部有一个注释，使得似乎在挂钩依赖项列表中仅应使用道具或状态。但是，当列表中使用道具或状态上的“复杂表达式”时，eslint插件将提供以下信息：

React Hook useEffect在依赖项数组中具有一个复杂的表达式。将其提取到一个单独的变量中，以便可以对其进行静态检查。埃斯林特（react-hooks / exhaustive-deps）

这让我考虑了允许用作依赖项的内容。我们可以使用从props计算的局部变量吗？在这种情况下，我们是否需要创建某种新的状态变量或ref？我不确定挂钩是否在组件内执行（因此可以使用局部变量）还是悬挂在渲染上下文之外（因此我们仅需使用状态，属性或其他挂钩值，例如refs / memos））。

一个组件具有一个道具，即数据，即一个对象。

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

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

const { name } = data;

useEffect(fn, [name]);

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

const isOdd = Boolean(data.id % 2);

useEffect(fn, [isOdd]);

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

Answer 1

注意

如果使用此优化，请确保数组包含所有值从组件范围（例如道具和状态）转变过来时间以及效果所用的时间。否则，您的代码将参考先前渲染中的陈旧值。进一步了解如何处理函数以及数组更改过于频繁时的操作。

重要位“ ...组件范围内的所有值...” ，表示在挂钩内使用的组件范围内的任何值。

问：我们可以使用根据道具计算的局部变量吗？

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

Q：我不确定是在组件内执行了钩子（这样就可以使用局部变量）还是在渲染的上下文中悬挂了钩子（因此我们仅需使用状态，道具或其他挂钩值（如参考/备忘录）