Question

我有一个看起来像这样的组件：

const MyComponent = props => {
  const { checked, onChange, id } = props;
  const [isChecked, setChecked] = useState(false);

  useEffect(() => {
    onChange && onChange({ isChecked: !!checked, id });
    setChecked(checked);
  }, [checked]);

  const childProps = {
    id,
    isChecked
  };

  return <ChildComponent {...childProps} />;
};

详尽无遗的棉绒规则不令人满意：

React Hook useEffect缺少依赖项：id和onChange。包括它们或删除依赖项数组。（react-hooks / exhaustive-deps）eslint

我知道id和onChange不会改变，因此似乎没有必要将它们添加到依赖项数组中。但这不是警告，而是做某事的明确指示。

是ESLint规则吗？

1）在这种情况下，过于谨慎和愚蠢，可以放心忽略吗？

2）重点介绍最佳做法-例如，如果父组件的更改意味着id 将来会在某个时候更改，则尽量减少将来可能发生的意外错误？

3）显示当前的代码实际/可能的问题吗？

Answer 1

实际上，规则非常简单：要么传递包含所有依赖项的数组，要么不传递任何东西。因此，我猜规则不是很愚蠢，只是不知道依赖项是否会改变。所以是的，如果您要传递一个依赖项数组，它应该包含所有依赖项，包括那些您知道不会改变的依赖项。这样的事情会引发警告：

useEffect(() => dispatch({someAction}), [])

要解决此问题，即使它永远不会改变，也应该将dispatch作为依赖项传递：

useEffect(() => dispatch({someAction}), [dispatch])

请勿禁用详尽的deps规则，如here

所述

Answer 2

查看它的方式是每个渲染都有自己的效果。如果在一组特定的值上效果相同，那么我们可以将依赖数组中的这些值告诉React。理想情况下，具有相同状态和道具的组件在完成其渲染和效果后将始终具有相同的输出（渲染的组件+效果）。这就是使它更能抵抗错误的原因。

该规则的要点是，如果deps确实发生变化，则该效果应该再次运行，因为它现在是另一种效果。

这3个链接也为您提供了更多见解：

useEffect依赖关系数组和ESLint详尽穷举规则

2 个答案: