安装
- npm i immutable
- import {Map ,List} from ‘immutable’
对象类型的深拷贝
- 使用 Map 对原生 js 对象,进行一个不可变的操作
- 将进行不可变操作后的变量赋值给新声明的变量.
- 这样 被赋值过后的 新变量就完成了一次深拷贝
数组类型的深拷贝
- 使用 List 对原生 js 数组,进行一个不可变的操作
- 将进行不可变操作后的变量赋值给新声明的变量.
- 这样 被赋值过后的 新变量就完成了一次深拷贝
注意:
- 深层数据结构,同样需要使用 Map() 对嵌套的复杂属性再进行一次处理.
import {Map ,List} from ‘immutable’
var obj = {
name: "小明",
age: 18,
};
var oldImmuObj = Map(obj);
var newImmuObj = oldImmuObj;
// 修改 深拷贝之后的对象.( 可以链式调用,多次修改. )
newImmuObj.set("name", "coco").set("age", 24);
// 读取 深拷贝之后的对象属性.
newImmuObj.get("name");
// 第二种读取方式:
newImmuObj.toJS();
var info = {};
var oldImmu = Map(info);
var newImmu = oldImmu.set("name", "gangzi");
this.setState({
info: newImmu.toJS(),
});
深层数据结构的简单处理
- fromIn() , 将需要进行深拷贝的对象传入该函数中.
- 改变时 可以使用
setIn()
和updateIn()
来实现.
- setIn() 第一个参数是 数组,用于写 数据的层级属性,第二个参数是修后属性的值
import {fromIn} from 'immutable'
var obj ={
name:'coco'
age:12,
info:{
sex:'男',
address:'郑州市'
}
}
let oldImmu = fromJS(obj)
oldImmu.setIn(['info','sex'],'猛男')
相关属性
immutable特点
:immutable的不可变性让纯函数更强大,每次都返回新的immutable的特性让程序员可以对其进行链式操作,用起来更方便。
API
1. merge():合并map对象
2. toObject():immutable的map对象转JS对象
浅转换,只转换最外面的一层。
3. toArray():immutable的list对象转JS数组
浅转换,只转换最外面的一层。
4. toJS():immutable的 map对象/list对象 转 JS对象/JS数组
深转换 , 比较耗费性能
5. Map():JS对象或数组转换成immutable
浅转换,只转换最外面的一层。
6. fromJS():JS对象/JS数组 转换成immutable
深转换 , 比较耗费性能