搞定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 相关文章推荐
iframe 异步加载技术及性能分析
Jul 19 Javascript
解释&&和||在javascript中的另类用法
Jul 28 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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上的memcache和memcached两个pecl库
2010/03/29 PHP
php适配器模式介绍
2012/08/14 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php动态绑定变量的用法
2015/06/16 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python和opencv实现抠图
2018/07/18 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
C语言面试题
2015/10/30 面试题
公司运动会策划方案
2014/05/25 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
科学发展观标语
2014/10/08 职场文书
2014年科室工作总结
2014/11/20 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers