# @better-hooks/performance 中文文档

规范地址：https://npmcn.com/package/%40better-hooks/performance/

版本：2\.1\.0
npm 元数据更新时间：2025-06-21T16:25:40.411Z
中文译文更新时间：2026-11-08T00:04:38.396Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40better-hooks/performance
原文对照：https://npmcn.com/package/%40better-hooks/performance/?lang=original
项目主页：https://github.com/BetterTyped/react-performance-hooks#readme
源码仓库：https://github.com/BetterTyped/react-performance-hooks

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：21.2 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=8
- 运行依赖：1 个
- peer 依赖：react \>= 16\.8\.0
- 首次发布：2022-10-15T15:54:11.159Z
- 最新版本发布：2025-06-21T16:25:40.211Z
- 近 30 天下载量：21319（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

反应窗口钩

## 安装

```sh
npm install @better-hooks/performance
```

也可以使用：`pnpm add @better-hooks/performance`、`yarn add @better-hooks/performance`、`bun add @better-hooks/performance`

## README

# \* 反应性能钩

 [![](https://custom-icon-badges.demolab.com/static/v1?label=&message=BetterTyped&color=333&logo=BT)](https://bettertyped.com/)[![](https://custom-icon-badges.demolab.com/github/stars/BetterTyped/react-performance-hooks?logo=star&color=118ab2) ](https://github.com/BetterTyped/react-performance-hooks)[![](https://custom-icon-badges.demolab.com/github/license/BetterTyped/react-performance-hooks?logo=law&color=yellow) ](https://github.com/BetterTyped/react-performance-hooks/blob/main/License.md)[![](https://custom-icon-badges.demolab.com/badge/semver-commitzen-e10079?logo=semantic-release&color=e76f51) ](https://github.com/semantic-release/semantic-release)[![](https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white) ](https://github.com/BetterTyped/react-performance-hooks)[![](https://custom-icon-badges.demolab.com/npm/v/@better-hooks/performance.svg?logo=npm&color=E10098) ](https://www.npmjs.com/package/@better-hooks/performance)[![](https://custom-icon-badges.demolab.com/bundlephobia/minzip/@better-hooks/performance?color=blueviolet&logo=package) ](https://www.npmjs.com/package/@better-hooks/performance)[![](https://custom-icon-badges.demolab.com/npm/dm/@better-hooks/performance?logoColor=fff&logo=trending-up)](https://www.npmjs.com/package/@better-hooks/performance)

## 关于

停止和节制你的功能,状态和效果 以获得性能提升!

## 关键特性

🔮 **简单使用**

🚀 **快速而轻快**

✨ **滴出和发声**

🎊 **生命周期起跳和节流**

📡 **国家降级和节流**

## 安装

```bash
npm install --save @better-hooks/performance
```

或者说

```bash
yarn add @better-hooks/performance
```

* * *

## 实例

#### 使用深度效果

这个钩子很能比较依赖性 优化收缩效果

```tsx
import React from "react";
import { useDebounce } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const {debounce, reset, active} = useDeepEffect(() => {
    // do something
  }, [{a: 123}]) // <--- we will check if the deps are equal between rerenders

  return (
    // ...
  )
}

```

* * *

#### 调试

此钩子允许调试指定的函数 。 函数会在一段时间后调用 从上次执行。 我们可以用额外的道具来调整解弹时间.

```tsx
import React from "react";
import { useDebounce } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const {debounce, reset, active} = useDebounce({ delay: 600 })

  // Standard usage
  const onTyping = () => {
    debounce(() => {
      // debounced logic
    })
  }

  // Dynamic delay value
  const onTypingDynamic = (value: string, customDelay: number) => {
    debounce(() => {
      // debounced logic
    }, { delay: customDelay })
  }

  return (
    // ...
  )
}

```

* * *

#### 调试状态

这个钩子可以解开状态. 值会从上次保存一段时间后保存 执行设置函数。 我们可以用额外的道具来调整解弹时间.

```tsx
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useDebounceState } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const [value, setValue] = useDebounceState("20px")

  useWindowEvent("scroll", (e) => {
    setValue(e.scrollY + "px");
  })

  return (
    // ...
  )
}

```

* * *

#### 调试效果

这种钩子可以解开生命周期效应.

```tsx
import React from "react";
import { useDebounceEffect } from "@better-hooks/performance";

const MyComponent: React.FC = (props) => {

  useDebounceEffect(() => {
    // Do something
  }, { delay: 200 }, [props])

  return (
    // ...
  )
}

```

* * *

#### 使用色调

此钩子允许调试指定的函数 .

```tsx
import React from "react";
import { useThrottle } from "@better-hooks/performance";

const MyComponent: React.FC = ({ delay }) => {
  const {throttle, reset, active} = useThrottle(delay)

  // Standard usage
  const onScroll = () => {
    throttle(() => {
      // throttle logic
    })
  }

  // Dynamic delay value
  const onScrollDynamic = (value: string, customDelay: number) => {
    throttle(() => {
      // throttle logic
    }, customDelay)
  }

  return (
    // ...
  )
}

```

* * *

#### 使用Throttle状态

这种钩子可以使国家节制. 我们可以调整执行间隔时间和执行暂停 附加道具的时间.

```tsx
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const [value, setValue] =  useThrottleState("20px")

  useWindowEvent("scroll", (e) => {
    setValue(e.scrollY + "px");
  })

  return (
    // ...
  )
}

```

```tsx
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";

const MyComponent: React.FC = () => {
  const [value, setValue] =  useThrottleState("20px", {
    interval: 200, // We will save values at least once per 200ms
    timeout: 400 // Last set state action will get triggered after 400ms, we can also disable it
  })

  useWindowEvent("scroll", (e) => {
    setValue(e.scrollY + "px");
  })

  return (
    // ...
  )
}

```

* * *

#### 使用热力效应

这种钩子可以解开生命周期效应.

```tsx
import React from "react";
import { useThrottleEffect } from "@better-hooks/performance";

const MyComponent: React.FC = (props) => {

   useThrottleEffect(() => {
    // Do something
  }, { interval: 200, timeout: false }, [props])

  return (
    // ...
  )
}

```

## 常见问题

### @better-hooks/performance 是什么？

反应窗口钩

### 如何安装 @better-hooks/performance？

在项目目录运行 npm install @better-hooks/performance，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 16\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @better-hooks/performance 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @better-hooks/performance 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @better-hooks/performance 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @better-hooks/performance 可以商用吗？

@better-hooks/performance 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @better-hooks/performance 的下载量有多少？

根据 npm 官方下载统计，@better-hooks/performance 在 2026/10/08 – 2026/11/06 这 30 天内被下载 21,319 次，日均约 711 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @better-hooks/performance 还在维护吗？

最新版本 2\.1\.0 发布于 2025/06/22（1\.4 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/10/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。