immutable结构共享

深碍√TFBOYSˉ_ 2023-07-22 10:26 5阅读 0赞

###### 一、深复制与浅复制 ######

1.浅复制：引用赋值，var arr={ } --> newArr=arr
    
    2. [...]  concat  slice 都可以做深复制(只是一层深复制)
    
    3.Object.assign()只是一层深复制，只比浅复制多深复制一层。
    
    4.arr=[{ name:'xiaoming'}] --> newArr=[...arr] --> newArr[0].name='123' --> arr=[{ name:'123'}]
    只是一层深复制，arr在小盒子里放了一把钥匙，newArr只是把钥匙深复制了一份放在新盒子里面，对应的指向的空间其实还是同一个空间，arr里面的对象不会被深复制
    
    5.数组、对象深复制都好用的方法(所有结构都复制一遍)
        var arr = [{ name:'mxf'}]
        const newArr = JSON.parse(JSON.stringify(arr))
        newArr[0].name='123'
        newArr --> [{ name:'123'}]
        arr --> [{ name:'mxf'}]
    缺点：不能有undefined
        var arr = [{ name:'mxf', age:undefined}]
        const newArr = JSON.parse(JSON.stringify(arr))
        newArr --> [{ name:'mxf'}] // 没有age这个字段，已经丢东西了，就不叫深复制了
    解决方法:
    	var arr = [{ name:'mxf', age:undefined}]
    	写一个方法，判断传进来的数据是否是复杂数据类型的，如果是，就先把里面的元素{ name:'mxf', age:undefined}进行[...]展开赋值深复制一遍，然后[{ }]再进行深复制一遍。
        
    6.immutable -- 深复制，受影响的字段深复制一遍，不受影响的字段复用而不是深复制，结构共享

###### 二、immutable ######

`作用`

深复制，受影响的字段深复制一遍，不受影响的字段复用而不是深复制，结构共享，不依赖与任何库，只要有node环境就可以使用

`方法`

修改：Map(对象)、List(数组)
    合并：merge(对象)、concat(数组)

`immutable的使用`

使用Map方法包裹住需要深复制的普通对象，把这个普通对象转换为immutable对象，利用set方法修改immutable对象(只修改受影响的字段)

`1.一层深复制`

`（1）安装immutable`

cnpm i --save immutable

`（2）Map方法 -- 对象`

// 只要以改变，就利用Map把一个普通对象，转换成一个immutable对象
    const {  Map } = require('immutable')
    
    // 老状态
    let prevState = { 
      name: 'mxf',
      age: 100
    }
    
    let map = Map(prevState)
    let newMap = map.set('name', 'xiaoming')
    // map --> {"name":"mxf", "age": 100}
    // newMap --> {"name":"xiaoming", "age": 100}
    
    // 新状态，不会影响老状态
    let newState = newMap.toJS()
    // toJS() 把immutable转换成普通对象
    // prevState --> {name:"mxf", age: 100}
    // newState --> {name:"xiaoming", age: 100}

`（3）List方法 -- 数组`

// List结构所有的方法跟普通的数组方法是"类似"的
    const {  List } = require('immutable')
    
    let prevState = ['111', '222', '333']
    
    let arr = List(prevState)
    // arr --> List['111', '222', '333']
    let newArr = arr.splice(1, 1) // 不会影响老状态
    // arr --> List['111', '222', '333']
    // newArr --> List['111', '333']
    
    // 装换为普通数组
    let newState = newArr.toJS()
    // prevState --> ['111', '222', '333']
    // newState --> ['111', '333']

`（4）merge方法 -- 对象`

const {  Map } = require('immutable')
    
    let prevState = { 
      a: 1,
      roleState: false
    }
    
    let obj2 = { 
      roleState: true
    }
    
    let map = Map(prevState)
    let newMap = map.merge(obj2)
    
    let newState = newMap.toJS()
    // prevState --> { a: 1, roleState: false }
    // newState --> { a: 1, roleState: true }

`（5）concat方法 -- 数组`

const {  List } = require('immutable')
    
    let prevState = [1, 2, 3]
    let arr = [4, 5, 6]
    
    let list = List(prevState)
    let newList = list.concat(arr)
    
    let newState = newList.toJS()
    console.log(prevState, newState)
    // prevState --> [1, 2, 3]
    // newState --> [1, 2, 3, 4, 5, 6]

`2.多层深复制`

fromJS方法转换为immutable结构(setIn、update方法进行修改)，可以把复杂的数据结构进行immutable深复制。

const {  fromJS } = require('immutable')
    
    var prevState = { 
      name: 'xiaohong',
      age: 22,
      location: { 
        province: '四川',
        city: '成都',
        a: { 
          b: 1
        }
      },
      list: ['111', '222', '333']
    }
    
    // 转换为immutable结构
    var newMap = fromJS(prevState)
    /* Map { "name": 'xiaohong', "age": 22, "location": Map { "province": '四川', "city": '成都', "a": Map { "b": 1 } }, "list": List ['111', '222', '333'] } */ 
    
    // 修改第一层结构 -- 对象
    var map1 = newMap.set('name', '小明')
    
    // 修改深层的结构 -- 属性
    var map2 = newMap.setIn(['location', 'city'], '绵阳').setIn(['location', 'a', 'b'], 2)
    
    // 修改深层的结构 -- 数组(修改)
    var map3 = newMap.updateIn(['list'], data => { 
      return data.splice(1, 1, '666')
    })
    
    // 转换为普通结构
    var newState1 = map1.toJS()
    var newState2 = map2.toJS()
    var newState3 = map3.toJS()
    
    console.log(prevState, newState1)
    console.log(prevState, newState2)
    console.log(prevState, newState3)
    
    /* 打印结果： newState1： { name: 'xiaohong', age: 22, location: { province: '四川', city: '成都', a: { b: 1 } }, list: [ '111', '222', '333' ] } { name: '小明', age: 22, location: { province: '四川', city: '成都', a: { b: 1 } }, list: [ '111', '222', '333' ] } newState2： { name: 'xiaohong', age: 22, location: { province: '四川', city: '成都', a: { b: 1 } }, list: [ '111', '222', '333' ] } { name: 'xiaohong', age: 22, location: { province: '四川', city: '绵阳', a: { b: 2 } }, list: [ '111', '222', '333' ] } newState3： { name: 'xiaohong', age: 22, location: { province: '四川', city: '成都', a: { b: 1 } }, list: [ '111', '222', '333' ] } { name: 'xiaohong', age: 22, location: { province: '四川', city: '成都', a: { b: 1 } }, list: [ '111', '666', '333' ] } */