React Native 架构一览

一.架构设计

整体上分为三大块，Native、JavaScript 与 Bridge：

Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：

最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来。具体的，Shadow Tree 用来定义 UI 效果及交互功能，Native Modules 提供 Native 功能（比如蓝牙），二者之间通过 JSON 消息相互通信

Bridge 层是 React Native 技术的关键，设计上具有 3 个特点：

• 异步（asynchronous）：不依赖于同步通信

• 可序列化（serializable）：保证一切 UI 操作都能序列化成 JSON 并转换回来

• 批处理（batched）：对 Native 调用进行排队，批量处理

将 UI 操作描述成一系列指令，序列化成 JSON 格式的消息：

Just as React DOM turns React state updates into imperative, mutative calls to DOM APIs like document.createElement(attrs) and .appendChild(), React Native was designed to return a single JSON message that lists mutations to perform, like [[“createView”, attrs], [“manageChildren”, …]].