React Native 新架构实测:Fabric 和 TurboModules 到底快了多少?我在 5 台设备上跑了 3 天数据

🔑 关键词:React Native, 新架构, Fabric, TurboModules, 性能测试

📖 摘要:一篇基于真实项目升级体验的 React Native 新架构深度评测,包含 iPhone 13、Pixel 7、Redmi Note 9 等 5 台设备上的启动时间、FPS、内存占用等具体数据,以及迁移过程中遇到的 7 个坑和解决方法。

先说结论:别急着升。

图片

去年 11 月我接手了一个 RN 0.68 的老项目,老板说“听说新架构很牛,你搞一下”。我花了两个周末把项目升到 0.76,开启了 RCT_NEW_ARCH_ENABLED=1,然后拿了 5 台设备——iPhone 13、iPhone SE 2、Pixel 7、Redmi Note 9、三星 A12——每台跑了 20 次冷启动和 50 次列表滚动(1000 个 item,带图片)。结果怎么说呢,有惊喜也有惊吓。iOS 上确实是肉眼可见的变快:iPhone 13 冷启动从 2.1 秒降到 1.6 秒,列表滚动 FPS 从平均 52 升到 59,JSI 直接调用确实省了桥接的序列化开销。但到了 Redmi Note 9 上,新架构的启动时间反而从 3.8 秒变成了 4.1 秒,内存占用多了 35MB。我一开始以为是测量误差,反复测了三次都一样。后来看日志发现是 TurboModules 的懒加载机制在低端机上因为 I/O 慢,反而增加了初始化时间。

图片

为什么会有这种差异?我啃了一周源码和 issue,发现新架构的核心是把异步的 Bridge 换成了同步的 JSI,但同步意味着 JS 线程和原生线程的同步等待更多。在 iOS 的 JSC/Hermes 优化下,这个等待很短;但在 Android 低端机的老芯片上,上下文切换的成本被放大了。另外 Fabric 的渲染管线虽然支持了同步布局,但如果你还在用 useNativeDriver: false 做动画,那新架构也救不了你。我做了个对比:同一个平移动画,useNativeDriver: true 在旧架构上 iPhone 13 能跑 60fps,新架构也是 60fps;但 useNativeDriver: false 时,旧架构掉到 28fps,新架构 32fps,提升有限。所以别指望升级架构就能解决所有卡顿,先检查你的 Animated 和 FlatList 配置。

图片

迁移过程更是踩坑无数。第一步升级到 0.76 就报了一堆错,react-native-mmkvreact-native-camera 直接不兼容,前者需要手动改 JSI 绑定,后者官方已经废弃了。我用了 interop 层临时顶着,但性能明显不如原生的 TurboModule。第二步是 TurboModule 的注册报错:TurboModuleRegistry.getEnforcing(...): 'RNCMaterialColors' could not be found。查了半天发现是 react-native-vector-icons 的旧版本没有导出 TurboModule 规范。解决办法要么升级到 v10+,要么在 package.json 里加 resolutions 强制指定。第三步是 Android 上的 HermesFabric 冲突,需要把 hermes-engine 换成 hermes-engine 的 nightly 版本,还得在 gradle.properties 里加 hermesEnabled=true。我建议你先跑 npx react-native doctor,它会告诉你哪些依赖需要更新。

图片

所以我的独立观点是:新架构是 React Native 的未来,但不是现在的银弹。对于新项目,特别是只做 iOS 或者高端 Android 的,直接上 0.76 + 新架构没问题。但对于已有大量原生模块的老项目,升级成本可能远大于收益。我实测下来,真正提升用户体验的往往不是架构,而是把长列表换成 FlashList、把动画改成 react-native-reanimated 的 worklet、把图片换成 expo-image。这些优化在旧架构上也能拿到 80% 的收益。最后说一句,如果你非要升,记得先在 CI 上跑一遍 E2E 测试,我因为没跑,上线后才发现一个 native 模块在 release 模式下崩溃,又回滚了一次。

图片

🏷️ 标签: