利用Immutable解決React-Native那些因為對象被篡改導緻的多次render問題

轉載請注明出處:王亟亟的大牛之路

這些天項目壓力比較大，一邊要催産出一邊要調優，這邊就把在項目裡遇到的問題和解決方法給大家分享下

先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android (Kotlin相關内容還沒加入，因為我還沒學，不敢妄自推薦)

為什麼要使用Immutable，它能帶來什麼效果？

js的對象和java等強語言的對象有一個差異點是，更靈活，更多變。如果不使用deep clone等姿勢的話原資料會被“篡改”，但是deep clone是個性能瓶頸

Why? 全量循環，是個性能有缺陷的解決方案，結構一複雜就讓你遞歸爆炸！爆炸！

使用Immutable會解決這些問題！

傳統問題如下：

let wjj = {
  name: 'wjj',
  age:,
};

let wjjClone = wjj;
wjjClone.age = ;

console.log(wjj.age) // 35
console.log(wjjClone.age) // 35
           

Immutable的優點

1. 每次對Immutable對象的操作傳回的都是一個新對象，不會出現“篡改行為”
2. clone行為自下而上，共同部分會被保留，自己以上的節點才會被操作，性能更好
3. api豐富
4. 延遲操作等高端姿勢

為什麼性能快，因為用了hash maps tries和vector tries

傳送門：

http://en.wikipedia.org/wiki/Hash_array_mapped_trie

http://hypirion.com/musings/understanding-persistent-vector-pt-1

安裝Immutable

簡單粗暴

想固定版本的可以走 npm的last等等等姿勢也可以自己扒版本，像這樣

https://github.com/facebook/immutable-js/blob/master/package.json

自己項目的package.json加入如下

"devDependencies": {
    "immutable":"4.0.0-rc.2"
  },
           

先來一段傳統js和使用Immutable的對比

const map1 = Map({a: , b: , c: });
const map2 = map1.set('b', );
const map3 = {a: , b: , c: };
const map4 = map3;
map4.b = ;

console.log('---> map1.get ' + map1.get('b'));
console.log('---> map2.get ' + map2.get('b'));
console.log('---> map3.get ' + map3.b);
console.log('---> map4.get ' + map3.b);

//結果

---> map1.get 
---> map2.get 
---> map3.get 
---> map4.get 
           

API簡單案例

fromJS()

将JS對象和數組轉換為不可變Map和List

let map1 = Immutable.fromJS(map);
let map2 = map1.set('a', );

console.log('---> map1 ' + map1.get('a'));
console.log('---> map2 ' + map2.get('a'));

//結果
---> map1 
---> map1 
           

is()

比較兩個對象是否相等

let map1 = Immutable.fromJS(map);
let map2 = Immutable.fromJS(map);

console.log('---> map1 == map2 ' + (map1 === map2));
console.log('---> map1 == map2 ' + Immutable.is(map1, map2));

//結果
---> map1 == map2 false
---> map1 == map2 true

//因為每次傳回的是不同對象，就算值完全相等，也不相等
           

isImmutable()

判斷是否為Immutable對象

console.log('---> isImmutable([]) ' + isImmutable([]));
console.log('---> isImmutable({}) ' + isImmutable({}));
console.log('---> isImmutable(Map()) ' + isImmutable(Map()));
console.log('---> isImmutable(List()) ' + isImmutable(List()));

//結果
---> isImmutable([]) false
---> isImmutable({}) false
---> isImmutable(Map()) true
---> isImmutable(List()) true
           

還有很多高端操作，以及作者給我們提供的

List

Map

Stack

Set

Record

等等高端貨請大家自行去翻API吧

傳送門：http://facebook.github.io/immutable-js/docs/#/

簡單執行個體

傳送門：https://github.com/ddwhan0123/ReduxDemo

把上次的demo加以微調

//狀态變化時會被調用
    shouldComponentUpdate(nextProps, nextState) {
        console.log('---> Main shouldComponentUpdate');
        if (nextProps.result !== this.props.result) {
            this.state.intvalue = nextProps.result;
            console.log('---> Main shouldComponentUpdate this.state.intvalue true ' + this.state.intvalue);
            return true;
        }
        if (!(this.state.showText === nextState.showText || Immutable.is(this.state.showText, nextState.showText))) {
            console.log('---> Main shouldComponentUpdate this.state.showText true ' + this.state.showText.data);
            console.log('---> Main shouldComponentUpdate nextState.showText true ' + nextState.showText.data);
            return true;
        }
        return false;
    }
           

第一次和最初的列印沒差別,第二次後就不再重新整理ui了

使用起來簡便，API豐富,內建難度小，功能強大。

解決js本身的“尿性”！！

除了本身幾千行代碼是一個使用成本外，暫時沒發現很大的性能問題(壓縮一下也就 10+k)

源碼位址：https://github.com/ddwhan0123/ReduxDemo

我是wjj，我們下篇見！