搞定immutable.js详细说明


Posted in Javascript onMay 02, 2016

什么是Immutable Data

Immutable Data是指一旦被创造后,就不可以被改变的数据。

通过使用Immutable Data,可以让我们更容易的去处理缓存、回退、数据变化检测等问题,简化我们的开发。

js中的Immutable Data
在javascript中我们可以通过deep clone来模拟Immutable Data,就是每次对数据进行操作,新对数据进行deep clone出一个新数据。

deep clone

/**
 * learning-immutable - clone-deep.js
 * Created by mds on 15/6/6.
 */

'use strict'; 
var cloneDeep = require('lodash.clonedeep');

var data = { 
 id: 'data',
 author: {
  name: 'mdemo',
  github: 'https://github.com/demohi'
 }
};

var data1 = cloneDeep(data);

console.log('equal:', data1===data); //false

data1.id = 'data1'; 
data1.author.name = 'demohi';

console.log(data.id);// data 
console.log(data1.id);// data1

console.log(data.author.name);//mdemo 
console.log(data1.author.name);//demohi

当然你或许意识到了,这样非常的慢。如下图,确实很慢

搞定immutable.js详细说明

主角immutable.js登场

immutable.js是由facebook开源的一个项目,主要是为了解决javascript Immutable Data的问题,通过参考hash maps tries 和 vector tries提供了一种更有效的方式。

简单的来讲,immutable.js通过structural sharing来解决的性能问题。我们先看一段视频,看看immutable.js是如何做的

搞定immutable.js详细说明

当我们发生一个set操作的时候,immutable.js会只clone它的父级别以上的部分,其他保持不变,这样大家可以共享同样的部分,可以大大提高性能。

为什么你要在React.js中使用Immutable Data

熟悉React.js的都应该知道,React.js是一个UI = f(states)的框架,为了解决更新的问题,React.js使用了virtual dom,virtual dom通过diff修改dom,来实现高效的dom更新。

听起来很完美吧,但是有一个问题。当state更新时,如果数据没变,你也会去做virtual dom的diff,这就产生了浪费。这种情况其实很常见,可以参考flummox这篇文章

当然你可能会说,你可以使用PureRenderMixin来解决呀,PureRenderMixin是个好东西,我们可以用它来解决一部分的上述问题,但是如果你留心的话,你可以在文档中看到下面这段提示。

This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.

PureRenderMixin只是简单的浅比较,不使用于多层比较。那怎么办??自己去做复杂比较的话,性能又会非常差。

方案就是使用immutable.js可以解决这个问题。因为每一次state更新只要有数据改变,那么PureRenderMixin可以立刻判断出数据改变,可以大大提升性能。这部分还可以参考官方文档Immutability Helpers

总结就是:使用PureRenderMixin + immutable.js

参考

React.js Conf 2015 - Immutable Data and React

Immutability Helpers

PureRenderMixin

immutable-js

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
js实现3D图片展示效果
Mar 09 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
Immutable 在 JavaScript 中的应用
May 02 #Javascript
基于javascript数组实现图片轮播
May 02 #Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 #Javascript
bootstrap3 兼容IE8浏览器!
May 02 #Javascript
javascript实现列表切换效果
May 02 #Javascript
基于javascript编写简单日历
May 02 #Javascript
Bootstrap媒体对象的实现
May 01 #Javascript
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php 执行系统命令的方法
2009/07/07 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python让列表倒序输出的实例
2018/06/25 Python
详解python运行三种方式
2019/05/13 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python flask中动态URL规则详解
2019/11/22 Python
python with (as)语句实例详解
2020/02/04 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python批量修改交换机密码的示例
2020/09/22 Python
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
应聘护士自荐信
2013/10/21 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2015年副班长工作总结
2015/05/15 职场文书
Python中如何处理常见报错
2022/01/18 Python