使用 immutable.js 对引用数据类型进行深拷贝

immutable.js 介绍

• 每次修改一个 immutable 对象时都会创建一个新的不可变的对象，在新的对象上操作并不会影响到原对象的数据

深拷贝与浅拷贝

• let arr = {}，arr2 = arr 这种属于浅拷贝
• Object.assign() 、 扩展运算符(…) 都只是一级属性复制，比浅拷贝多深拷贝一层而已
• const obj1 = JSON.parse(JSON.stringify(obj)) 可以实现深拷贝，但是如果属性值中有 undefined 时会丢属性，属性值是数据的引用地址时也无法深拷贝

immutable 优化性能的原理

• immutable 实现的原理是持久化数据结构，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，immutable 使用了结构共享，即如果对象树中一个节点发生改变，只修改这个节点和受它影响的父节点，其它节点进行共享

immutable 中常用类型

• Map 用于包装对象

  import { Map } from 'immutable'
  
  const map1 = Map({a: 1, b:2})
  const map2 = map1.set('b', 20)
  map1.get('b') // 2
  map2.get('b') // 20
  

• List 用于包装数组

  import { List } from 'immutable'
  
  cosnt list1 = List([1, 2])
  cosnt list2 = list1.push(3) // List [1, 2, 3]
  

• merge 对象合并 、concat 数组连接

  import { Map, List } from 'immutable'
  
  const map1 = Map({a: 1, b: 2})
  const map2 = map1.merge({b: 3, c: 4}) // Map {a: 1, b: 3, c: 4}
  
  const list1 = List([1, 2, 3])
  cosnt list2 = list1.concat([4, 5]) // List [1, 2, 3, 4, 5]
  

• fromJS 将普通数据格式转成 immutable 数据格式（数组、对象都可以转）

  • 修改数组中的某个值，可以使用 updataIn() 方法往内层修改
  • 修改对象中的每个值，可以使用 setIn() 方法往内层修改

  import { fromJS } from 'immutable'
  
  const immutabelObj1 = fromJS({a: {b: [1, 2]}}) // Map {a: Map {b: List [1, 2]}}
  // 修改对象中的值
  const immutabelObj2 = immutabelObj1.getIn(['a', 'b', 0], 11) 
  // Map {a: Map {b: List [11, 2]}}
  
  const immutabelList1 = fromJS([{name: 'abc', data: [1, 2]}])
  // List [Map {name: 'abc', data: List [1, 2]}]
  // 修改数组中的值
  const immutabelList12 = immutabelList1.updataIn([0, 'data'], data => {
      data.push(3)
  })
  // List [Map {name: 'abc', data: List [1, 2, 3]}]
  

• toJS 将 immutable 数据格式转成普通数据格式

  import { fromJS } from 'immutable'
  
  const immutableData1 = fromJS({a: 1, b: 2})
  const immutableData2 = immutableData1.get('a', 11) // Map {a: 11, b: 2}
  
  // 转成 普通对象
  const data = immutableData2.toJS() // {a: 11, b: 2}
  

immutable 的缺点

• 容易与原生数组方法混淆
• 文档纯英文不好理解，调试不方便，打印出来的数据格式难以分析

npm 地址