• React----immutable的使用


    immutable
      Immutable Data 一旦创建,就不能再被更改的数据。对 Immutable 对象的任何增删改操作都会返回一个新的 Immutable 对象;实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变;同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。
      方法可以链式调用
     
    常用的有:
    • Map:键值对集合,对应于 Object,ES6 也有专门的 Map 对象
    • List:有序可重复的列表,对应于 Array
    • Set:无序且不可重复的列表
         Map、List(Map、List只能创建一层的immutable对象结构)
    转换:

            toObject()  转成原生js对象类型,只转一层  例如:map1. toObject() 

        toArray()  转成数组类型,只转一层 例如: list1.toArray() 

    深层次转换:耗性能,尽量少用!
            toJS() 将immutable对象深层次转换成原生js的对象 例如:map1. toJS()
            fromJS() 将原生的js对象obj深层次转换成immutable形式的对象  例如:fromJS(obj)
     
    创建Map数据结构:
    const map1 = immutable.fromJS({
        a:1,
        b:2,
        c:3,
        obj:{
             name:"张三"
        },
        arr:[1,2,3,4,5]
    })

    创建list数据结构:
    const list = immutable.List([1,2,3,4,5])
    比较2个immutable对象是否相同:immutable.is(map1,map2)或者map1.equals(map2)
    const map1 = immutable.Map({a:1,b:2})
    const map2 = map1.update("a",(x)=>x = 10);
    console.log(immutable.is(map1,map2))  //true
    console.log(map1.equals(map2))  //true
    console.log(map1==map2)  //false
     
    增set/setIn
    const map2 = map1.set("d",100);
    const map2 = map1.setIn(["d","age"],200)

    删delete/deleteIn
    const map2 = map1.delete("a");
    const map2 = map1.deleteIn(["obj","name"])

    改update/updateIn
    const map2 = map1.update("a",(x)=>x = 200);
    const map2 = map1.updateIn(["a"],(x)=>x = 200);

    查get/getIn
    const str = map1.get("a");
    const str = map1.getIn(["a"]);

    遍历map
    map1.map((item,index)=>{
        console.log(item)
    })
    list1.map((item,index)=>{
        console.log(item)
    })
    过滤filter
    map1.filter((key,val)=>{
        return val == 1
    })  //Map{a:1}
     
    const list1 = immutable.List([1,2,3,["a","b"]]);
    增set/setIn/push
    const list2 = list1.push(100);

    删delete/deleteIn/splice
    const list2 = list1.splice(1,1);

    删除Map中多个key值deleteAll([key1,key2]) (Map独有,List没有)


    改splice
    const list2 = list1.splice(2,1,"aaa");

    查get/getIn
    const list2 = list1.getIn([3,0]);
     
    浅合并数据merge:新旧数据对比,不存在则增加,已存在则覆盖
    const newlist = list1.merge(list2);
     
    清除所有数据clear()
     
    查看immutable对象长度 size / count()
    console.log(newlist.size);
    console.log(newlist.count());
     
    判断一个数据结构是不是List/Map类型:List.isList()Map.isMap() 
    List.isList([]); // false
    List.isList(List()); // true

    判断是否存在某一个key:has(key) 、 hasIn([key])
    判断是否存在某一个value:includes(value)

    注意:以上方法中,方法名未加In的都是单层查找,加了In可深层次向下继续查找!

    List操作:以下几个只适用于List

    (1)前增unshift   后增push()   前删shift   后删pop()  插入insert(index,value)  设置长度 setSize(n) 查找下标对应值indexOf() 截取slice(first,end) 包含开始不包含结尾

    (2)查找满足条件的元素的value值find() 、 findLast()

    Immutable.fromJS([1,2,3,4]).find((value,index,array)=>{
      return value%2 === 0;
    })  // 2

    (3)查找满足要求的元素的index值findIndex()  findLastIndex() 

    Immutable.fromJS([1,2,3,4]).findIndex((value,index,array)=>{
      return value%2 === 0;
    })   // 1
    (4)跳过第n个 skip(n) 跳过第n个的后几个 skipLast()
    Immutable.fromJS([1, 2, 3, 4]).skip(1)//[2,3,4]
    (5)返回前n个 take(n) 返回后n个 takeLast()
    Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]
    (6)按索引升序 reduce() 降序 reduceRight()
    Immutable.fromJS([1,2,3,4]).reduce((pre,next,index,arr)=>{
      console.log(pre+next)
      return pre+next; 
    }) // 3 6 10
  • 相关阅读:
    WebService是什么?以及工作原理
    分布锁的问题?
    反射是什么?原理?作用?
    HTTP/1.1与HTTP/1.0的区别
    Ajax的跨域问题(包括解决方案)?
    SVN与Git优缺点比较
    类的加载过程?
    B树, B-树,B+树,和B*树的区别
    Linux常用的50个命令
    权限模型
  • 原文地址:https://www.cnblogs.com/snowstorm22/p/10559687.html
Copyright © 2020-2023  润新知