利用Immutable解决React-Native那些因为对象被篡改导致的多次ren
转载请注明出处:王亟亟的大牛之路这些天项目压力比较大,一边要催产出一边要调优,这边就把在项目里遇到的问题和解决方法给大家分享下 先安利: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
Immutable的优点
为什么性能快,因为用了hash maps tries和vector tries 安装Immutable简单粗暴 npm install immutable
想固定版本的可以走 npm的last等等等姿势也可以自己扒版本,像这样 自己项目的package.json加入如下 "devDependencies": {
"immutable":"4.0.0-rc.2"
},
先来一段传统js和使用Immutable的对比 const map1 = Map({a: 1,b: 2,c: 3});
const map2 = map1.set('b',50);
const map3 = {a: 1,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
API简单案例fromJS()
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
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()
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
还有很多高端操作,以及作者给我们提供的 简单实例传送门: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,我们下篇见! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |