搞定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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
简单实现js上传文件功能
Aug 21 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
package.json中homepage属性的作用详解
Mar 11 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程序
2006/10/09 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python简易版停车管理系统
2019/08/12 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
劳动实践课感言
2014/02/01 职场文书
防沙治沙典型材料
2014/05/07 职场文书
学习党代会心得体会
2014/09/05 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server