37.useWindowSize

在响应式 Web 应用开发中，实时监测浏览器窗口尺寸是一个常见需求，对于实现响应式设计和优化用户界面至关重要。useWindowSize 钩子提供了一种简单而有效的方式来在 React 组件中监测和响应窗口尺寸的变化。这个自定义钩子不仅封装了窗口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.createRoot(document.getElementById('root')).render(
  <MyApp />
);

这个钩子的关键点包括：

1. 使用 useState 来存储窗口尺寸，初始值设为 undefined 以避免服务器端渲染不匹配。

2. 创建一个 handleResize 函数来更新窗口尺寸状态。

3. 使用 useEffect 来添加 'resize' 事件监听器，并在组件卸载时清理。

4. 立即调用 handleResize 以设置初始尺寸。