ImmutableJS

沈儉發布于2019-08-20 16:32 / 2919人閱讀

摘要：持久化數據提供可修改的，這些不在原地更新數據，而是產生新的更新后的數據。提供了很多持久化不可變數據結構，包括以及。也提供了惰性允許有效的方法鏈式操作，例如和，不用創建中介變量。

簡介　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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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