数据可变性问题之immutable的使用

数据可变性的问题是什么呢？例如浅拷贝，会影响原值

immutable的特点是只要修改了对象，就会返回一个新的对象,旧的对象不会发生改变

我们先引入和定义immutable

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

const im = Immutable

看一个例子:

const info ={
    name:'james',
    age:35,
    friend:{
      name:'kobe',
      age:18
    }
  }

  const info2 = info
  info.name ='haha'
  console.log(info,info2)

不用说，info和info2肯定name都改变了

当我们使用Immutable之后

  const infoIm = im.Map(info)
  const info3 = infoIm
  const newObj =  infoIm.set('name','lsh')
  console.log(info3.get('name'))
  console.log(newObj.get('name'))

修改newObj中的name之后，原info3里面name没改变

再来看下数组

  const names = ['abc','cba','nba']
  const arr = names
  names[0] = 'lsh'
  console.log(arr,names)

同时改变了

使用Immutable后

  const namesIM = im.List(names)
  const arr = namesIM.set(0,'kuba')
  console.log(namesIM.get(0))
  console.log(arr.get(0))

再来看一下immutable中另外一个属性:fromJS

const info ={
    name:'james',
    age:35,
    friend:{
      name:'kobe',
      age:18
    }
  }

我们想改变或者获取info对象里面的friend数组

  const infoIM = im.fromJS(info)
  console.log(infoIM.get('friend'))

这个地方要注意！

fromJS会进行深层转化,Map只进行浅层转化