上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useManualStateHistory

Tags:
ProUtilities

一个 React 钩子 (Hook)，允许您手动管理状态的历史记录。

演示

源码
{"hash":"ABCDEF","count":0}
/
{"snapshot":{"hash":"ABCDEF","count":0},"timestamp":1733472431052}
12/6/2024, 8:07:11 AM {"hash":"ABCDEF","count":0}

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const history = useManualStateHistory(state, options)

状态 State

任何可序列化的源状态值，用于记录在历史中。

选项 Options

export type UseManualStateHistoryOptions<Raw, Serialized = Raw> = { /** * 历史记录的容量 * * @defaultValue Number.POSITIVE_INFINITY */ capacity?: number /** * 是否克隆源状态 * * @defaultValue false */ clone?: boolean | CloneFn<Raw> /** * 节流选项 * * @defaultValue undefined */ throttle?: number | UseThrottledFnOptions /** * 防抖选项 * * @defaultValue undefined */ debounce?: number | UseDebouncedFnOptions /** * 序列化源状态的转储函数 * * @defaultValue (v) => v */ dump?: (v: Raw) => Serialized /** * 反序列化序列化状态的解析函数 * * @defaultValue (v) => v */ parse?: (v: Serialized) => Raw }

UseThrottledFnOptions 是 useThrottledFn 的选项，参见 useThrottledFn。

UseDebouncedFnOptions 是 useDebouncedFn 的选项，参见 useDebouncedFn。

返回值

export type UseRefHistoryRecord<T> = { /** * 序列化快照 */ snapshot: T /** * 时间戳 */ timestamp: number } export type UseManualStateHistoryReturns<Raw, Serialized> = { /** * 源状态 */ source: Raw /** * 历史记录 */ history: UseRefHistoryRecord<Serialized>[] /** * 最后的历史记录 */ last: UseRefHistoryRecord<Serialized> /** * 可撤销的栈 */ undoStack: UseRefHistoryRecord<Serialized>[] /** * 可重做的栈 */ redoStack: UseRefHistoryRecord<Serialized>[] /** * 是否能撤销或重做 */ canUndo: boolean /** * 是否能重做或撤销 */ canRedo: boolean /** * 撤销最后的变更 */ undo(): void /** * 重做最后的变更 */ redo(): void /** * 清除所有历史记录 */ clear(): void /** * 将当前源状态提交到历史记录中 */ commit(): void }