简体中文

useClonedState

Tags:

State

一个用来创建支持修改、同步操作、相互隔离的克隆状态的 React Hook，支持自定义 clone 函数，默认使用 JSON.parse(JSON.stringify(source))。

场景

数据状态克隆与隔离场景： 实现数据的深拷贝，创建独立状态，用于编辑不影响原始数据
编辑历史记录场景： 维护数据的编辑历史，支持撤销、重做功能
数据对比场景： 提供原始数据和修改后数据的对比功能
...

演示

源码

State:

{ "name": "shined", "age": 18 }

Cloned state:

{ "name": "shined", "age": 18 }

name:

用法

const [form, setForm] = useSafeState({
  name: 'react-use',
  description: 'An awesome react hooks library.',
})

const [cloned, setCloned, syncSource] = useClonedState(form)

// 直接修改克隆状态，即“修改表单”，数据与源状态隔离
const handleModify = (e: React.ChangeEvent<HTMLInputElement>) => {
  setCloned((cloned) => ({
    ...cloned,
    [e.target.name]: e.target.value,
  }))
}

// 使用克隆状态的当前状态作为新的表单状态，即“保存修改”
const handleSave = () => setForm(cloned)

// 同步（重置）源状态与克隆状态，即“撤销修改”
const handleReset = () => syncSource()

源码

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

🪝 Hook 🎨 Demo 📄 Document

API

const [cloned, setCloned, syncSource] = useClonedState(source, options)

源数据 Source

任何有效的 JavaScript 数据类型，如 string、number、object、array 等。

选项 Options

export type UseClonedStateOptions = {
  /**
   * 克隆函数
   *
   * @defaultValue defaultCloneFn (底层使用 JSON.parse(JSON.stringify(source)) 简单实现)
   */
  clone?: <T>(source: T) => T
  /**
   * 是否在传入的 state 变化时，手动触发同步（syncSource）函数，默认手动，即不会自动触发同步
   *
   * @defaultValue true
   */
  manual?: boolean
  /**
   * 是否对传入的 state 进行深度比较，并在深度比较结果为 false 才触发同步（syncSource）函数，默认开启深度比较
   *
   * @defaultValue true
   */
  deep?: boolean
}

返回值 Returns {returns}

export type UseClonedStateReturns<T> = readonly [
  /**
   * 克隆状态
   */
  cloned: T,
  /**
   * 设置克隆状态
   */
  setCloned: ReactSetState<T>,
  /**
   * 同步克隆状态与源状态
   */
  syncSource: () => void,
]

ON THIS PAGE

#useClonedState

#场景

#演示

#用法

#源码

#API

#源数据 Source

#选项 Options

#返回值 Returns {returns}

useClonedState

场景

演示

用法

源码

API

源数据 Source

选项 Options

返回值 Returns {returns}