自定义hooks，监听游览器窗口尺寸

自定义hooks，监听游览器窗口尺寸

1-使用useState()钩子初始化将保存窗口尺寸的状态变量。使用两个值进行初始化undefined以避免服务器和客户端渲染之间的不匹配。

2-创建一个使用Window.innerWidth和Window.innerHeight更新状态变量的函数。

3-使用useEffect()钩子为挂载事件设置适当的侦听器，'resize'并在卸载时清理它。

    const useWindowSize = () => {
            const [windowSize, setWindowSize] = React.useState({
                width: undefined,
                height: undefined,
            });

            React.useEffect(() => {
                const handleResize = () =>
                setWindowSize({ width: window.innerWidth, height: window.innerHeight });

                window.addEventListener('resize', handleResize);

                handleResize();

                return () => {
                    window.removeEventListener('resize', handleResize);
                };
            }, []);

            return windowSize;
        };

使用案列：

      const MyApp = () => {
        const { width, height } = useWindowSize();
            return (
                <p>
                Window size: ({width} x {height})
                </p>
            );
       };

        ReactDOM.render(<MyApp />, document.getElementById('root'));