正确/错误地忽略一些 React useEffect 依赖警告？

Question

这是我编写的一些可以正常工作的示例代码：

useEffect(() => {
  if (!rolesIsLoading && rolesStatus === 200) {
    customer.roles = rolesData.roles;
  }
}, [rolesIsLoading, rolesStatus]);

我在控制台中收到此警告：

React Hook useEffect 缺少依赖项：“customer.roles”和“rolesData.roles”。要么包含它们，要么删除依赖数组 react-hooks/exhaustive-deps

问题是，代码现在可以正常工作，并且在某些情况下，当我按照指示添加此类依赖项时，最终会出现无限循环或其他问题。

如果您遇到类似情况，请就如何解决此问题提出任何建议。

Answer 1

来自 React DOCS：

有条件地触发效果

效果的默认行为是在每次完成渲染后触发效果。这样，如果其中一个依赖项发生变化，总是会重新创建效果。

但是，在某些情况下，这可能有点矫枉过正，例如上一节中的订阅示例。我们不需要在每次更新时都创建一个新订阅，只要源 props 发生了变化。

要实现这一点，请将第二个参数传递给 useEffect，它是效果所依赖的值数组。我们更新后的示例现在如下所示：

useEffect(
 () => {
   const subscription = props.source.subscribe();
   return () => {
     subscription.unsubscribe();
   };
 },
 [props.source],
);

所以，从上面的练习中我们看到，依赖数组的作用是有条件地触发一个效果。

您收到的警告是因为您在效果函数中使用了一些外部（从效果的角度来看）变量，而这些变量在依赖数组中没有提及。

React 担心您可能会在将来的渲染中为这些变量获取新值，并且由于您的效果使用它们，React “默认意图”是使用新变量值重新运行该效果。所以你的效果永远是最新的。

因此，如果/当这些变量在未来发生变化时，您需要考虑是否要重新运行效果。

基本建议：

• 将它们添加到依赖数组中
• 如果它们永远不变，就没有区别
• 如果它们发生变化，请在效果中添加一些条件，以决定是否应该根据新变量值做某事
• 如果它们仅在引用方面发生变化，而不是在值方面（如函数、数组、对象等），您可以使用 useCallback 或 useRef 挂钩来保留这些变量的“引用”首次渲染，而不是在每次渲染时都获得新的引用。