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 的, 保留原本指针
4. Built-in classes like Map
and Set 不支持 (官网给了 workaround, 我也没用, 所以暂时不管)
5. 不支持 computed property (如果是一般写 getter setter 是可以的, 因为 getter setter 其实是 define 到了 prototype 上而不是对象上面, 如果你要 define 到对象上, 那 immer 就支持不到了)
最新文章
- 建模前的数据清洗/ETL(python)
- MySql_十六进制值
- Java中基本数据类型的存储方式和相关内存的处理方式(java程序员必读经典)
- 【转】DataSource高级应用
- hdu 4155 The Game of 31 博弈论
- iOS实战(零):开发社区、文档等资源
- 14.18 InnoDB Backup and Recovery 备份和恢复:
- leetcode136 利用异或运算找不同的元素
- 想玩 BGP 路由器么?用 CentOS 做一个
- C# 获取区域和语言值
- [Unity优化]UI优化(二):Mask组件分析
- Differences Between Enterprise, Standard and Standard One Editions on Oracle 11.2 (Doc ID 1084132.1)
- [转]从OSI网络模型到TCP/IP协议族简介
- IntelliJ IDEA 注释模板设置
- Python的常用内置函数介绍
- python之路----进程三
- request.getcontextPath() 详解(转)
- 微信小程序—智能小蜜(基于智能语义解析olami开放平台)
- opencv Mat中某点的值
- Ubuntu 下常用的命令 简略记录