zoukankan      html  css  js  c++  java
  • Immutable学习及 React 中的实践

    为什么用immutable.js呢。有了immutable.js可以大大提升react的性能。

    JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失。为了解决这个问题,一般的做法是使用 shallowCopy(浅拷贝)或 deepCopy(深拷贝)来避免被修改,但这样做造成了 CPU 和内存的浪费。

    而Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享

    当state更新时,如果数据没变,也会去做virtual dom的diff,这就产生了浪费。而immutable能优化diff算法的性能。

    • Immmutable collection被当做值对待,而不是对象
    • 任何修改会返回新的immutable collection
    • 几乎所有的Array方法均可用在Immutable.List;几乎所有的Map方法均可用在Immutable.Map;几乎所有的Set方法均可用在Immutable.Set
    // 使用Immutable
    foo = Immutable.fromJS({a: {b: 1}}); //js对象转成Immutable对象 相反toJs()
    bar = foo.setIn(['a', 'b'], 2);   // 深层使用 setIn 赋值
    console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值,打印 1
    console.log(foo === bar);  //  打印 false
    • 如果js对象想map遍历,可以利用Immutable的Seq高效实现。 
      Seq只执行需要的工作,不会创建Immuntable缓存数组。任何数据可以通过toSeq()转换为lasy Seq格式
    var myObject = {a:1,b:2,c:3};
    Immutable.Seq(myObject).map(x => x * x).toObject();
    // { a: 1, b: 4, c: 9 }
    • Immutable的Map对象和原生js对象可以无痛合并
    // 合并merge 
    var map1 = Immutable.Map({a:1, b:2, c:3, d:4});
    var map2 = Immutable.Map({c:10, a:20, t:30});
    var obj = {d:100, o:200, g:300};
    console.log(map1.merge(map2, obj).toJS()); // Map{}

      // Map
      var obj1 = Immutable.Map({a:1, b:2, c:3});
      var obj2 = obj1.set('b', 50); // set
      console.log(obj1.get('b'),obj2.get('b')); // get 2 50
      var alpha = Immutable.Map({a:1, b:2, c:3, d:4});
      console.log(alpha.map((v, k) => k.toUpperCase()).join());// 'A,B,C,D'

      // List
      const list = Immutable.List([ 'a', 'b', 'c' ])
      const result = list.update(2, val => val.toUpperCase())
      console.log("===>",result.toJS())

    
    
    • js对象转换为Immutable时,属性都是String类型的。而Immutable.Map接受任何类型,所以get方法不建议使用
    var map = Immutable.fromJS(obj);
    map.get("1"); // "one"
    map.get(1);   // undefined
    • 针对嵌套数据的处理方法,mergeDeep/getIn/setIn/updateIn是最常用的方法。
    var nested2 = nested.mergeDeep({a:{b:{d:6}}});
    // Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 6 } } }
    nested2.getIn(['a', 'b', 'd']); // 6
    
    var nested3 = nested2.updateIn(['a', 'b', 'd'], value => value + 1);
    // Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }
    
    var nested4 = nested3.updateIn(['a', 'b', 'c'], list => list.push(6));
    // Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }

     react中使用immutable

      getInitialState() {
        return {
          data: Map({ times: 0 })
        }
      },
      handleAdd() {
        this.setState({ data: this.state.data.update('times', v => v + 1) });
        // 这时的 times 并不会改变
        console.log(this.state.data.get('times'));
      }

    immutable+flux

    this.state={
    searcnfinanceTypeListAll:  Immutable.fromJS([])
    }
    
    changeState=()=>{
    this.setState({searcnfinanceTypeListAll:Immutable.fromJS(typeList)});
    }

     建议把 this.state 写成 Immutable 对象 

  • 相关阅读:
    Linux动态链接(4)ldd与ldconfig
    Linux动态链接(3)so文件映射地址
    Linux动态链接(2)so初始化执行
    Linux动态链接(1)惰性链接
    kill信号由谁接收处理
    gdb调试器之"测不准原则"
    gdb动态库延迟断点及线程/进程创建相关事件处理(下)
    gdb动态库延迟断点及线程/进程创建相关事件处理(上)
    Redis集群,备份,哨兵机制
    hyper-v虚拟机centos7网络配置
  • 原文地址:https://www.cnblogs.com/cosyer/p/7367942.html
Copyright © 2011-2022 走看看