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);