利用Immutable解决React-Native那些因为对象被篡改导致的多次render问题

本文主要是介绍利用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

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 install 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: 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

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

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,我们下篇见!


这里写图片描述

这篇关于利用Immutable解决React-Native那些因为对象被篡改导致的多次render问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/509720

相关文章

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

在java中如何将inputStream对象转换为File对象(不生成本地文件)

《在java中如何将inputStream对象转换为File对象(不生成本地文件)》:本文主要介绍在java中如何将inputStream对象转换为File对象(不生成本地文件),具有很好的参考价... 目录需求说明问题解决总结需求说明在后端中通过POI生成Excel文件流,将输出流(outputStre

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Python中ModuleNotFoundError: No module named ‘timm’的错误解决

《Python中ModuleNotFoundError:Nomodulenamed‘timm’的错误解决》本文主要介绍了Python中ModuleNotFoundError:Nomodulen... 目录一、引言二、错误原因分析三、解决办法1.安装timm模块2. 检查python环境3. 解决安装路径问题

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错