hippy的主要原理

Hippy 框架能够将 Web 语言（如 React 或 Vue）编写的界面转换为原生控件进行渲染，其核心在于一个分层、跨语言协作的架构。它大致通过 JS 引擎驱动、C++ 中间层桥接、以及原生渲染层协作来完成。下面这个流程图概括了其主要过程：

下面我们来分步解析这个过程。

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 的核心组件（如 <View>, <Text>, <Image>）在 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 在架构设计上注重保证双端一致性和提升性能。

双端一致性 : Hippy 3.0 将动画等关键逻辑下沉到 C++ 层统一实现，确保了不同平台上动画效果和行为的一致性，减少了开发者为双端差异做适配的工作量。
高性能: Hippy 采用了多种性能优化策略，例如：
- 引擎预加载: 提前初始化 Hippy 引擎和上下文，大幅减少页面启动时间。
- Hermes 引擎与 Bytecode: 集成 Hermes 引擎并支持预编译 JS 为 Bytecode，直接加载 Bytecode 可以跳过引擎编译阶段，极大提升 JS 代码的加载和执行速度。
- 列表优化: 提供高性能的可回收列表组件，用于流畅渲染长列表。

Hippy 的转换渲染过程可以概括为：JS 引擎执行前端框架代码 → 通过 C++ 核心层（NAPI）进行桥接和布局计算 → 调用原生平台 API 进行控件渲染。这种设计力图在开发效率（使用熟悉的 Web 技术栈）、性能（接近原生的体验）和一致性（减少双端差异）之间取得平衡。

希望以上解释能帮助你理解 Hippy 的工作原理。如果你对某个特定部分（比如自定义原生组件，或 JSI 的工作原理）感兴趣，我很乐意提供更详细的信息。