React Native 优化指南

本指南介绍了优化 React Native 应用性能的多个方面，使应用运行更加流畅。

减少 Re-Render

在 React Native 中，组件状态变化后的重新渲染过程非常频繁。优化策略包括：

• shouldComponentUpdate
• PureComponent
• React.memo
• useMemo
• useCallback
• 避免渲染时创建新对象和函数

减少渲染压力

除了减少重新渲染，还需避免过多渲染负担：

• 使用 Fragment 避免多层嵌套
• 避免过度绘制，例如避免重复设置背景、半透明等

图片优化

在应用中优化图片处理的方法包括：

• Image 缓存配置
• 使用 resizeMethod 设置图片尺寸来解决 Android 内存暴涨问题
• 根据机型分辨率加载不同尺寸的图片

动画性能

动画优化策略：

• 开启原生动画（只限可预测动画）
• 使用 setNativeProps 来避免 React 重绘
• 使用 InteractionManager.runAfterInteractions 执行重任务（类似于 raf）
• 引入第三方库，如 react-native-gesture-handler 或 bindingx

长列表优化

长列表性能改进方法：

• 合理使用 key
• 避免使用匿名函数作为 renderItem
• 使用虚拟列表
• 使用 getItemLayout 来预设置高度，从而省去初始化高度计算的开销

开发工具

优化时可使用的工具：

• React Devtool
• Android Profiler
• iOS Simulator Debug

新架构 Fabric

Fabric 是 React Native 的新架构，采用 JSI（JavaScript Interface）技术，将 JavaScript 与原生代码紧密结合。主要优势：

• 所有通信都是在原生线程中进行的，这极大地提高了渲染速度
• 支持增量渲染，分散多个帧中的渲染工作
• 支持动态界面更新和增量代码推送

使用 Fabric 需将应用升级至 React Native 0.61 或更高版本，并启用 useFabric 标志。