如何在 React 中实现一个自定义 Hook 来监听窗口大小变化？

如何在 React 中实现一个自定义 Hook 来监听窗口大小变化？

回答与解析：

可以使用 useState 和 useEffect 创建一个自定义 Hook，例如 useWindowSize，来监听窗口的 resize 事件并实时更新窗口尺寸。

示例代码如下：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 处理 resize 事件的回调函数
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    // 组件挂载时立即获取一次尺寸
    handleResize();

    // 添加事件监听器
    window.addEventListener('resize', handleResize);

    // 清理函数：组件卸载时移除监听器
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 依赖数组为空，仅在挂载和卸载时执行

  return windowSize;
}

// 使用示例
function MyComponent() {
  const { width, height } = useWindowSize();
  return <div>Window size: {width} x {height}</div>;
}

解析：

• 自定义 Hook 封装了与窗口尺寸相关的逻辑，便于复用。
• 使用 useEffect 在组件挂载时添加事件监听，并在卸载时清理，防止内存泄漏。
• 初始状态设为 undefined 是为了避免服务端渲染（SSR）时 window 对象不存在导致的错误。
• 此 Hook 可用于响应式布局、动态调整组件尺寸等场景。