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

useSetState

Tags:
State

一个使用 React 类组件（Class Component）的 this.setState 的方式来使用 State 的 React Hook。

场景

  • 贴近开发者习惯： 与 Class Component 中的 this.setState 类似，更贴近开发者的旧习惯
  • 状态管理场景： 实现组件状态的增量更新，无需替换整个状态对象
  • 表单处理场景： 管理表单项的状态，支持部分字段的更新，便于实现复杂表单逻辑
  • ...

演示

源码

用法

const [info, setInfo] = useSetState({ name: '张三', age: 18 }, { deep: true }) setInfo({ name: '李四' }) // 设置新的值，只更新 name 字段，age 字段保持不变 setInfo({ age: 20 }) // 设置新的值，只更新 age 字段，name 字段保持不变 setInfo({ name: '李四' }) // 再次设置「相同」的值，将不会触发重渲染。 参考 useSafeState 的 options。

源码

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

🪝 Hook🎨 Demo📄 Document

API

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

初始状态 InitialState

与 React.useState 相同。

选项 Options

更多详情参见 useSafeState#options。

返回值

与 React.useState 相同。