React Native 性能优化指南
2020 年探讨 React Native 性能优化，在前端技术快速迭代的背景下，仍具有重要价值。本文旨在提供通用性强的优化建议，涵盖 React/RN/Android/iOS 官方推荐、源码挖掘及优秀开源框架，帮助开发者解决常见性能瓶颈。
一、减少 re-render
减少不必要的重新渲染是 React 性能优化的核心。
1. shouldComponentUpdate
通过 shouldComponentUpdate 生命周期函数，可以手动比较前后 props 和 state，决定组件是否需要重新渲染。使用时需谨慎，确保所有相关状态都被考虑，避免数据与视图不一致。
2. React.memo
React.memo 是 React v16.6 引入的高阶组件，默认对函数组件进行浅比较。也可传入自定义比较函数，但注意其返回值与 shouldComponentUpdate 相反：props 相等时返回 true。
3. React.PureComponent
React.PureComponent 自动进行浅比较，但面对深层嵌套对象时可能失效。团队可根据场景选择配合细分组件、immutable 对象等策略。
二、减轻渲染压力
React Native 布局依赖 Yoga 库，并非所有 React 节点都对应原生 View。
1. 使用 React.Fragment 避免多层嵌套
React.Fragment 允许组件返回多个节点，减少不必要的 View 包装，优化布局层级。
2. 减少 GPU 过度绘制
过度绘制影响性能，尤其在 Android 上更明显。优化建议：
- 减少背景色重复设置。
- 避免半透明颜色、圆角和阴影，这些都会引起混合计算。
- 优先优化 Android 端，因 React Native 会对仅含布局属性的 View 进行过滤。
三、图片优化
图片加载和管理是性能关键点。
1. Image 组件的优化项
- 图片类型：支持基础格式，WebP 需 iOS 额外插件。
- 下载管理：缺乏多图优先级控制。
- 缓存管理：iOS 可通过
cache属性控制；Android 依赖 HTTP 头缓存。 - 多图加载：Android 上大图易导致内存暴涨，使用
resizeMethod属性（如resize）可缩减内存占用，或通过fadeDuration={0}关闭加载动画。
2. 优先使用 32 位色彩深度图片
32 位图片（如带透明通道的 PNG）在 Android 显示效果更好，且 iOS GPU 直接支持，避免转换开销。
3. 保持 Image 和 ImageView 尺寸一致
尺寸不一致会导致模糊、内存浪费或抗锯齿计算。使用 PixelRatio.getPixelSizeForLayoutSize 根据分辨率加载合适图片。
4. 使用 react-native-fast-image
该库封装了 SDWebImage（iOS）和 Glide（Android），提供更好的缓存管理、加载优先级和内存优化，但会增加包体积。
5. 利用图片服务器
- 采用 WebP 格式减小体积。
- 通过 URL 参数定制图片尺寸和质量，将计算转移至服务端，减轻前端负载。
四、对象创建调用分离
优化编码习惯，减少重复对象创建。
1. 使用 public class fields 语法绑定回调函数
避免在 render 中创建新函数，减少垃圾回收压力。例如，将事件处理函数定义为类属性。
2. 同样方式绑定渲染函数
在 FlatList 等组件中，预定义 renderItem 函数，避免 re-render 时重新生成。
3. StyleSheet.create 替代 StyleSheet.flatten
StyleSheet.create 将样式转为优化后的 ID；StyleSheet.flatten 会合并样式但生成新对象，破坏优化。根据场景权衡灵活性与性能。
4. 避免在 render 中创建新数组/对象
使用常量如 EMPTY_ARRAY 替代 []，减少不必要的对象创建。
五、动画性能优化
React Native 动画易受 JS 线程繁忙影响。
1. 开启 useNativeDrive: true
将可预测动画配置提前发送至原生端，在 UI 线程执行，脱离 JS 线程阻塞。但仅适用于 transform 和 opacity 等非布局属性。
2. 使用 setNativeProps
直接操作原生节点，避免 React 重绘，适用于频繁更新的动画元素。
3. 使用 InteractionManager
将繁重任务延迟到交互和动画完成后执行，平衡资源。
4. 使用 react-native-reanimated 和 react-native-gesture-handler
这两个库将手势动画移至 UI 线程运行，大幅提升跟随手势等复杂动画的流畅度。
5. 使用 BindingX
通过表达式描述交互行为并预置到 Native，减少 JS 与 Native 通信，适合富交互场景。
六、长列表性能优化
虚拟列表是处理长数据的关键。
1. 列表配置项
- initialNumToRender：设置首批渲染数量，覆盖首屏即可。
- windowSize：渲染区域高度，一般为视口倍数，控制内存中保留的 Item 数量。
- removeClippedSubviews：Android 上默认开启，裁剪不可见子视图。
- maxToRenderPerBatch 和 updateCellsBatchingPeriod：控制增量渲染的批量和间隔，调参需平衡速度与响应。
2. ListItems 优化
- 使用 getItemLayout：当 Item 高度固定时，直接提供尺寸和偏移量，避免动态计算。
- 简化组件：减少嵌套和逻辑。
- 应用 shouldComponentUpdate：避免不必要重绘。
- 优化图片：使用缓存和合适尺寸。
- 稳定 key：通过
keyExtractor提供唯一 key。 - 避免匿名函数：预定义渲染函数。
七、性能优化工具
- React Native 官方调试工具：包括开发者菜单等。
- react-devtools：用于查看 React 组件树。
- XCode Instruments 和 Profiler：iOS 性能分析。
- Android Studio Profiler：Android 性能监控。
- 系统调试选项：如 iOS 模拟器 Debug、Android 开发者选项中的 GPU 渲染分析。
通过综合运用这些优化策略和工具，可有效提升 React Native 应用性能，确保流畅用户体验。