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 定位瓶颈。

追问:

  1. React.memo 的浅比较在什么场景下会失效?如何自定义比较逻辑?
  2. FlatList 的 windowSize 参数设为多少合适?过小会有什么副作用?
  3. useNativeDriver 为什么不能驱动布局属性(如 height)的动画?
  4. 新架构 Fabric 和 TurboModules 相比旧 Bridge 的性能提升体现在哪里?
  5. 如何用 Systrace 定位 JS 线程和原生线程的耗时瓶颈?
标签:React