摘要:如果實現了結構共享,每次的新值共享內部結構以大幅減少內存占用。這意味著,如果對一個進行賦值次,并不會創建倍大小的內存占用數據。消除了流經系統的精神負擔。代價是編寫風格將顛覆式的完全不同。會帶來很多無必要的渲染并成為性能瓶頸。
Part01 Immutable由何而生
說immutable之前,首先看下什么是mutable。js在原生創建數據類型即是mutable,可變的。
const只是淺層次的防篡改,層級一深就沒轍了。
js在創建變量、賦值后是可變的。除了基本類型,其他的引用類型,通過變量地址來共享。
改變了obj1.a的值,同時也會改變obj.a的值。其實改變的是同一個對象引用。這樣共享地址來共享值的好處是節省內存,壞處是稍微不注意就會導致改A壞B的棘手問題。
一般的解法就是使用深拷貝而非淺拷貝,生成一份基本類型值完全相同但是沒有共享地址的數據,除了浪費內存之外,深拷貝復雜引用類型時需要深度遍歷,這樣的做法在React這樣頻繁更新數據和對數據更新性能有要求的場景,深拷貝是一個不優雅不推薦,say no的選擇。
那怎么做呢,這個時候Immutable就可以閃亮登場解決這個問題,為什么呢?
相對于mutable,Immutable就是在創建變量、賦值后便不可更改,若對其有任何變更,就會回傳一個新值
Immutable只是一個定義,有各種實現,Immutable.js就是facebook工程師實現js的Immutable歷時三年的燒腦之作。甚至有些語言天生就是不可變數據結構,比如國內react的早期先驅題葉極力推崇的ClojureScript。
每次返回新值,大家可能會覺得性能也并不好啊,又占內存之類的。如果實現了結構共享,每次的新值共享內部結構以大幅減少內存占用。這意味著,如果對一個Immutable進行賦值1000次,并不會創建1000倍大小的內存占用數據。
與原生JS的mutable語義強烈沖突
除非從零開始一個項目,不然這種使用導致我們可能用混,第三方庫也只支持原生js對象。
我們需要采用一些手段來規避用混。
使用類型系統,TypeScript或Flow。消除了Immutable流經系統的精神負擔。代價是編寫風格將顛覆式的完全不同。
隱藏有關數據結構的詳細信息。如果您在系統的特定部分使用Immutable.js,請不要在其外部進行任何操作直接訪問數據結構。一個很好的例子是Redux,它是單原子app狀態。如果app狀態是Immutable.js對象,請不要強制React組件直接使用Immutable.js的API。
https://codesandbox.io/s/yq872yrlnx
真正的結構共享vs對象代理的偽實現
結構共享是指沒有改變的數據共用一個引用,這樣既減少了深拷貝的性能消耗,也減少了內存。
extend https://reactjs.org/docs/update.html
Part03 怎么用 與React搭配使用,關鍵點是shouldComponentUpdate熟悉 React 的都知道,React 做性能優化時有一個避免重復渲染的大招,就是使用?shouldComponentUpdate(),但它默認返回?true,即始終會執行?render()?方法,然后做 Virtual DOM 比較,并得出是否需要做真實 DOM 更新,盡管React的虛擬算法復雜度已經有了很多優化,但是在大規模組件更新時,依然會是個不必要的損耗。會帶來很多無必要的渲染并成為性能瓶頸。
我們常用的Purecomponent的秘密其實是在shouldComponentUpdate中做了前后state和props的淺比較,如果不小心組件props的引用問題,這里會導致出現很多Bug。
雖然第一層數據沒變,但引用變了,就會造成虛擬?DOM?計算的浪費。
第一層數據改變,但引用沒變,會造成不渲染,所以需要很小心的操作數據。
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的實現機制 https://juejin.im/post/5b9b30...
了解Clojure的持久變量 https://hypirion.com/musings/...
完結(此文由PPT摘抄完成)PPT鏈接
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/99801.html
摘要:修改的節點和該父級鏈路上都變成新的對象顯然是最優方案。如果你對比的兩個中,一個被過,另一個數據又是由其衍生出來的,那效率將是最高的算法的原理與優化檢測本地中是否存在已過當前對象字符串。 Immutable原理解析 簡介 what is Immutable 1.不可變,一成不變的 2.對immutable數據的每次修改操作都會返回一個新的data 掏出一副老生常談的圖 showImg(h...
摘要:的優勢保證不可變每次通過操作的對象都會返回一個新的對象豐富的性能好通過字典樹對數據結構的共享的問題與原生交互不友好通過生成的對象在操作上與原生不同,如訪問屬性,。 Immutable.js Immutable的優勢 1. 保證不可變(每次通過Immutable.js操作的對象都會返回一個新的對象) 2. 豐富的API 3. 性能好 (通過字典樹對數據結構的共享) Immutab...
摘要:原文地址什么是是指一旦被創建就不可以被改變的數據,通過使用不可變數據可以讓我們很方便的去處理數據的狀態變化檢測等問題,而且讓我們的程序變得更加的可預見怎么用大體使用深度轉換和為和淺轉換給倒數第一個賦值更多可以查看這里為什么要用其實從上面 原文地址:https://gmiam.com/post/react-... 什么是 Immutable Data ? Immutable Data 是...
摘要:是開發的不可變數據集合。微信小程序無法直接使用進行調用需要對下載的代碼進行修改才能使用。原因分析使用了模塊化規范的實現很簡單,先判斷是否支持模塊規范,存在則使用方式加載模塊。通過測試,微信小程序運行環境并沒有定義。 Immutable 是 Facebook 開發的不可變數據集合。不可變數據一旦創建就不能被修改,是的應用開發更簡單,允許使用函數式編程技術,比如惰性評估。Immutable...
摘要:這篇文章是一些操作的整理目前只有基本的操作文檔請查看使用過程中遇到的寫法我會不會增加在后邊當中不可變數據有點不適應需要借鑒一些中的內容更新六月份到十月份我們完成了不可變數據的重構配合簡聊的巨大的單一可以整理出來一些常用的方法示例代碼用的是 這篇文章是 immutable-js 一些操作的整理, 目前只有基本的操作:文檔請查看: http://facebook.github.io/imm...
閱讀 1920·2021-09-23 11:21
閱讀 1704·2019-08-29 17:27
閱讀 1062·2019-08-29 17:03
閱讀 730·2019-08-29 15:07
閱讀 1928·2019-08-29 11:13
閱讀 2386·2019-08-26 12:14
閱讀 933·2019-08-26 11:52
閱讀 1736·2019-08-23 17:09