5月29日 22:54
React Native 性能优化怎么做?常见性能瓶颈如何排查和解决?
React Native 性能优化的核心是 减少 JS Bridge 通信、控制重渲染、优化列表滚动 三个方向。
减少 Bridge 通信: Bridge 是异步串行的,高频调用会积压队列。将批量操作合并为一次原生调用,使用 Native Modules 批量传递数据而非逐条传递。新架构 Fabric 取代了异步 Bridge,实现同步通信。
控制重渲染: 使用 React.memo 包裹子组件避免不必要的 re-render;用 useMemo 缓存计算结果、useCallback 缓存回调函数;列表项拆分为独立组件并 memo 化。避免在 render 中创建内联对象和函数。
优化列表: FlatList 替代 ScrollView 渲染长列表,设置 keyExtractor、getItemLayout 提升性能;windowSize 控制渲染窗口大小;removeClippedSubviews 回收不可见视图。VirtualizedList 是 FlatList 的底层,可做更细粒度控制。
其他关键点: 图片使用缓存库(如 react-native-fast-image);动画用 useNativeDriver 驱动跑在原生线程;避免在主线程做 JSON 解析等耗时操作;Profiling 工具用 Flipper 或 Systrace 定位瓶颈。
追问:
- React.memo 的浅比较在什么场景下会失效?如何自定义比较逻辑?
- FlatList 的 windowSize 参数设为多少合适?过小会有什么副作用?
- useNativeDriver 为什么不能驱动布局属性(如 height)的动画?
- 新架构 Fabric 和 TurboModules 相比旧 Bridge 的性能提升体现在哪里?
- 如何用 Systrace 定位 JS 线程和原生线程的耗时瓶颈?