immer让你的React代码更优雅

方便自动导入produce

export { default as produce } from 'immer';

在看一下 produce 的声明

<Base, D = Draft<Base>, Return = void>(base: Base, recipe: (draft: D) => Return, listener?: PatchListener): Produced<Base, Return>;

哇哦，produce 能够获取第一个参数的类型，把它用在第二个参数的形参上，代码提示那叫一个舒爽

这意味着有些时候可以不用as

想象一下，Cat、Dog 类继了Animal类，是通过type属性进行区分的，可我又不想为每个类型都写一个更新函数，于是乎

private onAnimalChange = (animal:Animal)=> {
  
}

更新的时候

this.onAnimalChange({
  ...cat，
  name:"小花"
} as Cat)

使用immer

this.onAnimalChange(produce(cat,(drafState)=>{
  drafState.name = "小花"
}))

更新state时可以不用自己用扩展运算符啥的维护引用了

这里省去了第一个参数

  this.setState(produce((state:BatchWrapperState)=>{
      let pos = index ?? state.replaceTextActionList.length
      state.replaceTextActionList.splice(pos,0,value);
    }));

• 对于一些复杂结构，深度克隆这种方式会很耗性能
• 将更新数据的代码集中管理，更容易维护
• 不在原先的结构上做更改，类似于函数不改变形参，更优雅，也方便做扩展