摘要：Hippy 框架能够将 Web 语言（如 React 或 Vue）编写的界面转换为原生控件进行渲染，其核心在于一个分层、跨语言协作的架构。它大致通过 JS 引擎驱动、C++ 中间层桥接、以及原生渲染层协作来完成。下面这个流程图概括了其主要过程：
Hippy 框架能够将 Web 语言（如 React 或 Vue）编写的界面转换为原生控件进行渲染，其核心在于一个 分层、跨语言协作的架构 。它大致通过 JS 引擎驱动、C++ 中间层桥接、以及原生渲染层协作来完成。下面这个流程图概括了其主要过程：
flowchart TDA["Web开发语言(React/Vue组件与逻辑)"] --> B["JS引擎层
(JSC/Hermes/V8)"]B --> C["Hippy Core (C++)
NAPI桥接与布局引擎"]C --> D["原生渲染层
(iOS/Android)"]B -->|执行JS代码| E["JS Bundle"]E -->|调用| F["Hippy JS SDK
基础模块与通信"]F -->|通过NAPI与C++ Module交互| CC -->|计算布局| G["Layout Engine
(Flex布局)"]G -->|传递布局信息| DC -->|映射组件| H["Native UI Components(TextView/ImageView等)"]H -->|原生API渲染| I["最终原生界面"]
下面我们来分步解析这个过程。
Hippy 使用 JavaScript 引擎 （如 JavaScriptCore、V8 或 Hermes）来解析和执行开发者编写的 React 或 Vue 代码及其打包后的 JS Bundle。
前端框架适配层 : Hippy 提供了 hippy-react 和 hippy-vue 包。这些包将 React 或 Vue 的组件结构和生命周期映射为 Hippy 自身能够理解的结构。 双向通信 : 传统的 JS-Native 通信（如 React Native 中使用的 Bridge）可能存在性能瓶颈。Hippy 在此基础上进行了优化，支持 NAPI（Native API） 和 JSI（JavaScript Interface） 等方式。JSI 允许 JS 和 Native 代码直接通信，避免了传统的异步编解码过程，显著提升了通信效率。这是连接 JavaScript 世界和原生世界的关键中间层，由 C++ 编写，实现了 NAPI 。
模块绑定 : 通过 NAPI，Hippy 将 C++ Module 和 TurboModule 中声明的功能直接暴露给 JS 层。JS 代码可以同步调用这些模块暴露的方法，这些方法最终会调用原生平台（iOS/Android）的具体实现，例如网络请求、文件操作等。 布局计算 : Hippy 内置了一个强大的 自研布局引擎 （早期基于 Yoga，但目前已超越）。这个引擎接收来自 JS 层传递的样式属性（如 width , height , flex 等），并依据 CSS Flexbox 规则计算出每个控件在屏幕上的精确位置和尺寸。计算好的布局信息会传递给原生渲染层。最终，由 iOS 和 Android 的原生平台负责将计算好的布局和属性转换为真实的用户界面。
组件映射 : Hippy 的核心组件（如 , , ）在 JS 层中的标签会分别映射到 iOS 的 UIView / UILabel / UIImageView 和 Android 的 View / TextView / ImageView 等原生控件。 属性传递 : 设置在 JSX 或 Vue 模板中的样式和属性（如 color , fontSize , backgroundColor ），会通过 Hippy Core 层传递到原生端，并调用原生控件的对应方法进行设置（例如在 Android 上调用 TextView.setText 或 View.setBackground ）。 扩展性 : Hippy 允许开发者封装自定义的原生 UI 组件。通过在原生端继承 HippyViewController （Android）或 RCTViewManager （iOS），并注册到 Hippy 中，就可以在 JS 代码中使用这些自定义组件。Hippy 的转换渲染过程可以概括为： JS 引擎执行前端框架代码 → 通过 C++ 核心层（NAPI）进行桥接和布局计算 → 调用原生平台 API 进行控件渲染 。这种设计力图在开发效率（使用熟悉的 Web 技术栈）、性能（接近原生的体验）和一致性（减少双端差异）之间取得平衡。
希望以上解释能帮助你理解 Hippy 的工作原理。如果你对某个特定部分（比如自定义原生组件，或 JSI 的工作原理）感兴趣，我很乐意提供更详细的信息。
来源：墨码行者
