如何在 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(() => {
    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>窗口尺寸: {width} x {height}</div>;
}

解析：

• 该 Hook 利用 useState 保存窗口尺寸状态。
• useEffect 在组件首次渲染后执行，添加 window 的 resize 事件监听器。
• 为避免内存泄漏，必须在 useEffect 的返回函数中移除监听器。
• 初始调用 handleResize 确保组件初次渲染就能获取到当前窗口尺寸，而非 undefined。
• 空依赖数组（[]）确保监听器只绑定一次，符合性能最佳实践。
• 此 Hook 是响应式且可复用的，适用于需要根据窗口大小动态调整 UI 的场景（如响应式布局、图表尺寸调整等）。