useWindowSize

跟踪视窗大小的 React Hook。

useWindowSize 响应式地跟踪浏览器窗口的 innerWidth 和 innerHeight。它返回一个包含 width 和 height 属性的对象，在窗口调整大小时自动更新。这对于任何依赖视口尺寸的组件逻辑非常有用。

使用场景

• 构建需要基于视口大小调整逻辑（不仅是 CSS）的响应式布局
• 动态计算在网格或虚拟列表中渲染多少项目
• 调整 canvas、图表或地图尺寸以填满可用视口

注意事项

• SSR 安全：在服务端渲染期间返回 { width: 0, height: 0 }，因为 window 不可用。
• 性能：监听窗口 resize 事件。观察器在卸载时自动清理。
• 参见 useElementSize 了解跟踪特定元素的大小，以及 useElementBounding 了解包括位置在内的完整边界框数据。

Usage

function Demo() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>
        宽度: {width}, 高度: {height}
      </p>
    </div>
  );
};

API

useWindowSize

Returns

{ readonly width: number; readonly height: number; }: 包含以下元素的对象：

• width：当前视窗宽度。
• height： 当前视窗高度。

Arguments