https://github.com/immerjs/immer
immer 英文 https://immerjs.github.io/immer
immer 中文 https://immerjs.github.io/immer/zh-CN
image.pngpnpm add immer

immer原理

  1. 核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构
  2. immer工作原理就是把 produce方法传入的第一个参数作为初始值initialState
    1. produce方法里面会通过createProxy这个方法创建一个代理对象
  3. 通过es6的 Proxy进行代理返回一个 draft代理对象
    1. 如果当前环境不支持 Proxy则会使用Object.defineProperty()实现监听
  4. 进行get、set的拦截把只有改变了的部分会从 draft映射到初始对象当中

解决的痛点

  1. 解决对象引用问题，cloneDeep的性能问题
    1. 深拷贝一次之前的对象，然后在这个新对象的基础上修改属性，最后进行 setState
  2. 在修改一个非常复杂的 state属性的时候，可能需要不断地使用扩展语法，这样会导致错误的几率上升

immer缺点

Immer 默认情况下必须启用自动冻结功能，
如果禁用自动冻结功能，性能会变得特别差，这使得 Immer 的 immutable 状态并不够通用。
在跨进程、远程数据传输等场景下，我们必须不断冻结这些 immutable 数据

Proxy 的 getitem、setitem 惰性求值，不能降低更新的时间复杂度；

  1. 如果要维护一个比较大的可持久化数据结构，如一个长度为 1e5 的完全可持久化数组，需要用 immutable.js
  2. immutable.js缺点
    1. 数据无法序列化，前期必须 fromJS，后期必须 toJS 转成js对象
    2. https://www.zhihu.com/question/266511546

immer 属性

  1. import { produce } from "immer";
  3. const reducer = produce(state, draft => {
  4.   draft.user = 'lucy';
  5. });
  7. function reducer(action, payload) {
  8.   return produce(state, draft => {
  9.     draft.user = paylaod;
  10.   })
  11. };
  13. // setState 函数柯里化写法
  14. const _state = produce(state => {
  15.     state.todoList.push({ name: 'immer源码', done: true })
  16. });
  17. setState(_state)

immer参考
https://segmentfault.com/a/1190000017270785
https://www.jianshu.com/p/8970a820c148

immer更新数据

immer更新数组

https://juejin.cn/post/7157745748832944141

  1. import produce from 'immer';
  3. const todosArray = [
  4.   { id: 'id1', done: false, body: 'Take out the trash' },
  5.   { id: 'id2', done: false, body: 'Check Email' },
  6. ];
  8. // 添加
  9. const addedTodosArray = produce(todosArray, draft => {
  10.   draft.push({ id: 'id3', done: false, body: 'Buy bananas' });
  11. });
  13. // 索引删除
  14. const deletedTodosArray = produce(todosArray, draft => {
  15.   draft.splice(3 /*索引 */, 1);
  16. });
  18. // 索引更新
  19. const updatedTodosArray = produce(todosArray, draft => {
  20.   draft[3].done = true;
  21. });
  23. // 索引插入
  24. const updatedTodosArray = produce(todosArray, draft => {
  25.   draft.splice(3, 0, { id: 'id3', done: false, body: 'Buy bananas' });
  26. });
  28. // 删除最后一个元素
  29. const updatedTodosArray = produce(todosArray, draft => {
  30.   draft.pop();
  31. });
  33. // 删除第一个元素
  34. const updatedTodosArray = produce(todosArray, draft => {
  35.   draft.shift();
  36. });
  38. // 数组开头添加元素
  39. const addedTodosArray = produce(todosArray, draft => {
  40.   draft.unshift({ id: 'id3', done: false, body: 'Buy bananas' });
  41. });
  43. // 根据 id 删除
  44. const deletedTodosArray = produce(todosArray, draft => {
  45.   const index = draft.findIndex(todo => todo.id === 'id1');
  46.   if (index !== -1) {
  47.     draft.splice(index, 1);
  48.   }
  49. });
  51. // 根据 id 更新
  52. const updatedTodosArray = produce(todosArray, draft => {
  53.   const index = draft.findIndex(todo => todo.id === 'id1');
  54.   if (index !== -1) {
  55.     draft[index].done = true;
  56.   }
  57. });
  59. // 过滤
  60. const updatedTodosArray = produce(todosArray, draft => {
  61.   // 过滤器实际上会返回一个不可变的状态，但是如果过滤器不是处于对象的顶层，这个依然很有用
  62.   return draft.filter(todo => todo.done);
  63. });

useImmer

pnpm add immer use-immer
https://github.com/immerjs/use-immer
useImmer 就只是 useState 进行了一层包装，
将修改这个回调用 produce 包装了一层，才使得在外面使用的时候能够直接修改对象下面的属性

  1. import React from "react";
  2. import { useImmer } from "use-immer";
  5. function App() {
  6.   const [person, updatePerson] = useImmer({
  7.     name: "Michel",
  8.     age: 33
  9.   });
  11.   function updateName(name) {
  12.     updatePerson(draft => {
  13.       draft.name = name;
  14.     });
  15.   }
  17.   function becomeOlder() {
  18.     updatePerson(draft => {
  19.       draft.age++;
  20.     });
  21.   }
  23.   return (
  24.     <div className="App">
  25.       Hello {person.name} ({person.age})
  26.       <input
  27.         onChange={e => {
  28.           updateName(e.target.value);
  29.         }}
  30.         value={person.name}
  31.       />
  32.       <br />
  33.       <button onClick={becomeOlder}>Older</button>
  34.     </div>
  35.   );
  36. }

手写 useImmer

  1. import { produce, Draft, nothing, freeze } from "immer";
  3. export function useImmer(initialValue: any) {
  4.   const [val, updateValue] = useState(() =>
  5.     freeze(
  6.       typeof initialValue === "function" ? initialValue() : initialValue,
  7.       true
  8.     )
  9.   );
  10.   return [
  11.     val,
  12.     useCallback((updater) => {
  13.       if (typeof updater === "function") updateValue(produce(updater));
  14.       else updateValue(freeze(updater));
  15.     }, []),
  16.   ];
  17. }

useImmerReducer

  1. import { useImmerReducer } from "use-immer";
  3. const initialState = { count: 0 };
  5. function reducer(draft, action) {
  6.   switch (action.type) {
  7.     case "reset":
  8.       return initialState;
  9.     case "increment":
  10.       return void draft.count++;
  11.     case "decrement":
  12.       return void draft.count--;
  13.   }
  14. }
  16. function Counter() {
  17.   const [state, dispatch] = useImmerReducer(reducer, initialState);
  18.   return (
  19.     <>
  20.       Count: {state.count}
  21.       <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
  22.       <button onClick={() => dispatch({ type: "increment" })}>+</button>
  23.       <button onClick={() => dispatch({ type: "decrement" })}>-</button>
  24.     </>
  25.   );
  26. }

immer redux

  1. import produce from 'immer';
  3. const namespace = 'LIST/'
  5. export const CHANGE_LIST = `${namespace}CHANGE`
  7. const defaultState = {
  8.   dataSource: [],
  9.   title: 'LIST'
  10. }
  12. export function listReducer(state = defaultState, action) {
  14.   return produce(state, draft => {
  15.     const { type, payload } = action;
  16.     switch (type) {
  17.       case CHANGE_LIST:
  18.         draft.dataSource = payload.dataSource
  19.         draft.title = payload.title
  20.         break;
  21.       default:
  22.         break;
  23.     }
  24.     console.log('action', action, 'draft', draft)
  25.   })
  26. }

不可变数据

  1. 其实就是当你修改一个数据的时候，这个数据会给你返回一个新的引用，而自己的引用保持不变，
    1. 有点像是经常用到的数组的map
  2. Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也设计的和JS对象、数组等类似
  3. immer来代替immutable https://juejin.im/post/6844904035409985549
  4. immerjs讲解 https://segmentfault.com/a/1190000017270785
  5. https://juejin.cn/post/6844903782145327118

解决引用类型对象被修改的办法

  1. 深度拷贝，但是深拷贝的成本较高，会影响性能；
  2. ImmutableJS，非常棒的一个不可变数据结构的库，可以解决上面的问题
  3. But，跟 Immer 比起来，ImmutableJS 有两个较大的不足：
    1. 需要使用者学习它的数据结构操作方式，没有 Immer 提供的使用原生对象的操作方式简单、易用；
    2. 它的操作结果需要通过toJS方法才能得到原生对象，
    3. 在操作一个对象的时候，要时刻注意操作的是原生对象还是 ImmutableJS 的返回结果，稍不注意，就会产生意想不到的 bug

immer替代品，性能优于 immer 10x
https://github.com/unadlib/mutative

https://zhuanlan.zhihu.com/p/422445526
https://juejin.cn/post/7218179400633253947
https://segmentfault.com/a/1190000017270785
https://zhangzhao.name/posts/immer-immutable/