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

想象一下,CatDog 类继了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);
    }));
  • 对于一些复杂结构,深度克隆这种方式会很耗性能
  • 将更新数据的代码集中管理,更容易维护
  • 不在原先的结构上做更改,类似于函数不改变形参,更优雅,也方便做扩展