Immutable

Coly 發(fā)布于2019-08-23 13:56 / 3490人閱讀

摘要：如果實現(xiàn)了結構共享，每次的新值共享內部結構以大幅減少內存占用。這意味著，如果對一個進行賦值次，并不會創(chuàng)建倍大小的內存占用數(shù)據(jù)。消除了流經(jīng)系統(tǒng)的精神負擔。代價是編寫風格將顛覆式的完全不同。會帶來很多無必要的渲染并成為性能瓶頸。

Part01 Immutable由何而生

說immutable之前，首先看下什么是mutable。js在原生創(chuàng)建數(shù)據(jù)類型即是mutable，可變的。
const只是淺層次的防篡改，層級一深就沒轍了。

js在創(chuàng)建變量、賦值后是可變的。除了基本類型，其他的引用類型，通過變量地址來共享。
改變了obj1.a的值，同時也會改變obj.a的值。其實改變的是同一個對象引用。這樣共享地址來共享值的好處是節(jié)省內存，壞處是稍微不注意就會導致改A壞B的棘手問題。

Deep Copy？No！

一般的解法就是使用深拷貝而非淺拷貝，生成一份基本類型值完全相同但是沒有共享地址的數(shù)據(jù)，除了浪費內存之外，深拷貝復雜引用類型時需要深度遍歷，這樣的做法在React這樣頻繁更新數(shù)據(jù)和對數(shù)據(jù)更新性能有要求的場景，深拷貝是一個不優(yōu)雅不推薦，say no的選擇。
那怎么做呢，這個時候Immutable就可以閃亮登場解決這個問題，為什么呢？

Part02 Immutable是個什么

相對于mutable，Immutable就是在創(chuàng)建變量、賦值后便不可更改，若對其有任何變更,就會回傳一個新值

Immutable只是一個定義，有各種實現(xiàn)，Immutable.js就是facebook工程師實現(xiàn)js的Immutable歷時三年的燒腦之作。甚至有些語言天生就是不可變數(shù)據(jù)結構，比如國內react的早期先驅題葉極力推崇的ClojureScript。
每次返回新值，大家可能會覺得性能也并不好啊，又占內存之類的。如果實現(xiàn)了結構共享，每次的新值共享內部結構以大幅減少內存占用。這意味著，如果對一個Immutable進行賦值1000次，并不會創(chuàng)建1000倍大小的內存占用數(shù)據(jù)。

與原生JS的mutable語義強烈沖突

除非從零開始一個項目，不然這種使用導致我們可能用混，第三方庫也只支持原生js對象。
我們需要采用一些手段來規(guī)避用混。

使用類型系統(tǒng)，TypeScript或Flow。消除了Immutable流經(jīng)系統(tǒng)的精神負擔。代價是編寫風格將顛覆式的完全不同。

隱藏有關數(shù)據(jù)結構的詳細信息。如果您在系統(tǒng)的特定部分使用Immutable.js，請不要在其外部進行任何操作直接訪問數(shù)據(jù)結構。一個很好的例子是Redux，它是單原子app狀態(tài)。如果app狀態(tài)是Immutable.js對象，請不要強制React組件直接使用Immutable.js的API。

https://codesandbox.io/s/yq872yrlnx

真正的結構共享vs對象代理的偽實現(xiàn)

結構共享是指沒有改變的數(shù)據(jù)共用一個引用，這樣既減少了深拷貝的性能消耗，也減少了內存。

extend https://reactjs.org/docs/update.html

Part03 怎么用 與React搭配使用，關鍵點是shouldComponentUpdate

熟悉 React 的都知道，React 做性能優(yōu)化時有一個避免重復渲染的大招，就是使用?shouldComponentUpdate()，但它默認返回?true，即始終會執(zhí)行?render()?方法，然后做 Virtual DOM 比較，并得出是否需要做真實 DOM 更新，盡管React的虛擬算法復雜度已經(jīng)有了很多優(yōu)化，但是在大規(guī)模組件更新時，依然會是個不必要的損耗。會帶來很多無必要的渲染并成為性能瓶頸。
我們常用的Purecomponent的秘密其實是在shouldComponentUpdate中做了前后state和props的淺比較，如果不小心組件props的引用問題，這里會導致出現(xiàn)很多Bug。
雖然第一層數(shù)據(jù)沒變，但引用變了，就會造成虛擬?DOM?計算的浪費。
第一層數(shù)據(jù)改變，但引用沒變，會造成不渲染，所以需要很小心的操作數(shù)據(jù)。

Object.assign可以實現(xiàn)不可變數(shù)據(jù),唯一的就是性能問題 Part04 怎么實現(xiàn) seamless-immutable

Object.freeze防止對象被修改
https://developer.mozilla.org...

function makeImmutable(obj, bannedMethods) {
  // 在對象上打上immutabilityTag標記即表示對象不可變
  addImmutabilityTag(obj);

  if (process.env.NODE_ENV !== "production") {
    // 讓所有導致對象改變的方法在調用時拋出錯誤
    for (var index in bannedMethods) {
      if (bannedMethods.hasOwnProperty(index)) {
        banProperty(obj, bannedMethods[index]);
      }
    }
    // 凍結對象
    Object.freeze(obj);
  }
  return obj;
}

確保對象不可變的分三步：

打上immutabilityTag標記；

禁用會導致對象改變的方法；

凍結對象。

Immutable-js

精讀 Immutable 結構共享 https://juejin.im/entry/59b5e...

深入探究Immutable.js的實現(xiàn)機制 https://juejin.im/post/5b9b30...

了解Clojure的持久變量 https://hypirion.com/musings/...

完結

（此文由PPT摘抄完成）PPT鏈接

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99801.html

Immutable源碼解析與性能優(yōu)化

摘要：修改的節(jié)點和該父級鏈路上都變成新的對象顯然是最優(yōu)方案。如果你對比的兩個中，一個被過，另一個數(shù)據(jù)又是由其衍生出來的，那效率將是最高的算法的原理與優(yōu)化檢測本地中是否存在已過當前對象字符串。 Immutable原理解析簡介 what is Immutable 1.不可變,一成不變的 2.對immutable數(shù)據(jù)的每次修改操作都會返回一個新的data 掏出一副老生常談的圖 showImg(h...

233jl 2019-08-21 17:46 評論0 收藏0
React-redux進階之Immutable.js

摘要：的優(yōu)勢保證不可變每次通過操作的對象都會返回一個新的對象豐富的性能好通過字典樹對數(shù)據(jù)結構的共享的問題與原生交互不友好通過生成的對象在操作上與原生不同，如訪問屬性，。 Immutable.js Immutable的優(yōu)勢 1. 保證不可變（每次通過Immutable.js操作的對象都會返回一個新的對象） 2. 豐富的API 3. 性能好（通過字典樹對數(shù)據(jù)結構的共享） Immutab...

孫淑建 2019-08-23 15:09 評論0 收藏0
React系列之 Immutable

摘要：原文地址什么是是指一旦被創(chuàng)建就不可以被改變的數(shù)據(jù)，通過使用不可變數(shù)據(jù)可以讓我們很方便的去處理數(shù)據(jù)的狀態(tài)變化檢測等問題，而且讓我們的程序變得更加的可預見怎么用大體使用深度轉換和為和淺轉換給倒數(shù)第一個賦值更多可以查看這里為什么要用其實從上面原文地址：https://gmiam.com/post/react-... 什么是 Immutable Data ？ Immutable Data 是...

cc17 2019-08-20 11:11 評論0 收藏0
微信小程序開發(fā)實戰(zhàn)——使用Immutable.js

摘要：是開發(fā)的不可變數(shù)據(jù)集合。微信小程序無法直接使用進行調用需要對下載的代碼進行修改才能使用。原因分析使用了模塊化規(guī)范的實現(xiàn)很簡單，先判斷是否支持模塊規(guī)范，存在則使用方式加載模塊。通過測試，微信小程序運行環(huán)境并沒有定義。 Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應用開發(fā)更簡單，允許使用函數(shù)式編程技術，比如惰性評估。Immutable...

邱勇 2019-08-20 11:17 評論0 收藏0
筆記, immutable-js 基礎操作

摘要：這篇文章是一些操作的整理目前只有基本的操作文檔請查看使用過程中遇到的寫法我會不會增加在后邊當中不可變數(shù)據(jù)有點不適應需要借鑒一些中的內容更新六月份到十月份我們完成了不可變數(shù)據(jù)的重構配合簡聊的巨大的單一可以整理出來一些常用的方法示例代碼用的是這篇文章是 immutable-js 一些操作的整理, 目前只有基本的操作:文檔請查看: http://facebook.github.io/imm...

alexnevsky 2019-08-21 10:33 評論0 收藏0