摘要:持久化数据提供可修改的,这些不在原地更新数据,而是产生新的更新后的数据。提供了很多持久化不可变数据结构,包括以及。也提供了惰性允许有效的方法链式操作,例如和,不用创建中介变量。
简介 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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82981.html
摘要:四是在年出的持久性数据结构的库,持久性指的是数据一旦创建,就不能再被更改,任何修改或添加删除操作都会返回一个新的对象。避免大量使用操作,这样会浪费性能。尽量将设计成扁平状的。 一、痛点 在我们的印象中,React 好像就意味着组件化、高性能,我们永远只需要关心数据整体,两次数据之间的 UI 如何变化,则完全交给 React Virtual Dom 的 Diff 算法 去做。以至于我们很...
摘要:数据管理及性能优化统一管理数据这一部份算是重头戏吧。重复渲染导致卡顿这套的东西在家校群页面上用得很欢乐,以至于不用怎么写都没遇到过什么性能问题。但放到移动端上,我们在列表页重构的时候就马上遇到卡顿的问题了。列表页目前的处理办法是将值换成。 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57908... 最近一个季度...
摘要:引言本周精读的文章是,看看作者是如何解释这个多态性含义的。读完文章才发现,文章标题改为的多态性更妥当,因为整篇文章都在说,而使用场景不局限于。更多讨论讨论地址是精读的多态性如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。 1 引言 本周精读的文章是:surprising-polymorphism-in-react-applications,看看作者是如何解释这个多态性含...
摘要:不只为组件提供中的数据及扩展方法,它还为定义的组件添加了一系列事件操作,这些事件的核心点就是,然后可以在自己定义的组件内获得。行为功能是对目的功能和有用行为的一种抽象。下一个中间件函数通常由名为的变量来表示。 redux 这个是好久之前写的,一直忘记粘过来,里面有一些是写作格式是我自己定义的,所以和segmentfault的markdown语法有出入,图片也不能加载,所以原文效果可以在...
阅读 2152·2021-11-15 11:36
阅读 1460·2021-09-23 11:55
阅读 2485·2021-09-22 15:16
阅读 2027·2019-08-30 15:45
阅读 1861·2019-08-29 11:10
阅读 1024·2019-08-26 13:40
阅读 914·2019-08-26 10:44
阅读 3167·2019-08-23 14:55