React 不可變數據Immutable


 1, 為什么要用到不可變數據 ?

從React渲染組件性能考慮,使用舊數據創建新數據時,要保證舊數據同時可用,

並且沒有變化的部分還可用,目的是盡量減少不必要的渲染和重繪。 

 

如果是簡單的賦值給一個新的變量,新舊對象只是名稱不同,不進行深比較js認為數據不變。其次,也會帶來引入對象淺拷貝的問題,造成不可預測的展示值。

這對react響應重新渲染造成了性能影響,或不能及時更新dom。

 

shouldComponentUpdate 是因為 state值和setState值一樣是也會觸發更新,但是只到淺比較,對於深層結構沒有效率。

但是做深層拷貝很耗時,於是這才有了Immutable 不可變數據,來提升組件render的效率。

 

2, 但是深拷貝,會占用大量的內存和cpu特別是在復雜結構中,如何處理 ?

引入 Immutable.js 不可變數據插件,使用了結構共享,如果對象中只有一個節點發生變化,只修改這一個節點和受它影響的節點,

其他節點共享。

是Facebook工程師 Lee Byron3年時間打造,實現來一套持久化數據結構,

如:Collection  List  Map  Set  Record等,獲取數據和普通對象不同

如:map.get('key') 獲取對象值

如:array.get(0) 相當於 array[0]

 

3, 示例

import { Map }  from 'immutable';

let a = Map({

  select: 'users',

  filter: Map({ name: 'Kim' })

})

let b = a.set('select', 'people');

 

a === b // false

a.get('filter') === b.get('filter');  // true .

 

或者使用es6 結構賦值

obj1 = { ...obj1 , a:2 } // 舊對象必須寫在前面。
obj1 = { ...obj1 } // 表示 淺復制,不是拷貝的副本是值的引用。

4, 疑問

為啥不用JSON.stringify()  JSON.parse()  構建新的對象呢,何必耗費精力夠一個 Immutable.js  感覺對react性能提升有點勞動大於回報,不理解。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM