React 不可變數據Immutable

 

1, 爲何要用到不可變數據 ?

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

而且沒有變化的部分還可用，目的是儘可能減小沒必要要的渲染和重繪。

 

若是是簡單的賦值給一個新的變量，新舊對象只是名稱不一樣，對比不出具體的值變化。其次，也會帶來引入對象淺拷貝的問題，形成不可預測的展現值。

這對react響應從新渲染形成了性能影響，或不能及時更新dom。

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性能提高有點勞動大於回報，不理解。。