React Native学习笔记

原理

一.React

以我对前端非常简陋的理解,它需要三个模块实现基本的完整功能:

1.         HTML,创建DOM节点和DOM树,组成页面的结构和基本布局

2.         CSS,影响DOM样式,如位置信息、大小、层级、显示隐藏等

3.         JS,代码中与DOM树节点id一一对应来处理逻辑,以动态操控DOM

React框架提供了一种“简洁的语法高效绘制DOM框架”,即JSX。个人理解的“简洁”是指实现JS与HTML的混合编程,看起来像是在JS中用HTML语言创建DOM节点,开发过程只需要关心如果用JS构造页面。高效性得益于Virtual DOM机制,DOM需要更新时,创建一个虚拟树即Virtual Dom代表所需状态,将其与之前的Virtual Dom通过Diff算法进行比对,只渲染被改变的内容,避免了JS引擎判断调用负责渲染的DOM操作接口,充分利用JS引擎的性能高效改动DOM。

二.React Native

移动平台提供了运行JS代码的引擎,而JS可以实现动态配置并表达逻辑信息,二者的结合可以概括React Native所要解决的问题:基于JS,具备动态配置能力的移动端开发框架,开发者用同一套语法、工具,开发面向安卓、iOS、前端不同平台的应用。

以iOS平台为例,系统平台提供的JavaScript Core框架实现OC代码与JS代码的直接交互。React Native用JavaScript Core作为JS的解析引擎,并自己实现了一套通用与所有JS引擎的机制,可以理解为以JS的形式告诉native该执行什么OC代码。

性能问题

React Native框架具有APP轻量、支持动态更新、跨平台等优势,也存在兼容性和性能问题。

通过阅读React Native性能相关的文章,总结出性能问题主要分为两大类:页面初次加载速度慢,大数据量时Listview加载卡顿。下面针对这两大类问题,具体讨论他们的原因和解决方法。

一.页面初次加载速度慢

由上图可知,RN页面初次加载的主要时间消耗在JS Init +Requir上,这主要就是JS Bundle加载的时间。

(一)JS Bundle分包

如上图所示,RN官方的打包工具,会在每一个业务的JS Bundle中,打包进框架JS代码和业务JS代码,而这个框架JS代码大约有530KB。所以,我们应该改造RN的打包工具,拆分开业务JS和框架JS,每个业务的JS Bundle只拥有自己的业务JS,然后共用同一份框架JS代码。这样既可以有效减小JS Bundle包,减少加载JS Bundle的时间,也有利于后续的预加载和缓存。

(二)预加载RN框架

在打开RN界面时,会先加载RN框架,然后在框架上运行业务JS,所以导致整个RN界面打开需要将近1s的时间。

因为前面已经将框架JS和业务JS分离,所以可以在后台预加载一个RN环境,把框架JS代码先跑起来,然后在RN界面真正打开的时候,再跑业务JS,直接进行业务界面的渲染,加快界面打开速度。

二.大数据量时Listview加载卡顿

(一)Listview节点复用

分析卡顿原因,可以从Listview的实现原理入手。React列表的每一项都会带有一个key属性,在React进行虚拟dom diff时,作为每个列表项的标记。

由上图可知,列表在滑动的过程中,节点并没有复用,react会认为是key1被销毁和key6被创建,这会引发页面重绘,消耗大量的渲染时间。除此之外,被滑出视野范围外的节点,只是从列表这个父节点上移除,但是节点的引用依然存在,还是会占用内存。

所以,节点没有复用,滑动时会触发多次重绘,导致卡顿。同时,由于滑出视野范围的节点没有被及时回收,在大数据量时,会导致内存占用迅速增大,导致整个app卡顿。

通过修改,复用节点,react就会认为仅仅是key1更改了位置,只会引发重排,减少渲染时间。这里的具体方案可以参考native端Recycle view的实现。

(二)Listview异步加载数据

Listview是同步加载数据的,当数据量大时,容易卡顿。可以考虑异步地往Listview push数据。

(三)ReactNative FlatList

RN新版本中推出的List,其实就是官方实现的复用列表节点的List,性能显著提升。

参考文档:

React Native 从入门到原理

携程是如何做React Native优化的

Qunar React Native 大规模应用实践

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Hadoop实操

如何降级Cloudera Manager和CDH

在前面的文章中,Fayson介绍过《如何升级Cloudera Manager和CDH》,在实际使用过程中,我们往往会碰到将集群升级到一个较新的版本后,会出现一些...

7385
来自专栏phodal

博客系统的架构思考(中)——静态与CQRS

对于复杂的系统来说,上一篇的做法做确实很不错。但是对于一个简单地系统来说,这样做是不是玩过火了?如果我们要设计一个博客系统的话,那么我们是不是可以考虑将Writ...

1839
来自专栏Hadoop实操

如何将Kerberos环境下CDH集群JAVA升级至JDK8

大家都知道在安装CDH时默认安装的JDK版本为jdk1.7.0_67,部分企业开发环境为JDK8版本,这个时候可能会出现在本地开发的应用在集群中无法正常运行。前...

4205
来自专栏腾讯云容器服务团队的专栏

8 月最新基于 kubernetes 的应用编排实践

本文讲述关于应用编排的实践话题,在腾讯云容器服务应用编排的实践部分,主要会涉及配置管理,应用模板管理,基于应用的服务组管理等内容。

1.1K1
来自专栏菜鸟计划

webpack学习(一):webpack 介绍&安装&常用命令

一、简单介绍 什么是Webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/s...

3478
来自专栏pangguoming

Netty和Tomcat的区别、性能对比

Netty和Tomcat最大的区别就在于通信协议,Tomcat是基于Http协议的,他的实质是一个基于http协议的web容器,但是Netty不一样,他能通过编...

1003
来自专栏zhisheng

Java研发方向如何准备BAT技术面试答案(中)

JavaEE: 1.servlet生命周期及各个方法 参考文章 http://www.cnblogs.com/xuekyo/archive/2013/02/2...

38813
来自专栏Python小屋

使用Anaconda3配置多版本Python虚拟开发环境详细步骤

有时候,为了使用比较干净的开发环境,或者为了测试一些版本的扩展库,我们可能需要创建虚拟开发环境,在不同的虚拟开发环境中,只安装需要的扩展库,这样可以最大程度上减...

2935
来自专栏魏豪的专栏

【腾讯云的1001种玩法】LAMP架构实现动态网站论坛系统

LAMP架构,全称为Linux + Apache + Mariadb + PHP,是一种强大的网站解决方案。LAMP是多个开源项目的首字母缩写。LAMP网站架构...

4650
来自专栏静默虚空的博客

Babel 入门指南

Babel 入门指南 ​⚠ 注意: Babel 可以与很多构建工具(如 Browserify、Grunt、Gulp 等)进行集成。由于本教程选择 Webpa...

1975

扫码关注云+社区