利用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:25,
};

let wjjClone = wjj;
wjjClone.age = 35;

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

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

Immutable的优点

每次对Immutable对象的操作返回的都是一个新对象，不会出现“篡改行为”
clone行为自下而上，共同部分会被保留，自己以上的节点才会被操作，性能更好
api丰富
延迟操作等高端姿势

为什么性能快，因为用了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 install immutable

1
1

想固定版本的可以走 npm的last等等等姿势也可以自己扒版本，像这样 
https://github.com/facebook/immutable-js/blob/master/package.json 



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

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

1
2
3
1
2
3

先来一段传统js和使用Immutable的对比

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

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 2
---> map2.get 50
---> map3.get 4
---> map4.get 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

API简单案例

fromJS()

将JS对象和数组转换为不可变Map和List

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

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

//结果
---> map1 1
---> map1 4

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

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

//因为每次返回的是不同对象，就算值完全相等，也不相等

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

还有很多高端操作，以及作者给我们提供的

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第一次和最初的打印没区别,第二次后就不再刷新ui了 



使用起来简便，API丰富,集成难度小，功能强大。

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

除了本身几千行代码是一个使用成本外，暂时没发现很大的性能问题(压缩一下也就 10+k)

源码地址：https://github.com/ddwhan0123/ReduxDemo

我是wjj，我们下篇见！