一个优化拷贝性能，且使用过程优雅的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++;
}
})
