React Native核心原理与性能优化：从Bridge到新架构

1. React Native到底是什么：不是H5套壳，也不是原生开发

先说一个我自己的经历。早年带过一个小团队做双端App，团队里只有iOS和Android各一名原生开发，外加两名偏前端的工程师。业务方需求排期排到三个月后，功能列表长到能当手纸用。当时摆在桌面上的选项就那么几个：两套原生并行开发（人不够）、H5套壳（业务方不答应）、或者赌一把跨端框架。那段时间我们几个核心成员分别啃了Flutter和React Native的Demo，最后选了React Native。原因后面细说，但先要搞清楚一个最基本的问题——React Native到底是个什么东西。

很多人对React Native的理解停留在“用JS写App”，这个说法对了一半。它确实是用JavaScript/TypeScript写业务逻辑，但UI不是用WebView渲染的HTML页面，而是通过框架映射成iOS的UIKit控件和Android的原生View。换句话说，你写的<View>、<Text>、<ScrollView>，最终在屏幕上真的是原生控件在渲染，不是浏览器画出来的。这一点和Cordova、Ionic那类Hybrid方案有本质区别。

从执行流程上看，React Native应用启动时有两套运行环境在并行协作：一套是JavaScript引擎（iOS上是JavaScriptCore，Android上早期也是，现在越来越多场景用Hermes），负责跑业务逻辑、状态管理、事件处理；另一套是原生运行环境，负责UI渲染、网络请求、文件读写、定位、摄像头等系统能力。两套环境之间靠一个叫“Bridge”的机制通信。

用一句话概括：React Native是一个用JS描述UI和业务逻辑、用原生控件完成渲染的跨端框架。它既拿走了Web生态的开发效率和动态性，又保留了原生应用的用户体验和系统能力。

顺着这个本质往下看，几个概念就自然分清了：

• React Native不是WebView套壳。页面渲染不依赖浏览器内核，UI控件全部映射为原生组件。
• React Native不是响应式Web页面塞进App。它的布局系统是Yoga（一个跨平台的Flexbox实现），虽然长得像CSS，但最终产出的是原生视图层级。
• React Native也不是游戏引擎。它不适合高频复杂动画和重度图形计算，那块还得靠SceneKit、Metal或者游戏引擎。

React Native的官方口号是"Learn once, write anywhere"，注意，它刻意没说"Write once, run anywhere"。这背后是有考量的。Java当年的口号让太多人踩了跨平台兼容性的坑，React Native从一开始就承认：你不能指望一份代码在所有平台上一模一样地跑，但你可以用同一套心智模型、同一个技术栈去应对多个平台。

那React Native适合谁学、适合谁用？我的判断是：

• 团队里前端工程师多、原生开发资源紧，想快速覆盖双端业务。
• 业务迭代快、需要频繁发版，同时在意首屏性能和交互体验。
• 已经有React Web项目，想复用组件逻辑和工程经验。
• 原生App已经存在，想把部分模块（如账号、设置、详情页）用React Native做动态化改造。

它不是银弹，但在正确的场景下，它确实是效率极高的方案。后面几个章节我会把原理、优势、短板和启动白屏这个高频问题完整摊开来讲，尽量把经验说透。

2. 桥与线程模型：理解React Native的核心运作机制

2.1 两套环境、三个线程

要理解React Native为什么有性能瓶颈、为什么会有白屏、为什么某些操作必须放到原生端，绕不开线程模型。我尽量用不枯燥的方式讲。

React Native运行时有三个核心线程：

• UI线程（主线程）：负责原生控件的渲染、用户交互响应。所有UIKit/Android View的操作必须在这里执行。
• JS线程：负责执行JavaScript代码。业务逻辑、状态计算、Diff计算、事件生成都在这里跑。
• 原生模块线程：负责调用原生API，比如网络请求、数据库读写、文件IO等耗时操作，避免阻塞UI线程。

三个线程之间靠Bridge通信。Bridge本质上是一个异步消息队列，JS端把调用请求序列化成消息发给原生端，原生端执行完再把结果序列化返回给JS端。这个过程看似简洁，但有两个关键代价：

第一，消息序列化开销大。每一次跨桥通信，数据都要经历“JS对象 -> JSON字符串 -> 原生对象”的转换，反之亦然。如果你的页面上有一个大列表滚动，每滚一帧就可能产生大量跨桥调用，光序列化就能把JS线程跑满。

第二，跨桥调用是异步的。JS发起一个原生调用后不能立刻拿到结果，必须等回调。这导致某些场景下会出现视觉上的延迟，比如键盘弹起、输入框聚焦、滚动位置同步等交互类操作。

生活化类比：Bridge就是两个国家之间的海关口岸。货品（数据）想从A国运到B国，必须装车、过海关、查验、卸货。车多了，口岸就堵。货少了，还能勉强运转；货一多，整个系统就开始排队。

2.2 为什么说Bridge曾是性能瓶颈

React Native早期版本的性能问题，绝大多数都能归因到Bridge。举个例子：快速滚动一个包含复杂列表项的长列表时，列表项的每次