用于调整窗口大小的自定义挂钩

Question

我正在创建一个自定义挂钩来捕获浏览器窗口大小，以便让我知道它是否是移动的。目前，我的问题是 React 告诉我它无法在 useEffect 挂钩中保留 screenSize 的变量值。我该如何解决这个问题？

export default function useIsMobile() {
    let screenSize = 0;
    useEffect(() => {
        window.addEventListener("resize", () => {
            screenSize = window.innerWidth;
        });
        return () => {
            window.removeEventListener("resize", () => {
                screenSize = window.innerWidth;
            })
        }
    }, [screenSize]);
    
    return screenSize <= 768;
}

Answer 1

您可以使用useRef挂钩在组件级别创建变量，然后使用该.current属性来更新其值。

export default function useIsMobile() {
    const screenSize = useRef();

    useEffect(() => {
        window.addEventListener("resize", () => {
            screenSize.current = window.innerWidth;
        });
        return () => {
            window.removeEventListener("resize", () => {
                screenSize.current = window.innerWidth;
            })
        }
    }, []);
    
    return screenSize.current <= 768;
}

请注意，我还从挂钩中删除了依赖项，useEffect因为不需要它。因为它是引用而不是状态，所以每次都将使用相同的变量，这意味着您不需要重新注册侦听器。

更新

useRef 的工作方式不会触发重新渲染，这就是为什么需要使用钩子useState。每次模式更改时，此代码片段都会导致重新渲染。

const getIsMobile = () => window.innerWidth <= 768;

export default function useIsMobile() {
    const [isMobile, setIsMobile] = useState(getIsMobile());

    useEffect(() => {
        const onResize = () => {
            setIsMobile(getIsMobile());
        }

        window.addEventListener("resize", onResize);
    
        return () => {
            window.removeEventListener("resize", onResize);
        }
    }, []);
    
    return isMobile;
}

请注意，我移到getIsMobile了组件之外，因为它不包含任何与之相关的逻辑，而且还可以在钩子的默认值上调用它，useState以在钩子首次加载时保存重新渲染。