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

useSafeState

Tags:
State

一个类似于 React.useState 的 React Hook，但抑制了 React <= 17 时误报的警告，并包含一个可选的深度比较功能（deep, 默认值为 false），它被设计为 React.useState 的安全和高效的替代品。

有关 useSafeState 优势的详细解释，请参阅 安全状态。

场景

  • 状态管理: 用于替代 React.useState，以避免 React <= 17 时的误报警告。
  • 性能优化: 通过深度比较新旧状态（deep 选项，默认关闭），避免不必要的重渲染。

演示

源码
Basic State:
Hello
Shallow Object State:
Hooks
Deep Object State:
Hooks

用法

const [info, setInfo] = useSafeState({ name: '张三' }, { deep: true }) setInfo({ name: '李四' }) // 设置新的值，会触发重渲染 setInfo({ name: '李四' }) // 再次设置「相同」的值，在开启 deep 选项的情况下将不会触发重渲染

源码

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

🪝 Hook🎨 Demo📄 Document

API

const [state, setState] = useSafeState(initialState, options)

初始状态 InitialState

状态的初始值，与 React.useState 相同。

选项 Options

export type UseSafeStateOptions = { /** * 在更新前深度比较新旧状态，只有当新状态与旧状态「不同」时，才更新状态，以减少不必要的重渲染。 * * @defaultValue false */ deep?: boolean }

返回值

与 React.useState 相同。