JS immutable组件

介绍

更多信息

immutable中文：不变的，不可改变的

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

安装

npm i immutable

一、Immutable优化性能的方式

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

二、Immutable中Map用法

const { Map } = require("immutable")
let obj1 = {
  name: "rain",
  age: 18,
  arr: [1, 2, 3]
}
let obj2 = Map(obj1)
let obj3 = obj2.set("name", "snow").set("age", 20)
console.log(obj2.toJS())// { name: 'rain', age: 18, arr: [ 1, 2, 3 ] }
console.log(obj3.toJS())// { name: 'snow', age: 20, arr: [ 1, 2, 3 ] }

三、Immutable中List用法

List中的方法和JS中数组的方法大部分一样，List方法每次操作都返回一个新的数组，新数组不影响老数组。

const { List } = require("immutable")
let arr = [1, 2, 3, 4]
let arr1 = List(arr)
let arr2 = arr1.push(5)
let arr3 = arr1.pop()
console.log(arr1.toJS())// [ 1, 2, 3, 4 ]
console.log(arr2.toJS())// [ 1, 2, 3, 4, 5 ]
console.log(arr3.toJS())// [ 1, 2, 3 ]

四、fromJS()和setIn()方法

 let obj1 = fromJS({
      name: "rain",
      arr: [1, 2, 3, 4, 5],
      dog: {
        name: "dog",
        age: 16
      }
    })
 // 两者等价，可见fromJS()方法更方便
    let obj1 = Map({
      name: "rain",
      arr: List([1, 2, 3, 4, 5]),
      dog: Map({
        name: "dog",
        age: 16
      })
    })
    
     let obj2 = obj1.set("name", "snow").setIn(["dog", "name"], "cat").setIn(["arr", 0], 10)// 修改dog元素的name属性，修改数组arr[0]
    console.log(obj2.get("name"), obj2.get("dog").get("name"), obj2.get("arr").get(0)) // snow cat 10

五、updateIn()方法

    let obj2 = obj1.updateIn(["arr"], (list) => list.splice(0, 1)) // 删除arr[0]
    console.log(obj2.get("arr").toJS()) // [2, 3, 4, 5]