zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【C#】SuperSocket配置启动UDP服务器
    【UWB】DWM1000 室内定位串口协议说明
    【Unity3D】把相机视角放置到编辑器当前位置视角
    【DXP】如何在原理图中批量修改
    request中的gizp提交解析以及提交请求
    java基础知识----循环
    pymongo.errors.CursorNotFound: Cursor not found
    xposed入门(二)---hook方法入参
    VulnHub靶场篇9-SkyTower: 1
    VulnHub靶场篇8-IMF:1
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924830.html
Copyright © 2011-2022 走看看