前言

记录ReactNative项目优化过程中学习到的点.

Debug方法

devTools-Performance

ReactNative升到0.83后, devTools加强支持了network和Performance.

RN项目跑的火焰图示例:

同时放一个web版的示例

可能Performance是初版的原因, 对比web版:

1. 性能大大不如web上的, 录制超过5s之后基本分析结果就出不来了.
2. 可用的功能大大缩水, 简直就是精简版, 比如没有帧截图实际非常不方便.

虽然很精简, 但是它还是能比较大而全的帮助发现一些问题. 比如我之前发现的导航导致根layout的re-render, 在这上面是一个非常显而易见的非必要黄色区块.

devTools-Profiler

在我既往的React优化经历中, 这里是重点debug区域.

如果开发过程中不注意性能最优的写法, 大量component可以加useMemo, 大量的function可以加useCallback.

但是我们用的expo目前提供了一个新的config: reactCompiler. 自动全局加了memo和useCallback. 所以这里几乎全部都是绿色.

我试着把reactCompiler关了, 这下可优化的黄色块瞬间就飙升了, 感谢expo啊.

虽然已经大量自动优化了, 虽然这里的Profiler对比web也是阉割版.

但是, 这里分析每个组件的render时间也还比较方便, 如图:

自己加log

这个就没什么好说的了

1. 生命周期加mount/unmountlog
2. 函数式组件里加re-renderlog啊(多说这句完全是因为有些同事之前是以Vue为主开发框架的).
3. 利用performance.now(), debug你想测的东西.

比如我这次优化主要针对是导航卡顿, 我在press导航按钮时和目标页面onMount之后分别拿了下值, 然后计算导航时间.

4. 其他...

这一块AI可以做得很好(做的不好就喷它), 尤其是帮助你加一些全局性的tools类debug代码. 反正又不破坏业务代码, 放心让它加就行.

解决的问题记录

_layout的re-render

之前同事把state管理加载了_layout下, 导致每次navigation都会全局re-render.

tab页面过重

tab页面是不unMount的, 项目初期, 有些页面非常重且未深入优化, 现阶段用isFocused强制实现unMount.

其他收获

如何部署生产版到iOS真机

1. edit scheme
2. Change to release
3. 这里再加一行代码 就可以跑了 export SENTRY_DISABLE_AUTO_UPLOAD=true, 避免配置SENTRY出错导致构建失败