# @anandarizki/use-undo-redo 中文文档

规范地址：https://npmcn.com/package/%40anandarizki/use-undo-redo/

版本：1\.1\.0
npm 元数据更新时间：2026-10-22T08:00:42.356Z
中文译文更新时间：2026-11-06T15:20:14.950Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40anandarizki/use-undo-redo
原文对照：https://npmcn.com/package/%40anandarizki/use-undo-redo/?lang=original
项目主页：https://undoredo.rizki.id/
源码仓库：https://github.com/anandarizki/use-undo-redo

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

- 包体积（解压后）：14.6 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18\.2\.0 \<20
- 首次发布：2024-07-24T07:54:55.321Z
- 最新版本发布：2026-10-22T07:59:01.043Z
- 近 30 天下载量：2924（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 1 个）

## 中文简介

钩子提供了一个简单有效的方法来管理您的 React 应用程序中的撤销和重做功能

## 安装

```sh
npm install @anandarizki/use-undo-redo
```

也可以使用：`pnpm add @anandarizki/use-undo-redo`、`yarn add @anandarizki/use-undo-redo`、`bun add @anandarizki/use-undo-redo`

## README

# 使用- 无效重写

这个 `useUndoRedo` 钩子提供了一种简单而高效的方法来管理您的 React 应用程序中的撤销和重做功能. 它帮助您保持状态变化的历史,使用户能够无缝地浏览您的应用程序的不同状态.

## 兼容性

反应18.2或后期,包括反应19(`"react": ">=18.2.0 <20"`) (中文(简体) ).

## 演示

[https://undoredo.rizki.id 页面存档备份,存于互联网档案馆](https://undoredo.rizki.id/)

## 发起人

[![JSpark](https://jspark.app/favicon.svg)](https://jspark.app/) 发起人: [JSPARK 语录](https://jspark.app/)

## 特征

-   **撤销和重做**:无所顾忌地向后航行并贯穿州史.
-   **可配置的历史能力**: 定义保存在内存中的最大状态更改数.
-   **跳过支持**:通过控制州史更新的频率来优化性能.
-   **历史管理**:访问完整历史堆栈,重置历史,或跳到特定点.
-   **轻而易举地整合**: 整合到现有反应组件所需的最小设置.

## 安装

```node
npm i @anandarizki/use-undo-redo
```

## 基本用途

```js
//import the hook
import { useUndoRedo } from "@anandarizki/use-undo-redo";

//your state handler
const [state, setState] = useState();

//initialize hooks and pass your state and setState as the argument
const [undo, redo] = useUndoRedo([state, setState]);
```

### 纳入现有构成部分

你不需要整顿你现有的州政府 这个钩子可以无缝地融入到您的代码中,只需要一个单行加法.

**原始组件**

```jsx
import { useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>
        <button onClick={() => setCount(count - 1)}>-</button>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    </div>
  );
}
```

**组件为 `useUndoRedo`**

```jsx
import { useState } from "react";
import { useUndoRedo } from "@anandarizki/use-undo-redo";

function MyComponent() {
  const [count, setCount] = useState(0);

  //new line
  const [undo, redo] = useUndoRedo([count, setCount]);

  return (
    <div>
      <div>
        <button onClick={() => setCount(count - 1)}>-</button>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>

      <div>
        <button onClick={undo}>
          Undo
        </button>
        <button onClick={redo}>
          Redo
        </button>
      </div>
    </div>
  );
}
```

## 使用未读重写

```ts
useUndoRedo<T>(primaryState: [T, (v: T) => void], options?: Options<T>): Output<T>
```

-   **初级状态**:包含状态值和状态设置函数的数组。 这使得钩子可以管理这个特定状态的历史.
    
-   **选项**数字 :
    
    -   **能力** (可选) : 历史中保存的最大条目数,包括起始状态,所以 `capacity: 10` 允许9个撤消步骤。 低于1的数值作为1处理 `Infinity` 所有东西都留着 默认为10.
    -   **弹跳** (可选) : 以毫秒计解析历史更新的时间. 当您经常更新状态时, 即使用受控输入更新状态时, 这样做很有用 。 通话 `undo` 或者说 `jumpTo` 当更新正在等待它先记录时, 它可以被重装。 默认为 0( 不跳出) .
    -   **克隆** (可选) : 状态值如何被复制到历史中 . `true` 用摇篮打入深层 `cloneDeep`· ; `false` 将值存储为- is, 它更快, 使用更少的内存, 但只有在您从未变异状态时才安全; 函数 `(value) => copy` 让您自己提供副本。 默认是 `true`。 。 。 .
-   **回返**: 包含:
    
    -   **撤销**: 恢复到先前状态的函数.
    -   **重做**:一个向下一个状态前进的函数.
    -   **具有下列属性的对象**数字 :
        -   **撤销**: 一个布尔表示一个撤销操作是否可能.
        -   **可重写**:布尔表示复作操作是否可行.
        -   **重设**:一个清除历史并重置指针的函数.
        -   **历史**: 数组 `{ value, timestamp }` 代表当前状态历史的条目。 当作只读.
        -   **指针**: 当前条目的索引 `history`。 。 。 .
        -   **跳转到**:按索引跳到历史特定点的函数. 无效的索引被忽略 .

`undo`, (中文(简体) ), `redo`, (中文(简体) ), `jumpTo` 财务报告和审定财务报表 `reset` 保持同一身份,所以他们可以安全地传递给记忆部件或用作实际依赖.

这个 `Options`, (中文(简体) ), `Output` 财务报告和审定财务报表 `StateHistory` 为 TypeScript 用户导出类型.

### 页:1

-   通过深度平等检查检测到变化( lodash) `isEqual`) (中文(简体) ). 设置与当前条目内容相同的新对象不记录为更改.
-   私人类案例(`#field`)属性不能被lodash比较或克隆;取而代之的是存储纯数据.

**完全使用**

```js
const [undo, redo, { canUndo, canRedo, jumpTo, history, pointer, reset }] =
  useUndoRedo([state, setState], {
    debounce: 500,
    capacity: 20,
  });
```

## 常见问题

### @anandarizki/use-undo-redo 是什么？

钩子提供了一个简单有效的方法来管理您的 React 应用程序中的撤销和重做功能

### 如何安装 @anandarizki/use-undo-redo？

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

### @anandarizki/use-undo-redo 支持 TypeScript 吗？

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

### @anandarizki/use-undo-redo 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @anandarizki/use-undo-redo 可以商用吗？

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

### @anandarizki/use-undo-redo 的下载量有多少？

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

### @anandarizki/use-undo-redo 还在维护吗？

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