腾讯优测优分享 | 探索react native首屏渲染最佳实践

腾讯优测是专业的移动云测试平台，旗下的优分享不定时提供大量移动研发及测试相关的干货~

此文主要与以下内容相关，希望对大家有帮助。

react native给了我们使用javascript开发原生app的能力，在使用react native完成兴趣部落安卓端发现tab改造后，我们开始对由react native实现的界面进行持续优化。目标只有一个，在享受react native带来的新特性的同时，在体验上无限逼近原生实现。

作为一名前端开发，本文会从前端角度，探索react native首屏渲染最佳实践。

1.首屏耗时计算方法

1.1我们关注的耗时

优化首屏渲染耗时，需要先定义首屏耗时的衡量方法。将react native集成至原生app中时，可以将首屏耗时定义为如下

首屏耗时=react native上下文初始化耗时+首屏视图渲染耗时

其中，react native上下文初始化耗时为一个固定开销，通过将初始化过程提前至app启动后异步进行，在安卓端，这一耗时已经可以降低到约70ms。本文关注的是首屏视图渲染耗时，文中优化探索是在安卓端react native结合版app中进行，但其思路和方法，可以复用至iOS端。

1.2渲染耗时衡量方法

关注首屏视图渲染耗时，需要理解react框架视图渲染流程，相应的需要了解其生命周期方法。下图是一张react组件完整的声明周期图，从图中可以看出，上方虚线框内为生命周期第一阶段，这个阶段完成初始化，并第一次渲染组件。左下角虚线框为组件运行和交互阶段，这里可能会再次渲染组件。右下角虚线框为第三阶段，组件这一阶段卸载消亡。

对应上述生命周期方法，我们在初始阶段首先渲染loading视图，并开始拉取数据。获取数据后，通过改变状态（state），触发视图的再次渲染，在屏幕绘制出视图。

结合上述分析，我们将首屏视图渲染耗时定义为如下

首屏视图渲染耗时=compontDidUpdate结束时间 – compontWillMount开始时间

2.开启渲染优化探索之路

2.1输出当前渲染耗时

既然已经明确了视图渲染耗时的计算方法，那么就可以打时间点日志输出这一耗时看看。这里查看耗时有两种方法。

使用调试模式，通过console.log，在chrome调试工具中输出时间差值

封装native层日志方法封装给react native层调用，将日志输出到app日志文件中。

推荐使用第二种方法，采用这种方法，可以以release模式运行app，输出结果与我们普通的安装运行