react immutable

map list fromjs setin updatain

immutable

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

是一种持久化数据。它有一旦被创建就不会被修改的特性。
当你修改 immutable 对象的时候返回新的 immutable。但是原数据不会改变。

npm i immutable -S

import { Map,fromJS,List,toJS} from 'immutable'

Map() 原生object转Map对象 (只会转换第一层，注意和fromJS区别)

let map = Map({name:"Apple",age:19,sex:"男"})
const [person,setPerson] = useState(map)
{person.get('name')}//获取属性

const change = () => {

setPerson(person.set('name', 'sb')) //改变属性值

}

<button onClick={change}>name</button>

//List()  原生array转List对象 (只会转换第一层，注意和fromJS区别)

let arr=[1,2,3,4,5]

const [list, setList] = useState(arr)

<ul>

{list.map((item,index)=>

<li key={index}>{item}</li>

)}

</ul>

//fromJS()   原生js转immutable对象  (深度转换，会将内部嵌套的对象和数组所有转成immutable)

immutable.fromJS([1,2,3,4,5])    //将原生array  --> List
immutable.fromJS({name:'danny', age:18})   //将原生object  --> Map

//Map()  原生object转Map对象 (只会转换第一层，注意和fromJS区别)
immutable.Map({name:'danny', age:18})
 
//List()  原生array转List对象 (只会转换第一层，注意和fromJS区别)
immutable.List([1,2,3,4,5])
 
//fromJS()   原生js转immutable对象  (深度转换，会将内部嵌套的对象和数组所有转成immutable)
immutable.fromJS([1,2,3,4,5])    //将原生array  --> List
immutable.fromJS({name:'danny', age:18})   //将原生object  --> Map
 
//toJS()  immutable对象转原生js  (深度转换，会将内部嵌套的Map和List所有转换成原生js)
immutableData.toJS();
 
//查看List或者map大小  
immutableData.size  或者 immutableData.count()
 
// is()   判断两个immutable对象是否相等
immutable.is(imA, imB);
 
//merge()  对象合并
var imA = immutable.fromJS({a:1,b:2});
var imA = immutable.fromJS({c:3});
var imC = imA.merge(imB);
console.log(imC.toJS())  //{a:1,b:2,c:3}
 
//增删改查（全部操做都会返回新的值，不会修改原来值）
var immutableData = immutable.fromJS({
    a:1,
    b:2,
    c:{
        d:3
    }
});

var data1 = immutableData.get('a') //  data1 = 1  
var data2 = immutableData.getIn(['c', 'd']) // data2 = 3   getIn用于深层结构访问
var data3 = immutableData.set('a' , 2);   // data3中的 a = 2
var data4 = immutableData.setIn(['c', 'd'], 4);   //data4中的 d = 4
var data5 = immutableData.update('a',function(x){return x+4})   //data5中的 a = 5
var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4})   //data6中的 d = 7
var data7 = immutableData.delete('a')   //data7中的 a 不存在
var data8 = immutableData.deleteIn(['c', 'd'])   //data8中的 d 不存在