Angular 学习笔记 immer 使用

https://github.com/immerjs/immer#supported-object-types

immer 是用来做 immutable 的.

angular 的 change detech 机制, 有时候为了要性能好一些，我们需要用 onPush 然后得配合 immutable 来让 input 触发.

但是呢, immuable.js 写起来很丑, 原生 es6 得写法也不好看. 于是就有了 immer.

早前 immer 完全不支持 class 所以我就没有用，最近看了一下发现部分支持了. 所以开始用了.

import { produce, immerable } from "immer";

class Product {
    constructor(data?: Partial<Product>) {
        Object.assign(this, data);
    }
    [immerable] = true;
    date: Date;
    colors: Color[];
    private _price : number;
    public get price() : number {
        return this._price;
    }
    public set price(v : number) {
        this._price = v;
    }
}

class Color {
    constructor(data? : Partial<Color>) {
        Object.assign(this, data);
    }
    
    [immerable] = true;
    text: string
}

const product = new Product({ date: new Date(), price: 50, colors : [new Color({ text : 'dada' })]  });
const newProduct = produce(product, next => {
    next.price = 10;
});
console.log('instanceof Product', newProduct instanceof Product);
console.log('is new', newProduct !== product);
console.log('new value', newProduct.price === 10);

用法很简单. 调用, produce, 然后把对象传进去, next 是一个 proxy 对象, 我们像一般得操作方式就可以了, 最后会返回新得对象.

它并不是 clone 整个子孙对象哦，而是你有修改才会 clone.

如果是 class 要加上一个 symbol [immerable] = true

有几个地方要特别注意 :

1. 如果要修改 Date 的, 必须自己 clone 一个新的.

2. array 只可以修改 length 不可以自己添加额外的属性.

3. prototype 是不会 clone 的, 保留原本指针 (我没有 test, 因为我没有用到 prototype)

4. Built-in classes like Map and Set 不支持 (官网给了 workaround, 我也没用, 所以暂时不管)

Angular 学习笔记 immer 使用

猜你喜欢