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