reactjs - 详尽的 deps 规则无法将自定义钩子(Hook)的结果识别为 React 引用

Question

想象一个钩子(Hook):

export function useMounted() {
    const mounted = React.useRef<boolean>(false);
    React.useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
        };
    }, []);
    return mounted;
}

我想用那个钩子(Hook)来确定组件是否仍然安装。它的一个用例是仅在浏览器获取并缓存图像时异步加载图像和显示图像。这种用例的简化版本可以是:

function useLazyImage(src: string, triggerCallback: any) {
    const mounted = useMounted();
    const image = useRef<HTMLImageElement>();

    useEffect(() => {
        if (!!src) {
            image.current = new Image();
            image.current.onload = () => {
                if (mounted.current)
                    triggerCallback();
            };
            image.current.src = src;
            return () => {
                image.current = undefined;
            };
        }
        return undefined;
    }, [src]);
}

它不包括错误处理，也不处理 triggerCallback 的更改，但它显示了我的问题。 react-hooks/exhaustive-deps 警告我丢失 mounted依赖，即使它不应该afaik。自 mounted是 Ref，通过使用它，我不会意外地关闭过时的范围，事实上 eslint 知道这一点。如果我将代码更改为

function useLazyImage(src: string, triggerCallback: any) {
    const mounted = React.useRef<boolean>(false);
    React.useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
        };
    }, []);
    const image = useRef<HTMLImageElement>();

eslint 不再警告我了。 ESLint 的这个限制是它不知道我的自定义钩子(Hook)的结果是什么，还是我做错了并且有一个错误潜伏？

Answer 1

在您的第一个示例中，您将返回来自 useMounted 的引用。创建它的函数。所以引用被泄露，因此可能会被更改。在您的底部示例中，引用是作为函数本地值创建的，因此不是组件状态的一部分。这就是为什么您没有看到底部示例中的警告。