Immutable 插件库的使用（数据深拷贝）

安装

1. npm i immutable
2. import {Map ,List} from ‘immutable’

对象类型的深拷贝

1. 使用 Map 对原生 js 对象,进行一个不可变的操作
2. 将进行不可变操作后的变量赋值给新声明的变量.
3. 这样 被赋值过后的 新变量就完成了一次深拷贝

数组类型的深拷贝

1. 使用 List 对原生 js 数组,进行一个不可变的操作
2. 将进行不可变操作后的变量赋值给新声明的变量.
3. 这样 被赋值过后的 新变量就完成了一次深拷贝

注意:

1. 深层数据结构,同样需要使用 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(),
});

深层数据结构的简单处理

1. fromIn() , 将需要进行深拷贝的对象传入该函数中.
2. 改变时 可以使用 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

深转换 ， 比较耗费性能