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

相关文章

来自专栏知晓程序

开发 | 这 4 个绝招,让你的小程序告别卡顿,流畅如飞

16320
来自专栏web前端教室

css一样追踪你,清空缓存也没有用

一直以来,网站要追踪用户的操作和信息,都需要用到Js,但今天偶然看到有人用css来做网站用户的交互监测,而且完全可以实现针对不同用户的不同操作。

11930
来自专栏达摩兵的技术空间

touch-action导致安卓页面无法滚动

相信大家搜css touch-action很容易搜到一批文章,但感觉自己还是需要写下自己这这个过程中的一些探索经历。

1.1K00
来自专栏Android工程师的修仙之旅

【小程序+云开发】实战:一天搭建小型论坛

笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发,可参考文...

1.2K90
来自专栏WindCoder

WordPress中通过Ajax评论分页实现方法

一直看着评论一线到底,感觉有点不舒服,看到主题君欲思大大那的评论也分页了,就向大大求援了一下,大大酷酷的回了一句paginate_comments_links函...

30410
来自专栏美团技术团队

美团外卖前端可视化界面组装平台 —— 乐高

1 简介 乐高,是美团点评一个快速搭建后台系统页面的平台。名称来源于大家熟悉的丹麦知名玩具品牌,他们的玩具都是通过组合易拆卸、装配的零件,形成最终的作品。经过长...

1.1K40
来自专栏前端架构与工程

前后端分离和模块化-58到家微信首页重构之路

微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题: 每个城...

26080
来自专栏互联网杂技

12条专业的JavaScript规则

习JavaScript是困难的。它发展的如此之快,以至于在任何一个特定的时刻,你都不清楚自己是否“做错了”。有些时候,感觉像是坏的部分超过了好的部分。然而,讨论...

36190
来自专栏DeveWork

为你的WordPress 博客开启两步验证功能(技术支持:谷歌)

如果你有谷歌账号的话,为了安全,最好是开启两步验证功能——即在原来的基础上增加手机验证码这一关。谷歌中涉及到两步验证的技术是Google Authenticat...

32570
来自专栏移动开发之家

Weex原理之带你去蹲坑

 本篇将节操满满的安利Weex(˶‾᷄ ⁻̫ ‾᷅˵),不一样的角度推荐你入坑,官网有的我们不拖泥,这里将给你补充官方没有的,深入到蹲坑给你排忧解难,总会给你点...

29420

扫码关注云+社区

领取腾讯云代金券