先说结论:新架构不是银弹,我差点被坑回旧版
我业余维护一个二手交易 App,之前一直用 RN 0.72 + Hermes,冷启动在红米 Note 11 上稳定 2.1 秒左右。去年 10 月 RN 0.76 发布,默认开启新架构,我心想终于能告别桥接了,立刻拉分支升级。结果第一版编译就卡了 3 天,boost 库下载失败,reanimated 直接白屏。后来翻 GitHub issue 才发现要手动改 android/gradle.properties 里的 newArchEnabled=true,还得把 react-native-reanimated 升到 3.16.0,react-native-screens 升到 4.0.0。搞定之后跑起来,启动时间确实降到 1.4 秒,包体积从 28MB 变成 24MB(arm64-v8a)。但滑动商品列表的时候,掉帧比旧架构还严重,尤其是快速滚动加载图片时,FPS 从 58 掉到 42。我拿 Perfetto 抓了 trace,发现 Fabric 的同步渲染在 JS 线程执行 layout 计算,直接阻塞了 UI 线程 120ms。这跟我预想的完全相反。
跟 Flutter 比,RN 新架构到底赢在哪?
我去年也用过 Flutter 3.19 做另一个项目,Impeller 渲染引擎确实猛,同样列表滚动稳定 60fps,掉帧很少。但 Flutter 的问题是你得把所有东西都用 Dart 重写,包括支付、地图、推送。我们那个电商 App 要接微信 SDK、支付宝 SDK,Flutter 的插件要么没有,要么年久失修。RN 新架构的 TurboModules 可以让我直接写原生模块,JS 和原生同步调用,比如获取设备 ID 不用再异步等 Promise,直接返回。但这也是坑:同步调用会阻塞 JS 线程,如果你在同步方法里做复杂计算,整个界面就卡死。我个人的独立观点是,RN 新架构最大的价值不是性能提升,而是让原生模块的开发体验变好了,C++ 代码可以共享,iOS 和 Android 的 TurboModule 用同一套接口。但如果你只是写写 UI,旧架构完全够用,别折腾。
升级 0.76 新架构的保姆级步骤(含踩坑)
第一步,先升级 React Native 到 0.76.5,用 npx react-native upgrade 或者手动改 package.json。第二步,Android 在 android/gradle.properties 里加 newArchEnabled=true,iOS 在 Podfile 顶部加 ENV['RCT_NEW_ARCH_ENABLED'] = '1'。第三步,跑 pod install,这里大概率会卡在 boost 下载,因为网络问题。解决办法是手动下载 boost_1_83_0.tar.gz 放到 ~/.cocoapods/repos 或者设置 BOOST_URL 环境变量。第四步,升级所有依赖:reanimated 必须 >=3.16.0,gesture-handler >=2.20.0,screens >=4.0.0,safe-area-context >=4.14.0。第五步,编译前执行 cd android && ./gradlew clean,然后 npx react-native run-android。如果遇到 'TurboModuleRegistry' 报错,检查 MainApplication.java 里有没有正确注册。我踩的最大的坑是 react-native-video 6.0 还不支持新架构,只能换回 5.2.1。所以升级前一定去官网看兼容性列表,别头铁。
最后说点大实话
如果你现在项目稳定,RN 0.72 或 0.73 跑得好好的,别急着升 0.76。新架构的收益在大型 App 上才明显,比如启动时间减少 30%,内存占用降低 15% 左右,但代价是编译时间翻倍,CI 构建从 12 分钟变成 25 分钟。我最后是回滚到旧架构了,等 0.78 稳定了再说。另外别信那些“新架构让 RN 性能追上原生”的营销话术,我实测原生 RecyclerView 在同样数据量下滚动 120fps,RN 新架构最多 60fps,差距还在。但 RN 的开发效率确实高,热重载一改就生效,Flutter 的热重载有时候还要重启。所以选型看团队,如果你们原生开发人手够,直接上原生;如果前端人多,RN 新架构值得等。哦对了,Expo 用户更简单,直接 expo prebuild 然后改配置就行,但 EAS Build 免费额度只有 30 次/月,超了要花钱,国内团队慎用。