一、前言
Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体量小巧、设计巧妙，满足了我们对 JS 不可变数据结构的需求。
二、学习前提
阅读这篇文章需要以下知识储备：
- JavaScript 基础语法
- es6 基础语法
- node、npm 基础知识
三、历史背景
在 js 中，处理数据一直存在一个问题：
拷贝一个值的时候，如果这个值是引用类型（比如对象、数组），直接赋值给另一个变量的时候，会把值的引用也拷贝过去，在修改新变量的过程中，旧的变量也会被一起修改掉。
要解决这个问题，通常我们不会直接赋值，而是会选择使用深拷贝，比如JSON.parse(JSON.stringify())，再比如 lodash 为我们提供的 cloneDeep 方法……
但是，深拷贝并不是十全十美的。
这个时候，immer 诞生了！
四、immer 功能介绍
基本思想是，使用 Immer，会将所有更改应用到临时 draft，它是 currentState 的代理。一旦你完成了所有的 mutations，Immer 将根据对 draft state 的 mutations 生成 nextState。这意味着你可以通过简单地修改数据来与数据交互，同时保留不可变数据的所有好处。
一个简单的比较示例
|
1
2
3
4
5
6
7
8
9
10
|
const baseState = [
{
title: 'Learn TypeScript',
done: true,
},
{
title: 'Try Immer',
done: false,
},
];
|
假设我们有上述基本状态，我们需要更新第二个 todo，并添加第三个。但是，我们不想改变原始的 baseState，我们也想避免深度克隆以保留第一个 todo
不使用 Immer
如果没有 Immer，我们将不得不小心地浅拷贝每层受我们更改影响的 state 结构
|
1
2
3
4
5
6
7
8
9
|
const nextState = [...baseState]; // 浅拷贝数组
nextState[1] = {
// 替换第一层元素
...nextState[1], // 浅拷贝第一层元素
done: true, // 期望的更新
};
// 因为 nextState 是新拷贝的, 所以使用 push 方法是安全的,
// 但是在未来的任意时间做相同的事情会违反不变性原则并且导致 bug！
nextState.push({ title: 'Tweet about it' });
|
使用 Immer
使用 Immer，这个过程更加简单。我们可以利用 produce 函数，它将我们要更改的 state 作为第一个参数，对于第二个参数，我们传递一个名为 recipe 的函数，该函数传递一个 draft 参数，我们可以对其应用直接的 mutations。一旦 recipe 执行完成，这些 mutations 被记录并用于产生下一个状态。 produce 将负责所有必要的复制，并通过冻结数据来防止未来的意外修改。
|
1
2
3
4
5
|
import produce from 'immer';
const nextState = produce(baseState, draft => {
draft[1].done = true;
draft.push({ title: 'Tweet about it' });
});
|
使用 Immer 就像拥有一个私人助理。助手拿一封信（当前状态）并给您一份副本（草稿）以记录更改。完成后，助手将接受您的草稿并为您生成真正不变的最终信件（下一个状态）。
第二个示例
如果有一个层级很深的对象，你在使用 redux 的时候，想在 reducer 中修改它的某个属性，但是根据 reduce 的原则，我们不能直接修改 state，而是必须返回一个新的 state
不使用 Immer
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const someReducer = (state, action) => {
return {
...state,
first: {
...state.first,
second: {
...state.first.second,
third: {
...state.first.second.third,
value: action,
},
},
},
};
};
|
使用 Immer
|
1
2
3
|
const someReducer = (state, action) => {
state.first.second.third.value = action;
};
|
好处
- 遵循不可变数据范式，同时使用普通的 JavaScript 对象、数组、Sets 和 Maps。无需学习新的 API 或 "mutations patterns"！
- 强类型，无基于字符串的路径选择器等
- 开箱即用的结构共享
- 开箱即用的对象冻结
- 深度更新轻而易举
- 样板代码减少。更少的噪音，更简洁的代码
更新模式
在 Immer 之前，使用不可变数据意味着学习所有不可变的更新模式。
为了帮助“忘记”这些模式，这里概述了如何利用内置 JavaScript API 来更新对象和集合
更新对象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
import produce from 'immer';
const todosObj = {
id1: { done: false, body: 'Take out the trash' },
id2: { done: false, body: 'Check Email' },
};
// 添加
const addedTodosObj = produce(todosObj, draft => {
draft['id3'] = { done: false, body: 'Buy bananas' };
});
// 删除
const deletedTodosObj = produce(todosObj, draft => {
delete draft['id1'];
});
// 更新
const updatedTodosObj = produce(todosObj, draft => {
draft['id1'].done = true;
});
|
更新数组
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import produce from 'immer';
const todosArray = [
{ id: 'id1', done: false, body: 'Take out the trash' },
{ id: 'id2', done: false, body: 'Check Email' },
];
// 添加
const addedTodosArray = produce(todosArray, draft => {
draft.push({ id: 'id3', done: false, body: 'Buy bananas' });
});
// 索引删除
const deletedTodosArray = produce(todosArray, draft => {
draft.splice(3 /*索引 */, 1);
});
// 索引更新
const updatedTodosArray = produce(todosArray, draft => {
draft[3].done = true;
});
// 索引插入
const updatedTodosArray = produce(todosArray, draft => {
draft.splice(3, 0, { id: 'id3', done: false, body: 'Buy bananas' });
});
// 删除最后一个元素
const updatedTodosArray = produce(todosArray, draft => {
draft.pop();
});
// 删除第一个元素
const updatedTodosArray = produce(todosArray, draft => {
draft.shift();
});
// 数组开头添加元素
const addedTodosArray = produce(todosArray, draft => {
draft.unshift({ id: 'id3', done: false, body: 'Buy bananas' });
});
// 根据 id 删除
const deletedTodosArray = produce(todosArray, draft => {
const index = draft.findIndex(todo => todo.id === 'id1');
if (index !== -1) {
draft.splice(index, 1);
}
});
// 根据 id 更新
const updatedTodosArray = produce(todosArray, draft => {
const index = draft.findIndex(todo => todo.id === 'id1');
if (index !== -1) {
draft[index].done = true;
}
});
// 过滤
const updatedTodosArray = produce(todosArray, draft => {
// 过滤器实际上会返回一个不可变的状态，但是如果过滤器不是处于对象的顶层，这个依然很有用
return draft.filter(todo => todo.done);
});
|
嵌套数据结构
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import produce from 'immer';
// 复杂数据结构例子
const store = {
users: new Map([
[
'17',
{
name: 'Michel',
todos: [{ title: 'Get coffee', done: false }],
},
],
]),
};
// 深度更新
const nextStore = produce(store, draft => {
draft.users.get('17').todos[0].done = true;
});
// 过滤
const nextStore = produce(store, draft => {
const user = draft.users.get('17');
user.todos = user.todos.filter(todo => todo.done);
});
|
异步 producers & createDraft
允许从 recipe 返回 Promise 对象。或者使用 async / await。这对于长时间运行的进程非常有用，只有在 Promise 链解析后才生成新对象
注意，如果 producer 是异步的，produce 本身也会返回一个 promise。
例子:
|
1
2
3
4
5
|
import produce from 'immer';
const user = { name: 'michel', todos: [] };
const loadedUser = await produce(user, async draft => {
draft.todos = await (await fetch('http://host/' + draft.name)).json();
});
|
请注意，draft 不应从异步程序中“泄露”并存储在其他地方。异步过程完成后，draft 仍将被释放
createDraft 和 finishDraft
createDraft 和 finishDraft 是两个底层函数，它们对于在 immer 之上构建抽象的库非常有用。避免了为了使用 draft 始终创建函数。
相反，人们可以创建一个 draft，对其进行修改，并在未来的某个时间完成该 draft，在这种情况下，将产生下一个不可变状态。
例如，我们可以将上面的示例重写为：
|
1
2
3
4
5
|
import { createDraft, finishDraft } from 'immer';
const user = { name: 'michel', todos: [] };
const draft = createDraft(user);
draft.todos = await (await fetch('http://host/' + draft.name)).json();
const loadedUser = finishDraft(draft);
|
五、性能提示
预冻结数据
当向 Immer producer 中的状态树添加大型数据集时（例如从 JSON 端接收的数据），可以在首先添加的数据的最外层调用 freeze(json) 来浅冻结它。这将允许 Immer 更快地将新数据添加到树中，因为它将避免递归扫描和冻结新数据的需要。
可以随时选择退出
immer 在任何地方都是可选的，因此手动编写性能非常苛刻的 reducers ，并将 immer 用于所有普通的的 reducers 是非常好的。即使在 producer 内部，您也可以通过使用 original 或 current 函数来选择退出 Immer 的某些部分逻辑，并对纯 JavaScript 对象执行一些操作。
对于性能消耗大的的搜索操作，从原始 state 读取，而不是 draft
Immer 会将您在 draft 中读取的任何内容也递归地转换为 draft。如果您对涉及大量读取操作的 draft 进行昂贵的无副作用操作，例如在非常大的数组中使用 find(Index) 查找索引，您可以通过首先进行搜索，并且只在知道索引后调用 produce 来加快速度。这样可以阻止 Immer 将在 draft 中搜索到的所有内容都进行转换。或者，使用 original(someDraft) 对 draft 的原始值执行搜索，这归结为同样的事情。
将 produce 拉到尽可能远的地方
始终尝试将 produce “向上”拉动，例如 for (let x of y) produce(base, d => d.push(x)) 比 produce(base, d => { for (let x of y) ) d.push(x)}) 慢得多
六、陷阱
不要重新分配 recipe 参数
永远不要重新分配 draft 参数（例如：draft = myNewState）。相反，要么修改 draft，要么返回新状态。
Immer 只支持单向树
Immer 假设您的状态是单向树。也就是说，任何对象都不应该在树中出现两次，也不应该有循环引用。从根到树的任何节点应该只有一条路径。
永远不要从 producer 那里显式返回 undefined
可以从 producers 返回值，但不能以这种方式返回 undefined，因为它与根本不更新 draft 没有区别！
不要修改特殊对象
Immer 不支持特殊对象 比如 window.location
只有有效的索引和长度可以在数组上改变
对于数组，只能改变数值属性和 length 属性。自定义属性不会保留在数组上。
只有来自 state 的数据会被 draft
请注意，来自闭包而不是来自基本 state 的数据将永远不会被 draft，即使数据已成为新 darft 的一部分
|
1
2
3
4
5
6
7
8
9
10
11
|
const onReceiveTodo = todo => {
const nextTodos = produce(todos, draft => {
draft.todos[todo.id] = todo;
// 注意，因为 todo 来自外部，而不是 draft，所以他不会被 draft，
// 所以下面的修改会影响原来的 todo！
draft.todos[todo.id].done = true;
// 上面的代码相当于
todo.done = true;
draft.todos[todo.id] = todo;
});
};
|
始终使用嵌套 producers 的结果
支持嵌套调用 produce，但请注意 produce 将始终产生新状态，因此即使将 draft 传递给嵌套 produce，内部 produce 所做的更改也不会在传递给它的 draft 中可见，只会反映在产生的输出中。
换句话说，当使用嵌套 produce 时，您会得到 draft 的 draft，并且内部 produce 的结果会被合并回原始 draft（或返回）
错误示范：
|
1
2
3
4
5
6
|
// 嵌套的错误写法：
produce(state, draft => {
produce(draft.user, userDraft => {
userDraft.name += '!';
});
});
|
正确示范：
|
1
2
3
4
5
6
|
// 嵌套的正确写法：
produce(state, draft => {
draft.user = produce(draft.user, userDraft => {
userDraft.name += '!';
});
});
|
Drafts 在引用上不相等
Immer 中的 draft 对象包装在 Proxy 中，因此您不能使用 == 或 === 来测试原始对象与其 draft 之间的相等性，相反，可以使用 original：
|
1
2
3
4
5
6
7
8
9
|
const remove = produce((list, element) => {
const index = list.indexOf(element); // 不会工作！
const index = original(list).indexOf(element); // 用这个！
if (index !== -1) {
list.splice(index, 1);
}
});
const values = [a, b, c];
remove(values, a);
|
如果可以的话，建议在 produce 函数之外执行比较，或者使用 .id 之类的唯一标识符属性，以避免需要使用 original。
