Immer

不可变[可共享]数据结构

1. 对象，数组，map，set 等创建后，内部状态不可以修改的数据结构。

2. 可共享：新建一个数据结构，未修改部分共享旧的部分，修改部分采用新的。

不可变共享数据结构优点

Immutable data structures allow for (efficient) change detection: if the reference to an object didn't change, the object itself did not change. In addition, it makes cloning relatively cheap: Unchanged parts of a data tree don't need to be copied and are shared in memory with older versions of the same state.

1. 便于判断对象是否改变，只需比较引用，无需深度比较

2. 克隆更方便，没变的部分保持旧的引用，节省内存空间

immer 做了什么

1. 检测突变并抛出错误

2. 帮我们用普通的 js 操作，便可以实现不可变数据结构

curried producers

const curried = produce((draft, ...rest) => {})
const nextState = curried(state, ...rest)

react & immer

1. useState + produce

2. useImmer

3. useReducer + produce

4. useImmerReducer

5. redux + immer

api

1. produce 返回的值默认是 递归 freeze 的

2. current() original()

patches 补丁

• applyPatches

• produceWithPatches

• todo： 多次 produce，如何快速还原？

性能优化

• 对大对象提前 shallow freeze

producer 的返回值

1. 直接在 draft 上修改，无需 return

2. 不改动 draft 直接返回新数据， return newData

3. 返回 undefined， return nothing

Use with Typescript

1. 多使用 readonly，借助 utility type Immutable

Immer vs Immutable.js

1. immer 比较方便，直接使用原生语法即可，immutable 需要使用提供的 api

2. 性能方面：当数据不是超大时，都可胜任；数据超大时，immutable 的性能比较好；但是 immutable 的数据结构不是原生 js，需要转成原生 js 的话 比较耗费性能，比 immer 性能差