数据可变性的问题是什么呢?例如浅拷贝,会影响原值
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只进行浅层转化