热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ReactNative引入immutable优化性能

S所有的操作都是通过Native端的js线程执行,单线程执行,优化性能的一个方向就是降低js的负载。Imutualble概念:顾名思义,对象一旦被创建便不能更改,对immutabl

S所有的操作都是通过Native端的js线程执行,单线程执行,优化性能的一个方向就是降低js的负载。

Imutualble概念:顾名思义,对象一旦被创建便不能更改,对immutable对象的修改添加删除都会返回一个新的immutable对象,同时为了避免deepCopy的性能损耗,immutable引入了Structural Sharing(结构共享),如果对象只是一个节点发生变化,只修改这个节点和受它影响的父节点,其他节点共享。官方地址:https://facebook.github.io/immutable-js/


Immutable优点:

(1)降低了Mutual带来的复杂度
(2)节省内存
(3)Undo/Redo,Copy/Paste,甚至时间旅行这些功能做起来小菜一碟
(4)并发安全
(5)拥抱函数式编程


应用:

(1)shouldComponentUpdate()中的deepCompare
熟悉 React 的都知道,React 做性能优化时有一个避免重复渲染的大招,就是使用 shouldComponentUpdate(),但它默认返回 true,即始终会执行 render() 方法,然后做 Virtual DOM 比较,并得出是否需要做真实 DOM 更新,这里往往会带来很多无必要的渲染并成为性能瓶颈。

react的组件渲染分为初始化渲染和更新渲染。在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的):




 

技术分享图片


Paste_Image.png

但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变,Redux通过Provider传递给子组件):

 


技术分享图片
图片描述



我们的理想状态是只调用关键路径上组件的render,如下图:

技术分享图片
图片描述



但是react的默认做法是调用所有组件的render,再对生成的虚拟DOM进行对比,如不变则不进行更新。这样的render和虚拟DOM的对比明显是在浪费,如下图(黄色表示浪费的render和虚拟DOM对比)

技术分享图片
图片描述

 

Tips:


拆分组件是有利于复用和组件优化的。
父组件如果返回false,则不对子组件生成新的虚拟DOM进行对比。


所以:写好每个组件的shouldComponentUpdate()方法,可以避免子组件DOM的生成以及对比。

我们可以实现一个baseCommponent类,实现shouldComponentUpdate():


export default class BaseComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (!Immutable.is(thisProps, nextProps) || !Immutable.is(thisState, nextState)) {
return true;
}
return false;
}
}

所有的组件不在继承Commponent,而是继承这个baseCommponent;

(2)reducer中的deepCopy
immutable深拷贝时有性能优势,reducer中对旧数据的深拷贝我们可以这样写:


export default function DLTHistoryList(state = defaultUserState, action) {
switch (action.type) {
case types.DLTHISTORYLIST_REFRESHLIST:
return state.merge(Immutable.fromJS({
isRefreshing: false,
historyItems: action.payload.latestTwentyItems,
hasNextPage: action.payload.latestTwentyItems.length >= 20,
isEmpty: action.payload.latestTwentyItems.length <= 0,
awardRankArray: action.payload.awardRankArray,
}));
default:
return state;
}
}

注意:
由于 Redux 中内置的 combineReducers 和 reducer 中的 initialState 都为原生的 Object 对象,所以不能和 Immutable 原生搭配使用。幸运的是,Redux 并不排斥使用 Immutable,可以自己重写 combineReducers或使用 redux-immutablejs 来提供支持。
使用很简单:
将 import { combineReducers } from ‘redux‘; 替换为 import { combineReducers } from ‘redux-immutable‘;


总结

Immutable 可以给应用带来极大的性能提升,但是否使用还要看项目情况。由于侵入性较强,新项目引入比较容易,老项目迁移需要评估迁移。对于一些提供给外部使用的公共组件,最好不要把 Immutable 对象直接暴露在对外接口中。

参考


https://github.com/Pines-Cheng/blog/issues/3
https://github.com/camsong/blog/issues/3







推荐阅读
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 本文介绍了如何在 ASP.NET 中设置 Excel 单元格格式为文本,获取多个单元格区域并作为表头,以及进行单元格合并、赋值、格式设置等操作。 ... [详细]
  • LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息,并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器,确保用户账户信息的集中管理和安全访问。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案,重点介绍了Robots协议的作用和使用方法,旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 在 LeetCode 的“有效回文串 II”问题中,给定一个非空字符串 `s`,允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后,字符串是否能成为回文串,并提出了高效的优化算法。通过详细的分析和代码实现,本文提供了多种解决方案,帮助读者更好地理解和应用这一算法。 ... [详细]
  • 本文介绍了 AngularJS 中的 $compile 服务及其用法,通过示例代码展示了如何使用 $compile 动态编译和链接 HTML 元素。 ... [详细]
  • [c++基础]STL
    cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
author-avatar
幼俐佩其392
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有