---
title: "useWindowSize 用法与示例"
description: "跟踪视窗大小的 React Hook。"
canonical: https://reactuse.com/zh-Hans/element/usewindowsize/
---

# useWindowSize

跟踪视窗大小的 React Hook。

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

### 使用场景

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

### 注意事项

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

## Usage

```tsx live

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

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

```

%%API%%