React Native 性能优化指南

React Native 性能优化指南（2024-2026）

React Native 在 2024 年底至 2026 年间经历了重大的架构演进（New Architecture），结合 Hermes 引擎的默认化，使其性能接近原生应用。以下是基于最新生态和官方更新的系统性优化指南。

目的：解决原有桥接（Bridge）导致的性能瓶颈。操作：

迁移 New Architecture：将项目迁移到最新架构（默认从 RN 0.76 开始），启用 Fabric 渲染引擎和 TurboModules。这是提升渲染性能的根本措施 $\[1$ ] $\[2$ ]。
启用 Hermes 引擎 ：强制开启 Hermes AOT 编译（预编译），并开启 hermes bytecode 功能，显著减少启动时间和内存占用 $\[3$ ] $\[4$ ]。
避免不必要的桥接 ：尽量使用 JSI（JavaScript Interface）或 TurboModules 替代传统的 NativeModules，降低 JavaScript 与原生的通信开销 $\[5$ ]。

目的：降低 UI 线程压力，避免掉帧。操作：

列表渲染 ：对于长列表，优先使用 FlashList 替代 FlatList，因为它采用了更高效的布局算法；若使用 FlatList，务必设置 keyExtractor、removeClippedSubviews、windowSize 参数 $\[6$ ]。
避免重复渲染 ：使用 React.memo 包裹函数组件，使用 useMemo 缓存计算结果，使用 useCallback 缓存函数引用，防止子组件不必要的重新渲染 $\[7$ ] $\[8$ ]。
图片优化 ：使用 react-native-fast-image 替代 Image 组件，开启磁盘缓存、预取图片并使用占位图，避免加载高分辨率图片导致的卡顿 $\[9$ ]。
动画流畅 ：避免使用 Animated 的 JS driver。改用 react-native-reanimated 3，将动画逻辑迁移至 UI 线程（C++层），确保动画的 60fps 流畅性 $\[10$ ]。

目的：减少 JS 主线程阻塞。操作：

性能监控 ：使用 Flipper 的 React DevTools 插件或 react-native-performance 库进行帧率监控，定位具体卡顿点 $\[11$ ] $\[12$ ]。
避免大对象创建 ：在渲染循环中避免创建大对象或执行大量计算。将复杂逻辑提取到 Web Worker 中（使用 react-native-workers）或通过 TurboModules 转为原生执行 $\[13$ ]。
代码分割 ：对于大型页面，使用动态 import() 进行懒加载，减小单个 Bundle 大小，加快加载速度 $\[14$ ]。

目的：防止内存泄漏导致的崩溃。操作：

及时释放资源 ：在组件的 useEffect 返回函数或 componentWillUnmount 中，移除所有事件监听、计时器和网络请求，防止回调引用导致的内存泄漏 $\[15$ ]。
图片资源 ：使用 FastImage 的 clearDiskCache 和 clearMemoryCache 方法定期清理缓存，防止 OOM（内存溢出） $\[16$ ]。
键盘弹出 ：在使用 KeyboardAvoidingView 时，尽量设置 behavior="padding" 并控制键盘监听的数量，键盘弹出是常见的卡顿来源 $\[17$ ]。

目的：减小 App 下载体积，提高安全性。操作：

ProGuard/R8 ：在 Android 项目中启用 ProGuard（enableProguardInReleaseBuilds），移除未使用的 Java 类和资源 $\[18$ ]。
移除 Debug 代码 ：确保发布版（Release）中移除所有 console.log、debugger 语句，关闭开发者菜单 $\[19$ ]。
依赖审计 ：定期使用 npm audit 检查依赖库的安全性和冗余程度，删除未使用的第三方库 $\[20$ ]。

目的：确保新架构兼容性。操作：

版本锁定 ：使用 Yarn 的 resolutions 锁定 React Native 关键依赖版本，防止因子依赖升级导致的崩溃 $\[21$ ]。
分支管理 ：为迁移 New Architecture 创建专门的 new-arch 分支，逐步替换旧模块，避免一次性迁移导致的全局错误 $\[22$ ]。