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 条评论
登录 后参与评论

相关文章

来自专栏https://www.cnblogs.com/L

Python爬虫知识点一

1.1.HTTP简介 HTTP = HyperText Transfer Protocol URI = Uniform Resource Identifier ...

842
来自专栏喵了个咪的博客空间

PhalGo-ADM思想

#PhalGo-ADM思想 关于ADM思想主要是指在API开发中使用API,Domain和Model三层结构,PhalGo从PhalApi中学习并且推崇这种设计...

3579
来自专栏IT笔记

聊聊Java中的四种单例模式

近期在做支付,一开始图省事,也是为了调试方便,支付的alipayClient和tradeService都是使用的时候去拿,这样就会导致创建多次。为了节省资源,统...

2497
来自专栏difcareer的技术笔记

Android智能指针

网上已经有很多分析智能指针的文章了,讲得不错的是:Android系统的智能指针(轻量级指针、强指针和弱指针)的实现原理分析。本文尽量从不分析代码的角度,将And...

594
来自专栏李成熙heyli

性能优化三部曲之二——通用纯前端优化首屏时间

背景: 对构建的改造已经完成,目前构建的能力可以较为灵活地支撑进一步的优化 希望进一步减少首屏时间,将首屏时间控制在2秒以内 页面情况: 优化之前,并没有上报...

2869
来自专栏不想当开发的产品不是好测试

#测试框架推荐# test4j,数据库测试

# 背景 后端都是操作DB的,这块的自动化测试校验的话,是需要数据库操作的,当然可以直接封装方法来操作数据,那么有没有开源框架支持数据操作,让我们关注写sql语...

52212
来自专栏猿人谷

设计模式分类

     在《设计模式》这本书中列举并描述了23种设计模式,分为创建型模式、结构型模式和行为型模式。另外,近来这一清单又增加了一些类别,例如,并发型模式、线程池...

1855
来自专栏前端学习心得

Ajax原理一篇就够了

1313
来自专栏陈树义

JVM系列第4讲:从源代码到机器码,发生了什么?

在上篇文章我们聊到,无论什么语言写的代码,其到最后都是通过机器码运行的,无一例外。那么对于 Java 语言来说,其从源代码到机器码,这中间到底发生了什么呢?这就...

652
来自专栏腾讯Bugly的专栏

那些年,我们一起写过的“单例模式”

本文来自:“天天P图攻城狮”公众号(ttpic_dev) 题记 度娘上对设计模式(Design pattern)的定义是:“一套被反复使用、多数人知晓的、经过分...

4114

扫码关注云+社区