React useWindowSize钩子

跟踪浏览器窗口的尺寸。

• 使用useState()钩子初始化一个状态变量，用于保存窗口的尺寸。将两个值都初始化为undefined，以避免服务器端和客户端渲染之间的不匹配。
• 创建一个函数，使用Window.innerWidth和Window.innerHeight来更新状态变量。
• 使用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();

```javascript
返回 (
    <p>
      窗口大小: ({width} x {height})
    </p>
  );
};

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