reactjs - React hooks 使用 eslint-plugin-react-hooks@next 附加不需要的值

Question

我的组件中有一个 useEffect Hook ，它调用 Redux 操作来获取一些数据。

useEffect(
 () => {
   props.getClientSummaryAction();
  },[]
);

当我去保存文件时，linter 会执行此操作。

useEffect(
  () => {
    props.getClientSummaryAction();
 }, [props] 
);

这显然会让我的组件进入无限循环，因为 getClientSummaryAction 会获取一些更新 Prop 的数据。

我已经使用了像这样的解构，并且 linter 更新了数组。

  const { getClientSummaryAction } = props;

  useEffect(
    () => {
      getClientSummaryAction();
    },
    [getClientSummaryAction]
  );

我对此很满意，但它实际上没有意义，因为 getClientSummaryAction 显然永远不会更新，它是一个函数。

我只是想知道 linter 为什么这样做以及这是否是最佳实践。

Answer 1

这并不是不需要的。您知道依赖关系不会改变这一事实，但 React 可能知道这一点。规则非常清楚:

Either pass an array containing all dependencies or don't pass anything to the second argument and let React keep track of changes.

将第二个参数传递给useEffect是告诉React你负责hook的调用。因此，当您不传递效果中包含的依赖项时，eslint 会将其视为可能的内存泄漏，并会向您发出警告。 DO NOT disable the rule只需像您已经在做的那样继续传递依赖关系即可。可能会感觉多余，但这是最好的。