手帐 Blog

主题

14 · RN 生产进阶清单 ​

目标：在系统/交互与 Fabric 心智之上，划清商业级 RN 还要补的五块：新架构、列表性能、OTA、原生通信、存储与状态。
前置：13 · 安全区与核心组件
下一篇：系列入口：多端 README

我们前面把 RN 的推送、权限管理、动画机制（Reanimated）以及手势系统（RNGH）这几个最核心、最硬核的交互与系统级模块都拆透了。

如果把 React Native 的知识体系比作一座大厦，除了前面这些，生产环境中决定一个 RN 项目是“玩具”还是“商业级应用”的核心板块还有以下 5 个：

1. RN 新架构（New Architecture）：Fabric & TurboModules ​

这是当前 RN 社区最大的技术演进（也是面试和架构选型必问）：

  • 旧架构痛点：依靠 JSON 通过 Bridge（桥）进行异步通信，滑动大列表或频繁动画时容易卡顿（Bridge 拥堵）。
  • 新架构核心：JSI（JavaScript Interface）。
  • TurboModules：原生模块（如蓝牙、定位）不再在 App 启动时全部初始化，而是懒加载，且 JS 可以通过 JSI 直接同步调用 C++ / Native 方法。
  • Fabric：新的渲染引擎，将 UI 视图树直接暴露给 JS，渲染不再经过异步桥，支持 React 18 的 Concurrent（并发）特性。

2. 大列表性能优化（List Performance） ​

移动端最容易造成页面卡顿的就是“无限滚动列表”。

  • 标准 FlatList 的瓶颈：当列表有几千条数据时，即使有 getItemLayout 或 windowSize 优化，内存占用依然会暴涨。
  • 行业终极解法：FlashList（Shopify 开源）。
  • 它的核心机制是 Cell Recycle（单元格复用），类似于 Android 的 RecyclerView 或 iOS 的 UITableView。滑出屏幕的组件不会被销毁，而是直接更换数据复用，能将列表性能提升 5~10 倍。

3. 热更新与打包构建（CodePush & OTA Update） ​

RN 相比纯原生最大的商业优势之一：不用经过 App Store / Google Play 繁琐的审核，就能实时修复 Bug 或更新业务。

  • 原理：RN 的代码分为两部分 —— 原生壳（iOS/Android C++/Java/OC 代码）和 JS Bundle 包。只要不修改原生底层代码，只修改 JS/TS 业务代码，就可以直接从服务器下载新的 Bundle 替换本地文件。
  • 方案：微软的 CodePush、Expo Updates，以及搭建私有的 OTA 更新服务器。

4. 原生双向通信与 Bridge / Fabric 自定义 Native 模块 ​

当你现有的 RN 社区库无法满足需求，或者需要接入第三方原生 SDK（如某个银行的刷脸 SDK、特定硬件设备的蓝牙协议）时：

  • JS 调用 Native：如何编写 iOS (Swift/OC) 和 Android (Kotlin/Java) 的 Native Module 并暴露方法给 JS。
  • Native 主动通知 JS：如何使用 RCTDeviceEventEmitter / EventEmitter 从原生层向 JS 线程发送事件（例如：手机传感器数据实时上报）。

5. 跨端持久化存储与状态管理（Storage & State） ​

移动端的数据存储和 Web 端有很大不同：

  • 同步高效存储：传统的 AsyncStorage 是基于 Bridge 异步读写的，性能一般。现代 RN 项目多采用基于 MMKV（微信开源）的库（如 react-native-mmkv），通过 JSI 做到同步高并发读写，速度比 AsyncStorage 快 30 倍以上。
  • 状态管理选型：Zustand / Redux Toolkit / Jotai 在 RN 内存占用和长后台生命周期中的表现与处理。

知识体系总结图 ​

text
React Native 核心版图
 ├── 1. 系统与交互 (已讨论)  ─── 远程推送 / 权限处理 / Reanimated 动画 / RNGH 手势
 ├── 2. 底层架构 (核心)      ─── JSI / TurboModules / Fabric 新渲染引擎
 ├── 3. 性能与渲染 (关键)    ─── FlashList 单元格复用 / 图片缓存优化 (FastImage)
 ├── 4. 原生通信 (进阶)      ─── 自定义 Native Module / Native 桥接第三方 SDK
 └── 5. 工程化与发布 (落地)  ─── 热更新 (CodePush) / MMKV 本地存储 / CI/CD 打包