使用- 无效重写
这个 useUndoRedo 钩子提供了一种简单而高效的方法来管理您的 React 应用程序中的撤销和重做功能. 它帮助您保持状态变化的历史,使用户能够无缝地浏览您的应用程序的不同状态.
兼容性
反应18.2或后期,包括反应19("react": ">=18.2.0 <20") (中文(简体) ).
演示
https://undoredo.rizki.id 页面存档备份,存于互联网档案馆
发起人
发起人: JSPARK 语录
特征
- 撤销和重做:无所顾忌地向后航行并贯穿州史.
- 可配置的历史能力: 定义保存在内存中的最大状态更改数.
- 跳过支持:通过控制州史更新的频率来优化性能.
- 历史管理:访问完整历史堆栈,重置历史,或跳到特定点.
- 轻而易举地整合: 整合到现有反应组件所需的最小设置.
安装
npm i @anandarizki/use-undo-redo
基本用途
//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]);
纳入现有构成部分
你不需要整顿你现有的州政府 这个钩子可以无缝地融入到您的代码中,只需要一个单行加法.
原始组件
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
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>
);
}
使用未读重写
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比较或克隆;取而代之的是存储纯数据.
完全使用
const [undo, redo, { canUndo, canRedo, jumpTo, history, pointer, reset }] =
useUndoRedo([state, setState], {
debounce: 500,
capacity: 20,
});