Persistent Data Structure(持久化數據結構)
也就是使用舊數據創建新數據時,要保證舊數據同時可用且不變。同時爲了避免 deepCopy 把所有節點都複製一遍帶來的性能損耗,Immutable 使用了 Structural Sharing(結構共享),即如果對象樹中一個節點發生變化,只修改這個節點和受它影響的父節點,其它節點則進行共享。
Immutable 詳解及 React 中實踐
Immutable 優點
與深拷貝相比,Immutable最大程度上共用了內存,這與深拷貝是有很大程度上的不同。
共用內存:
使用setIn去修改Immutable對象時,未被修改的節點依舊共享。適用於純函數式編程。純函數編程就是輸入一樣,輸出必定一樣。
- 可以通過Immutable對象去判斷是否要更新組件,這樣可以提高性能,避免不必要的渲染。
Immutable.is(immutable1, immutable2);
若immutable1
與immutable2
內容相同,則返回true
。否則返回false
。
由此我們可以通過is
去判斷狀態內容是否改變,決定是否重新渲染。
- React 建議把
this.state
當作 Immutable 的,因此修改前需要做一個 deepCopy,顯得麻煩。
let newState = Object.assign({}, state);
使用Immutable,使用update進行更新
this.state = Map({name: 'hi'});
this.setState({name: this,state.name.update('name', v=>'my')});
Immutable.fromJS
是將Object和Array轉化爲Immutable Map和List。
Immutable對象的操作
- 獲取immutable對象中的數組元素的某一下標元素。
data = fromJS({
condition: ['one', 'two', 'three', 'four'];
});
// 獲取'two'
data.getIn(['condition', 1]);
- 獲取immutable數組中的數組大小
data = fromJS({
condition: ['one', 'two', 'three', 'four'];
});
// 獲取'two'
data.getIn(['condition']).size;