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

我正在尝试了解 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 错误，但它完全违背了目的only调用效果时props.foo变化。我不希望当其他道具或裁判发生变化时调用它。

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

我建议这样写：

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 规则，这有助于确保您不会引入与缺少依赖项相关的未来错误。

这是一个工作示例：