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

我正在创建一个定制的钩子来捕获浏览器窗口的大小，让我知道它是否是移动的。目前，我的问题是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;
}

导出默认函数useIsMobile（）{
设屏幕大小=0；
useffect（（）=>{
window.addEventListener（“调整大小”，（）=>{
screenSize=window.innerWidth；
});
return（）=>{
window.removeEventListener（“调整大小”，（）=>{
screenSize=window.innerWidth；
})
}
}，[屏幕大小]；
return screenSize您可以使用
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;
}

请注意，我将
getIsMobile
移到了组件外部，因为它不包含任何与之相关的逻辑，因此可以在
useState
钩子的默认值上调用它，以便在钩子首次加载时保存重新渲染的权限。
您可以使用
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;
}

请注意，我将
getIsMobile
移到了组件外部，因为它不包含任何与之相关的逻辑，因此可以在
useState
钩子的默认值上调用它，以便在钩子首次加载时保存重新渲染的权限。
使用
useRef
hook:
const screenSizeRef=useRef（0）
。将
screenSize
声明为
useIsMobile
钩子中的局部变量将在每次调用此钩子时重置变量；使用
useRef
hook将在组件的不同呈现中保留值。使用
useRef
hook:
const screenSizeRef=useRef（0）
。将
screenSize
声明为
useIsMobile
hook中的局部变量将在每次调用此hook时重置变量；使用
useRef
hook将在组件的不同呈现中保留值。我在这里看到的唯一问题是，当屏幕调整大小时，我没有得到返回值。我只在页面的初始加载时得到返回。返回语句永远不会被命中。没错，在这种情况下，我将使用
useState
钩子而不是
useRef
钩子，因为您确实希望触发重新呈现。但是，我只会在状态更改时更新它，这样它就不会每次wid重新呈现整个应用程序th change，但仅当模式更改时。我将为您编辑我的答案：DPerfect。我对React的自定义挂钩部分有点陌生，因此这是一个巨大的知识增长。谢谢！没问题！祝你好运，React有很多东西需要学习。我在这里看到的唯一问题是，当屏幕调整大小时，我没有得到返回值。我只在页面的初始加载时得到返回。返回语句永远不会被命中。没错，在这种情况下，我将使用
useState
钩子而不是
useRef
钩子，因为您确实希望触发重新呈现。但是，我只会在状态更改时更新它，这样它就不会每次wid重新呈现整个应用程序th更改，但仅当模式更改时。我将为您编辑我的答案：DPerfect。我对React的自定义钩子部分有点陌生，因此这是一个巨大的知识增长。谢谢！没问题！祝您好运，React有很多东西需要学习。