如何在 React 中实现一个自定义 Hook 来监听窗口大小变化并实时更新组件状态？

如何在 React 中实现一个自定义 Hook 来监听窗口大小变化并实时更新组件状态？

回答与解析：

可以通过使用 useState 和 useEffect 创建一个自定义 Hook，例如 useWindowSize，来监听 window 的 resize 事件，并在窗口尺寸变化时更新状态。关键点包括：

1. 使用 useState 存储当前窗口的宽度和高度；
2. 使用 useEffect 添加和清理 resize 事件监听器；
3. 在事件回调中使用防抖（可选）以提升性能；
4. 返回一个包含 width 和 height 的对象供组件使用。

示例代码如下：

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: typeof window !== 'undefined' ? window.innerWidth : 0,
    height: typeof window !== 'undefined' ? window.innerHeight : 0,
  });

  useEffect(() => {
    if (typeof window === 'undefined') return;

    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);
    handleResize(); // 初始化尺寸

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

  return windowSize;
}

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

注意事项：

• 需要检查 window 是否存在，以避免 SSR（服务端渲染）时出错；
• 如果频繁触发 resize，建议加入防抖逻辑（如 lodash.debounce）以减少重渲染；
• 该 Hook 封装了逻辑复用，符合 React 自定义 Hook 的最佳实践。