• immutable.js实例


    Shared mutable state is the root of all evil(共享的可变状态是万恶之源)

    -- Pete Hunt

    有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的,下面我们来一探究竟。

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

    Immutable 可以很好地解决这些问题。

    什么是 Immutable Data

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>immutable.js实例</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <script src="https://cdn.bootcss.com/immutable/4.0.0-rc.9/immutable.min.js"></script>
    <script type="text/javascript">
    // 原来的写法
    var foo = {a: {b: 1}};
    var bar = foo;
    bar.a.b = 2;
    console.log(foo.a.b);  // 打印 2
    console.log(foo === bar);  //  打印 true
    
    // 使用 immutable.js 后
    var foo = Immutable.fromJS({a: {b: 1}});
    var bar = foo.setIn(['a', 'b'], 2);   // 使用 setIn 赋值
    console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值,打印 1
    console.log(foo === bar);  //  打印 false     
    </script>
    </body>
    </html>

    参考链接:https://github.com/camsong/blog/issues/3

  • 相关阅读:
    开发时需要安装的插件
    update svn cache 慢
    eclipse cut copy paste plugin
    eclipse怎么自定义工具栏
    Eclipse Class Decompiler——Java反编译插件(转)
    2014年下半年软考系统架构设计师考试试题
    IT痴汉的工作现状36-做好准备再上路
    JSP简单练习-EL获取表单数据
    !HDU 1078 FatMouse and Cheese-dp-(记忆化搜索)
    iOS百度地图
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924830.html
Copyright © 2020-2023  润新知