如何在 React 中实现一个自定义 Hook 来监听窗口尺寸变化并返回当前宽度和高度？

如何在 React 中实现一个自定义 Hook 来监听窗口尺寸变化并返回当前宽度和高度？

回答：

你可以使用 useState 和 useEffect 创建一个自定义 Hook，例如 useWindowResize，通过监听 window 的 resize 事件来实时更新窗口尺寸：

import { useState, useEffect } from 'react';

function useWindowResize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

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

  return size;
}

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

解析：

• useState 初始化窗口尺寸为当前 innerWidth/innerHeight。
• useEffect 在组件挂载时添加 resize 事件监听器，在组件卸载时清除监听器，避免内存泄漏。
• 该 Hook 封装了通用逻辑，可复用于多个组件，提高代码复用性与可维护性。
• 注意 resize 事件可能频繁触发，若需优化性能，可在 handleResize 中加入防抖（debounce）处理。