useImmer - Choria

它从哪来#

Immer 是第三方库。React 官方只在 useReducer 参考页里把它当作简化不可变更新的可选方案提了一句，给的例子用的是 useImmerReducer。

React 侧的两个 Hook 来自 use-immer 包，它自身依赖 immer：

1
npm install use-immer

1
import { useImmer } from 'use-immer'

不要写成 import { useImmer } from 'immer'。immer 包里没有这个 Hook，这是抄配置时最常见的一处错。

它解决的啰嗦#

用 useState 改一个嵌套三层的字段：

1
setUser(prev => ({
2
  ...prev,
3
  info: {
4
    ...prev.info,
5
    basic: { ...prev.info.basic, city: '海淀区' },
6
  },
7
}))

同样的改动用 useImmer：

1
setUser(draft => {
2
  draft.info.basic.city = '海淀区'
3
})

传进回调的是草稿，写法像直接改对象；Immer 在背后算出一份新的不可变状态。

基本用法#

1
import { useImmer } from 'use-immer'
2

3
function App() {
4
  const [user, setUser] = useImmer({
5
    name: '张三',
6
    hobbies: ['读书'],
7
  })
8

9
  function update() {
10
    setUser(draft => {
11
      draft.name = '李四'
12
      draft.hobbies.push('编程')   // 直接 push，不用 [...hobbies, '编程']
13
    })
14
  }
15

16
  return (
17
    <div>
18
      <p>{user.name}</p>
19
      <p>{user.hobbies.join('、')}</p>
20
      <button onClick={update}>更新</button>
21
    </div>
22
  )
23
}

签名与 useState 一致：返回 [state, updateState]，updateState 同样接受函数形式。

列表的增删改#

1
setTodos(draft => {
2
  const todo = draft.find(t => t.id === id)
3
  if (todo) todo.completed = !todo.completed
4
})
5

6
setTodos(draft => {
7
  const index = draft.findIndex(t => t.id === id)
8
  if (index !== -1) draft.splice(index, 1)
9
})
10

11
setTodos(draft => {
12
  draft.push({ id: Date.now(), text, completed: false })
13
})

push、splice、sort 这些可变方法在草稿上都是安全的。

四条边界#

草稿只在回调执行期间有效。别把它存到外部变量，也别留给异步逻辑用。

回调里不要 return 值。这个箭头函数写法是错的：

1
// 错：返回了赋值结果，Immer 会把它当成新状态
2
setForm(draft => (draft.theme = 'dark'))
3

4
// 对：写成块体
5
setForm(draft => {
6
  draft.theme = 'dark'
7
})

原状态仍然不能直接改。user.name = '李四' 一样不触发重渲染，必须通过 setUser。

只有一层、字段不多的状态不值得用它。{ ...prev, age: 21 } 已经够短，为此多引一个依赖不划算。嵌套三层以上，或者要在 reducer 里反复改数组，收益才明显。

配合 reducer#

需要 reducer 时用同包的 useImmerReducer，官方给的就是这个，用法与 useReducer 相同，只是 draft 可以直接改。

当海风翻页时

它从哪来#

它解决的啰嗦#

基本用法#

列表的增删改#

四条边界#

配合 reducer#

React 19 学习笔记

继续阅读

换条路线

当海风翻页时

它从哪来#

它解决的啰嗦#

基本用法#

列表的增删改#

四条边界#

配合 reducer#

分享文章

沿着主题读

换条路线