核心架构

概述

React Native是一个框架，允许开发人员使用React的声明式编程模型构建移动应用程序，同时访问原生平台功能。该架构在JavaScript和原生平台代码之间建立桥梁，使开发人员能够使用JavaScript编写应用程序逻辑，并使用原生UI组件进行渲染。

来源

packages/react-native/package.json
README.md

核心架构层

React Native的架构可分为三个主要层次

JavaScript层：React组件和应用程序逻辑所在的位置
桥接/通信层：促进JavaScript和原生代码之间的通信
原生平台层：平台特定的实现（iOS/Android），用于渲染UI并提供设备功能访问

来源

packages/react-native/Libraries/vendor/emitter/EventEmitter.js
packages/react-native/Libraries/AppState/AppState.js

JavaScript层

JavaScript层是开发人员使用React编写应用程序逻辑的地方。该层包括：

React Core：React库本身，提供组件模型
React Native组件：预构建的组件，如View、Text和Image
JavaScript模块：用于网络、存储等平台功能的API
应用程序代码：开发人员实际编写的应用程序

事件处理

React Native使用事件系统来处理原生组件和JavaScript之间的通信。EventEmitter系统为JavaScript组件提供了一种订阅原生组件事件的方式。

来源

packages/react-native/Libraries/vendor/emitter/EventEmitter.js:69-174
packages/react-native/Libraries/EventEmitter/mocks/NativeEventEmitter.js

桥接/通信层

通信层负责促进JavaScript和原生代码之间的消息传递。React Native在其通信层实现方面经历了不同的演变。

旧版桥接

在原始架构中，React Native使用基于消息的异步桥接在JavaScript和原生平台之间进行通信。此桥接使用JSON序列化在两端之间传递的所有数据。

JavaScript Interface (JSI)

新架构引入了JSI，它在JavaScript和C++之间提供了直接的同步通信。这消除了旧版桥接的序列化/反序列化开销。

来源

CHANGELOG.md

TurboModules

TurboModules提供了一种通过JSI同步与原生模块交互的方式。它们取代了旧架构中的异步原生模块系统。

CodeGen

CodeGen是一个构建时工具，可从JavaScript规范生成必要原生代码绑定。Fabric和TurboModules都使用它来创建JavaScript和原生代码之间的接口。

来源

packages/react-native-codegen/package.json
packages/babel-plugin-codegen/package.json

Fabric渲染系统

Fabric是React Native新架构中的渲染系统。它用更高效、线程安全的实现取代了旧版渲染器。

Shadow Tree

Fabric的核心概念是Shadow Tree，它是React组件树的C++实现，负责处理布局计算并管理React与原生视图之间的同步。

来源

packages/react-native/package.json:145-183

Yoga布局引擎

Yoga是一个跨平台布局引擎，实现了Flexbox。React Native使用它来计算组件的布局。Yoga引擎从React组件获取样式属性，并计算视图的确切位置和尺寸。

特定平台实现

React Native为每个支持的平台都有专门的原生实现。

Android 实现

在Android上，React Native集成了Android SDK，并使用Java/Kotlin在JavaScript运行时和原生组件之间进行桥接。

关键组件

ReactInstanceManager：管理React实例和生命周期
FabricUIManager：在Fabric架构中管理UI组件
ViewManagers：创建和更新原生视图

iOS 实现

在iOS上，React Native使用Objective-C/Swift并集成UIKit。

关键组件

RCTBridge：管理JavaScript执行环境
RCTRootView：React Native组件的容器
RCTViewManagers：创建和更新原生UIView

JavaScript 运行时

React Native支持不同的JavaScript引擎。

Hermes

Hermes是一个轻量级的JavaScript引擎，针对React Native进行了优化。它提高了启动时间，减少了内存使用，并减小了应用程序的大小。

JSC (JavaScriptCore)

React Native传统的JavaScript引擎，尤其是在iOS上。

来源

packages/react-native/package.json:82-85

打包和开发工具

Metro Bundler

Metro是React Native使用的JavaScript打包器。它接收应用程序的JavaScript代码及其依赖项，并将它们打包成一个文件，由JavaScript引擎执行。

主要职责

解析依赖
使用Babel转换JavaScript
打包资源
开发过程中的热重载

来源

packages/metro-config/package.json
packages/react-native-babel-transformer/package.json
packages/react-native-babel-transformer/src/index.js

功能标志系统

React Native使用特性标志系统来控制不同架构组件的激活。这使得可以从旧架构逐步过渡到新架构。

重要的特性标志包括：

enableFabricRenderer：控制Fabric渲染系统的使用
useTurboModules：控制TurboModule系统的使用
enableBridgelessArchitecture：控制无桥接架构的使用

来源

CHANGELOG.md:130-131

软件包结构

React Native组织为一个包含多个包的monorepo。

包	目的
`react-native`	包含核心功能的包
`@react-native/codegen`	原生接口的代码生成
`@react-native/metro-config`	Metro打包器配置
`@react-native/babel-transformer`	React Native的Babel转换
`@react-native/community-cli-plugin`	CLI命令
`@react-native/assets-registry`	资源管理
`@react-native/normalize-colors`	颜色标准化实用工具
`@react-native/virtualized-lists`	优化的列表组件

来源

package.json:40-44
packages/react-native/package.json
packages/community-cli-plugin/package.json
packages/react-native-codegen/package.json
packages/normalize-color/package.json
packages/virtualized-lists/package.json

开发流程

来源

packages/community-cli-plugin/package.json
packages/rn-tester/package.json

结论

React Native核心架构提供了一个复杂的系统，用于构建具有原生功能的跨平台移动应用程序。通过在JavaScript和原生平台代码之间建立桥梁，它允许开发人员使用单一代码库为多个平台创建应用程序，同时保持原生外观、感觉和性能。

该架构已从最初的基于桥接的实现演进为使用JSI、Fabric和TurboModules的更高效系统。这些改进提供了更好的性能、增强的开发人员体验以及对复杂应用程序的更大能力。