Immer--immutable不可变数据优化

一个优化拷贝性能，且使用过程优雅的react第三方js库。

语法：

produce(currentState, recipe: (draftState) => void | draftState, ?PatchListener): nextState

名词解析：

• currentState
  被操作对象的最初状态
• draftState
  根据 currentState 生成的草稿状态，它是 currentState 的代理，对 draftState 所做的任何修改都将被记录并用于生成 nextState 。在此过程中，currentState 将不受影响
• nextState
  根据 draftState 生成的最终状态
• produce 生产
  用来生成 nextState 或 producer 的函数
• producer 生产者
  通过 produce 生成，用来生产 nextState ，每次执行相同的操作
• recipe 生产机器
  用来操作 draftState 的函数

初步使用：

// npm i --save immer
import {produce} from 'immer'

// 创建一个需要拷贝/可修改的对象
let currentState = {
    p:{
   x:[1] 
  }
}

// 修改值
const o1 = produce(currentState,draft=>{
    draft.p.x = 1
})
// o1 ==> {p:{x:1}}  currentState不变

const o2 = produce(currentState,draft=>{
    draft.p.x.push([2,3,4])
})
// o2 ==> {p:{x:[1,2,3,4]}}  currentState不变

详用：

// exp1：值的比较
let nextState = produce(currentState, (draft) => {})
currentState === nextState; // true
//==================================================


//exp2：修改对象
let currentState = {
  a: [],
  p: {
    x: 1
  }
}
let nextState = produce(currentState, (draft) => {
  draft.a.push(2);
})
currentState.a === nextState.a; // false
currentState.p === nextState.p; // true
//==================================================


// exp3：预设值--合并
let producer = produce((draft) => {
  draft.x = 2
});
let nextState = producer(currentState);
//==================================================


// exp4：
/**
*recipe的返回值：
*recipe 是否有返回值，nextState 的生成过程是不同的：
*       recipe 没有返回值时：nextState 是根据 recipe 函数内的 draftState 生成的；
*       recipe 有返回值时：nextState 是根据 recipe 函数的返回值生成的；
*/
// nextState通过recipe的返回值生成
let nextState = produce(
  currentState, 
  (draftState) => {
    return {
      x: 2
    }
  }
)
//==================================================


// exp5：
/** 
*recipe中的this--非箭头函数
*recipe 函数内部的this指向 draftState ，也就是修改this与修改 recipe 的参数 draftState ，效果是一样的。
*/
produce(currentState, function(draft){
  // 此处，this 指向 draftState
  draft === this; // true
})
//==================================================

patch补丁：

produce第三个参数为函数，函数接收两个函数参数--记录需要保持的draft（正向记录），以及保持原值不变的基础上获取新增的元素的最新值（反向记录）。

import produce, { applyPatches } from "immer"

let state = {
  x: 1
}

let replaces = [];
let inverseReplaces = [];

state = produce(
  state,
  draft => {
    draft.x = 2;
    draft.y = 2;
  },
  (patches, inversePatches) => {
     // 记录需要保存的draft
    replaces = patches.filter(patch => patch.op === 'replace');
    // 原有的值不变，新增的值取最新值
    inverseReplaces = inversePatches.filter(patch => patch.op === 'replace');
  }
)

state = produce(state, draft => {
  draft.x = 3;
})
console.log('state1', state); // { x: 3, y: 2 }

state = applyPatches(state, replaces);
console.log('state2', state); // { x: 2, y: 2 }

state = produce(state, draft => {
  draft.x = 4;
})
console.log('state3', state); // { x: 4, y: 2 }

state = applyPatches(state, inverseReplaces);
console.log('state4', state); // { x: 1, y: 2 }

React中使用Immer

this.state = {
  members: [
    {
      name: 'ronffy',
      age: 30
    }
  ]
}
// 修改
let nextState = produce(this.state,draft=>{
    draft.members[0].age++
})
//=========================================


// 拓展--使用redux
let obj = {};
let producer = produce((draft, arg) => {
  obj === arg; // true
});
let nextState = producer(currentState, obj);
//=========================================


// 经过拓展思路，在redux中使用
const reducer = produce((draft, action) => {
  switch (action.type) {
    case 'ADD_AGE':
      draft.members[0].age++;
  }
})