javascript - 不将所有依赖项包含在 useEffect 依赖项数组中是不是一种反模式？

Question

我正在尝试了解 React Hooks API。具体来说，我正在尝试构建曾经如下的经典用例:

componentDidUpdate(prevProps) {
    if (prevProps.foo !== this.props.foo) {
        // Animate DOM elements here...
        this.animateSomething(this.ref, this.props.onAnimationComplete);
    }
}

现在，我尝试使用功能组件和 useEffect 构建相同的内容，但不知道如何做到这一点。这是我尝试过的:

useEffect(() => {
    animateSomething(ref, props.onAnimationComplete);
}, [props.foo]);

这样，只有当 props.foo 发生变化时才会调用效果。这确实有效——但是!这似乎是一种反模式，因为 eslint-plugin-react-hooks 规则对此发出了警告。效果内使用的所有依赖项都应在依赖项数组中声明。所以这意味着我必须执行以下操作:

useEffect(() => {
    animateSomething(ref, props.onAnimationComplete);
}, [props.foo, ref, props.onAnimationComplete]);

这不会导致 linting 错误，但它完全违背了仅在 props.foo 更改时调用效果的目的。我不希望当其他 props 或 ref 改变时调用它。

现在，我读到了一些关于使用 useCallback 来包装它的内容。我尝试过，但没有进一步。

Answer 1

我建议按如下方式编写:

const previousFooRef = useRef(props.foo);

useEffect(() => {
    if (previousFooRef.current !== props.foo) {
       animateSomething(ref, props.onAnimationComplete);
       previousFooRef.current = props.foo;
    }
}, [props.foo, props.onAnimationComplete]);

您无法避免在效果中设置条件的复杂性，因为如果没有它，您将在安装时运行动画，而不是仅在 props.foo 更改时运行。该条件还允许您在 props.foo 以外的其他内容发生变化时避免动画。

通过在依赖项数组中包含 props.onAnimationComplete，您可以避免禁用 lint 规则，这有助于确保您不会引入与缺少依赖项相关的 future 错误。

这是一个工作示例: