Skip to main content

桥接结构

React Native 的原来的异步桥调用机制是这个框架的核心部分，它允许 JavaScript 代码与原生模块（如 iOS 或 Android 的原生组件）进行通信。这个机制的原理和工作流程可以概括如下：

  1. 桥的概念
  • 桥（Bridge）：在 React Native 中，"桥"是一个抽象层，它充当了 JavaScript 运行环境和原生平台之间的中介。
  • 异步通信：桥使得 JavaScript 和原生代码之间可以进行异步通信。这意味着 JavaScript 发起的调用会被放入一个事件队列中，然后在原生侧异步处理。
  1. 数据序列化和反序列化
  • 数据传输：当 JavaScript 需要调用原生模块的功能时，相关的数据（如参数）需要通过桥传递到原生侧。
  • 序列化：为了跨越不同的运行环境，这些数据首先在 JavaScript 端被序列化（转换为一种线性格式，如 JSON）。
  • 反序列化：原生侧接收到数据后，会进行反序列化（将线性格式的数据转换回原生理解的格式），然后处理这些调用。
  1. 事件循环和消息队列
  • 事件循环：React Native 使用事件循环来处理 JavaScript 和原生之间的通信。这个循环负责监听事件队列，处理事件。
  • 消息队列：所有的调用请求和回调都被放入一个消息队列中，然后按顺序在原生侧执行。
  1. 回调和事件
  • 回调：当原生模块完成任务后，结果通常通过回调函数返回给 JavaScript。
  • 事件：原生模块还可以向 JavaScript 发送事件，例如用户交互或系统事件。
  1. 批处理
  • 提高效率：为了提高效率，桥会对多个 JavaScript 调用进行批处理，将它们作为单个批量操作发送到原生侧。
  1. 双向通信
  • JavaScript 到原生：不仅 JavaScript 可以调用原生代码，原生模块也可以调用 JavaScript 端的方法，这通常用于事件处理。

结论​

React Native 的原来的异步桥调用机制为 JavaScript 和原生代码之间的交互提供了一种灵活但相对复杂的方式。虽然这种机制使得跨平台开发成为可能，但它也带来了额外的性能开销，尤其是在需要频繁通信的场景中。这就是为什么 React Native 团队在新的 Fabric 架构中引入了 JSI 来优化这个过程。