位置: 编程技术 - 正文

搞定immutable.js详细说明

编辑:rootadmin

推荐整理分享搞定immutable.js详细说明,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

什么是Immutable Data

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

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

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

deep clone

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

主角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是个好东西,我们可以用它来解决一部分的上述问题,但是如果你留心的话,你可以在文档中看到下面这段提示。

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

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

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

参考

React.js Conf - Immutable Data and React

Immutability Helpers

PureRenderMixin

immutable-js

JS基于clipBoard.js插件实现剪切、复制、粘贴 摘要:最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现

深入浅析Bootstrap列表组组件 Bootstrap,来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。列表组是灵活又强大的组件,

原生JS封装Ajax插件(同域、jsonp跨域) 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢?最近都在做原生JS熟悉的练习。。。用原生Js封装了一个Ajax插件,引入一般的项目,传

标签: 搞定immutable.js详细说明

本文链接地址:https://www.jiuchutong.com/biancheng/369934.html 转载请保留说明!

上一篇:Immutable 在 JavaScript 中的应用

下一篇:JS基于clipBoard.js插件实现剪切、复制、粘贴(js基于什么语言)

  • 建筑业收到预收款预缴增值税
  • 发票丢失的税务处罚
  • 从税法经济法角度分析冰冰偷漏税事件?
  • 小规模纳税人进货分录
  • 用友 项目核算
  • 增值税扣费
  • 社保免征还需要申报吗
  • 一般纳税人企业所得税政策最新2023税率
  • 互联网公司成本包括哪些
  • 季报申报之后还可以改吗?
  • 自制原始凭证和原始凭证的区别
  • 应付账款的核算会计分录
  • 工会应付下级经费
  • 电子承兑汇票付款流程
  • 应交税金减免税金需要结转吗
  • 符合营改增应税服务规定的有
  • 酒店住宿费一般多少钱一晚
  • 煤炭企业税收政策
  • 单位固定资产出售账务处理
  • 管理费用明细是什么意思
  • 准予抵扣的进项税额有哪些
  • 预定机票如何正常退票
  • 员工休产假期间公司发工资吗
  • 银行承兑汇票的付款期限
  • PHP:ftp_rename()的用法_FTP函数
  • 医院装修设计费一般多少钱一平方
  • windows环境下,ping的功能和使用方法
  • 企业常见的筹资方式有几种
  • 无法按时交纳税怎么办
  • 季度报表本期金额和累计金额
  • 企业购进的商品是什么
  • php+vue
  • dede转zblog
  • Laravel 5.3 学习笔记之 安装
  • ethtool-g
  • 业务招待费能计入成本吗
  • 广告公司纳税人类型
  • 企业自建办公楼需要开发资质吗
  • python socketio
  • 个体户增值税减免申报明细表怎么填
  • 专项附加扣除批量上传怎么上传
  • 平台收取佣金开什么发票
  • 收到返款计入什么科目
  • 有形动产租赁服务属于现代服务吗
  • 空调维修保养方案
  • 以红字冲回
  • 困难行业企业包括哪四大类
  • 无息的银行承兑汇票
  • 按次缴纳的个人所得税
  • 毁损的原材料怎么处理
  • 应计入营业外支出的有哪些
  • 报告日前损益调整
  • 高新技术企业的税收优惠政策
  • 公司帐户转到法人账户
  • 企业的案例分析报告
  • 未开票收入怎么填写增值税申报表
  • 私对公可以转账怎么转
  • 隔离模块与隔离模块如何连接?
  • win7系统的设置在哪里设置
  • mac book丢失
  • windowsaudio服务不存在或已删除
  • win10桌面添加画图图标
  • linux0.01编译
  • centos sh
  • jQuery+Ajax实现无刷新分页
  • 各浏览器网址
  • shell中数组如何定义
  • NGUI之UITab Bar的不能将Sprite与SelectedSprite设置成相同的精灵
  • jQuery checkbox选中问题之prop与attr注意点分析
  • python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
  • unity2d shader
  • nodejs微信公众号开发
  • node.js deno
  • nodejs基础教程
  • js基本代码
  • Python线程进程协程
  • 农商银行股权分红如何计算
  • 药店迁址流程2019
  • 免税饲料发票怎么开具
  • 如何查询甘肃省志愿录取状态
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设