如何在反应中使用 window.innerWidth 上的 UseEffect 挂钩重新呈现页面

Question

I want to make some changes depending on the screen size

useEffect(() => {
        console.log("am called");

     if (window.innerWidth < 800) {
        document.getElementsByTagName("body")[0].style.display = "none";
     }
     if (window.innerWidth > 800) {
            document.getElementsByTagName("body")[0].style.display = "block";
        }

        
    }, [window.innerWidth]);

what is the problem with this code

Answer 1

You need to observe window size changing and put this value to state.

    const [width, setWidth] = useState(0)
    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth)
        window.addEventListener('resize', onResize);
        return () => {
            window.removeEventListener("resize", onResize)
        }
    }, [setWidth])

    //and then
    useEffect(() => {
        console.log("am called");

        if (width< 800) {
            document.getElementsByTagName("body")[0].style.display = "none";
        } else {
            document.getElementsByTagName("body")[0].style.display = "block";
        }


    }, [width]);

better solution

export default function useMatchMedia(condition) {
    const [isMatching, setIsMatching] = useState(false);

    useEffect(
        function updateMatchMedia() {
            if (!condition) return setIsMatching(true);

            const updateIsMatching = (event) => setIsMatching(event.matches);

            const matcher = window.matchMedia(condition);

            setIsMatching(matcher.matches);

            matcher.addEventListener('change', updateIsMatching);

            return () => {
                matcher.removeEventListener('change', updateIsMatching);
            };
        },
        [condition]
    );

    return [isMatching];
}

then you can use it

   isTablet = useMatchMedia(`(max-width: 800px)`);
   useEffect(() => {
     if(isTablet){
     } else {
     }
   }, [isTablet])