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

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

回答：
可以使用 useState 和 useEffect 创建一个自定义 Hook，例如 useWindowSize，内部监听 window 的 resize 事件，并在组件卸载时移除监听器。

代码示例：

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>;
}

解析：

• 使用 useState 存储当前窗口尺寸。
• useEffect 在组件挂载时添加 resize 事件监听器，并在卸载时清理，防止内存泄漏。
• 初始值判断 window 是否存在，以兼容 SSR（如 Next.js）环境。
• handleResize 函数更新状态，触发组件重新渲染。
• 返回的窗口尺寸可被多个组件复用，体现了自定义 Hook 的封装性和复用性。