ImmutableJS

沈俭发布于2019-08-20 16:32 / 2874人阅读

摘要：持久化数据提供可修改的，这些不在原地更新数据，而是产生新的更新后的数据。提供了很多持久化不可变数据结构，包括以及。也提供了惰性允许有效的方法链式操作，例如和，不用创建中介变量。

简介　JavaScript中的不可变集合

不可变数据一旦创建就不能改变，这样可简化应用开发、无防御复制、启用更先进的内存方案，以及使用更简单的逻辑检查更新。持久化数据提供可修改的API，这些API不在原地更新数据，而是产生新的更新后的数据。

Immutable.js提供了很多持久化不可变数据结构，包括： List, Stack, Map, OrderedMap, Set, OrderedSet以及Record。

这些数据结构在现代JavaScript虚拟机都非常高效的，使用的是通过hash映射以及向量尝试，和Clojure和Scala中流行的那些一样，最小化需要拷贝和缓存的数据。

Immutable.js也提供了惰性Seq, 允许有效的方法链式操作，例如map和filter，不用创建中介变量。使用Range和Repeat创建一些Seq。

更多的信息，可参阅Immutable.js官网。

以上是从官网上翻译过来的一段描述文字。下面将从代码的层面进行简单剖析。

　Immutable.js源码分析

源码地址为：https://github.com/facebook/i...。对于JavaScript包来说，首先我们可以先看看package.json文件，看看构建相关的脚本命令以及做了哪些操作。

...
  "main": "dist/immutable.js",
  "typings": "dist/immutable-nonambient.d.ts",
  "typescript": {
    "definition": "dist/immutable.d.ts"
  },
  "scripts": {
    "build": "run-s build:*",
    "build:dist": "run-s clean:dist bundle:dist copy:dist stats:dist",
    "build:pages": "gulp --gulpfile gulpfile.js default",
    "stats:dist": "node ./resources/dist-stats.js",
    "clean:dist": "rimraf dist",
    "bundle:dist": "rollup -c ./resources/rollup-config.js",
...

通过npm install immutable安装这个包之后，我们在引入这个包的时候，实际上定位的文件是dist/immutable.js, 如果使用TypeScript定义信息，对应于dist/immutable.d.ts。

然后看看scripts部分，可以看到build是构建目标代码的命令，这里使用了run-s build:*。

这里我们使用的是npm-run-all。这里我们只需要知道，这个命令可以并行或串行的运行一系列的npm脚本就行了。更详细的介绍，直接进它里边的github页面进行查看即可。

npm run build执行三件事，打包源代码到dist/immutable.js中，复制TS定义到dist/immutable.t.ds, 最后还做了dist-stats。

其中构建目标代码这块使用的rollup打包工具实现的，暂时不深入rollup的详细信息，感兴趣的可以参考后面的连接。

这里我们是将src中的源代码Immutable.js打包到dist/immutable.js中去。

src项目结构

+-- utils 工具包
|-- Collection.js    Collection数据结构
|-- CollectionImpl.js    
|-- Hash.js    
|-- Immutable.js  该包的主文件
|-- Iterator.js    
|-- List.js
|-- Map.js
|-- Math.js
|-- Operations.js
|-- OrderedMap.js
|-- OrderedSet.js
|-- Predicates.js
|-- Range.js
|-- Record.js
|-- Repeat.js
|-- Seq.js
|-- Set.js
|-- Stack.js
|-- TrieUtils.js
|-- fromJS.js
|-- is.js

　关键词

不可变数据: Immutable Data

无防护数据拷贝: no defensive copy

先进内存方案: advanced memoization

检测更新技术: change detection techniques

未完待续...... 参考链接

Immutable详解及React中实践

Immutable.js

rollup

GPU云服务器云服务器 ImmutableJS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82981.html

React 的性能优化（一）当 PureComponent 遇上 ImmutableJS

摘要：四是在年出的持久性数据结构的库，持久性指的是数据一旦创建，就不能再被更改，任何修改或添加删除操作都会返回一个新的对象。避免大量使用操作，这样会浪费性能。尽量将设计成扁平状的。一、痛点在我们的印象中，React 好像就意味着组件化、高性能，我们永远只需要关心数据整体，两次数据之间的 UI 如何变化，则完全交给 React Virtual Dom 的 Diff 算法去做。以至于我们很...

plus2047 2019-08-21 16:50 评论0 收藏0
【腾讯Bugly干货分享】React 移动 web 极致优化

摘要：数据管理及性能优化统一管理数据这一部份算是重头戏吧。重复渲染导致卡顿这套的东西在家校群页面上用得很欢乐，以至于不用怎么写都没遇到过什么性能问题。但放到移动端上，我们在列表页重构的时候就马上遇到卡顿的问题了。列表页目前的处理办法是将值换成。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57908... 最近一个季度...

suosuopuo 2019-08-21 10:54 评论0 收藏0
精读《React 的多态性》

摘要：引言本周精读的文章是，看看作者是如何解释这个多态性含义的。读完文章才发现，文章标题改为的多态性更妥当，因为整篇文章都在说，而使用场景不局限于。更多讨论讨论地址是精读的多态性如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1 引言本周精读的文章是：surprising-polymorphism-in-react-applications，看看作者是如何解释这个多态性含...

tabalt 2019-08-22 18:27 评论0 收藏0
看redux的一些笔记

摘要：不只为组件提供中的数据及扩展方法，它还为定义的组件添加了一系列事件操作，这些事件的核心点就是，然后可以在自己定义的组件内获得。行为功能是对目的功能和有用行为的一种抽象。下一个中间件函数通常由名为的变量来表示。 redux 这个是好久之前写的，一直忘记粘过来，里面有一些是写作格式是我自己定义的，所以和segmentfault的markdown语法有出入，图片也不能加载，所以原文效果可以在...

el09xccxy 2019-08-21 11:39 评论0 收藏0