2025年reactui组件（react ui组件）

大家好，我是讯享网，很高兴认识大家。

 <p> 作者：京东零售 朱鸣辉</p>

讯享网

讯享网基于 Taro 打造的京东<u>鸿蒙</u> APP 已跟随鸿蒙 Next 系统公测，本系列文章将深入解析 Taro 如何实现使用 Re<u>ac</u>t 开发高性能鸿蒙应用的技术内幕</p>

背景</p>

讯享网随着鸿蒙<u>操作系统</u>的快速发展，<u>开发者</u>们期待将现有跨平台应用迁移到鸿蒙平台。Taro作为一个流行的跨平台开发框架，其支持<u>鸿蒙系统</u>的可能性引起了广泛关注。</p>

然而，鸿蒙系统采用全新的ArkUI框架作为原生UI开发方案，与Taro原本支持的平台存在显著差异。将Taro的React开发模式与ArkUI的声明式UI开发范式进行有效对接成为了一个技术难题。</p>

讯享网本文将探讨Taro框架如何通过创新方案实现React代码在ArkUI上的运行。我们将解析Taro的运行时原理，剖析其如何将React组件转换为ArkUI可识别的结构，以及相关技术挑战和解决方案。</p>

Taro运行时原理介绍</p>

讯享网为了理解Taro适配ArkUI的核心机制，我们首先需要深入了解Taro的运行时原理。Taro通过巧妙的设计，将React代码转换为各平台可执行的形式，其中包括对鸿蒙平台的适配。下面将详细介绍 Taro 是如何将 React 代码转换为ArkUI可执行的形式，以及节点转换的流程细节。</p>

<img src="https://file1.elecfans.com//web1/M00/F3/6C/wKgaoWcXQA-AX6UzABGMbiseADc620.png" alt="wKgaoWcXQA-AX6UzABGMbiseADc620.png" /></p>

讯享网1. 从 React 到 Taro</p>

React 跨平台的秘诀</p>

讯享网在 Taro 的运行时中，首先执行的是开发者编写的 React 业务代码。这些代码定义了业务应用的结构、逻辑和状态管理。那么既然要对接React，那肯定先得了解它的核心架构，React是怎么运作的：</p>

<img src="https://file1.elecfans.com//web1/M00/F3/6C/wKgZoWcXQBOAUyutABPiFdo-BPA686.png" alt="wKgZoWcXQBOAUyutABPiFdo-BPA686.png" /></p>

讯享网<br /> </p>

了解了React的基本架构后，我们可以清晰地看到，<strong>Renderer</strong> 作为渲染器，负责将React的虚拟节点操作最终映射到相应的平台上。例如，react-dom将这些操作对接到浏览器上，而react-na<u>ti</u>ve则将其对接到<u>iOS</u>或<u>Android</u>平台。这种设计使得React能够适配不同的运行环境。</p>

讯享网<img src="https://file1.elecfans.com//web1/M00/F3/6C/wKgZoWcXQBaAXIhDABLU5H_VvK4697.png" alt="wKgZoWcXQBaAXIhDABLU5H_VvK4697.png" /></p>

正是基于这种思路，Taro 团队设计了 <strong>Taro Renderer</strong>。这个渲染器充当了 React 与 Taro 虚拟节点树之间的桥梁，使得 React 的操作可以被转换为 Taro 的中间表示。</p>

讯享网通过实现 Taro Renderer 生成 Taro 虚拟节点树</p>

<img src="https://file1.elecfans.com//web1/M00/F3/6C/wKgaoWcXQBeASkU4AAU2ooqu32s867.png" alt="wKgaoWcXQBeASkU4AAU2ooqu32s867.png" /></p>

讯享网HostConfig<u>接口</u>实现</p>

<br /> </p>

讯享网要实现 Taro 的 Renderer，我们需要实现 React Reconciler 所需的 hostConfig 接口。这个接口定义了一系列方法，用于创建、更新和管理渲染目标平台的元素。以下是一些关键的 hostConfig 方法：</p>

•<strong>createElement：</strong>创建ArkUI对应的元素。</p>

讯享网•<strong>createTextInstance</strong>：创建文本节点。</p>

•<strong>appen<u>dC</u>hild：</strong>将子元素添加到父元素。</p>

讯享网•<strong>removeChild：</strong>从父元素中移除子元素。</p>

•<strong>insertBef<u>or</u>e：</strong>在指定位置插入元素。</p>

讯享网•<strong>commitUpdate：</strong>更新元素属性。</p>

通过实现这些方法，<strong>Taro Rendere</strong>r 能够将<strong> React 的操作转换为 Taro 虚拟节点树的相应操作</strong>。这个虚拟节点树是 Taro 实现跨平台的核心，它为不同平台的渲染提供了统一的中间表示。</p>

讯享网</p>

 // 部分HostConfig接口实现的代码

const hostConfig: HostConfig {

讯享网// 创建Taro虚拟节点

createInstance (type, props: Props, _rootContainerInstance, _hostContext, internalInstanceHandle: Fiber) {

const element: TaroElement = TaroNativeModule.createTaroNode(type) precacheFiberNode(internalInstanceHandle, element) updateFiberProps(element, props) return element

}, // 更新属性

讯享网commitUpdate (dom, updatePaylo<u>ad</u>, _, oldProps, newProps) { updatePropsByPayload(dom, oldProps, updatePayload) updateFiberProps(dom, newProps) }, // 插入节点 insertBefore (parent: TaroElement, child: TaroElement, refChild: TaroElement) { parent.insertBefore(child, refChild) }, // 移除节点 removeChild (parent: TaroElement, child TaroElement) { parent.removeChild(child) }, // ...

}

</p>

讯享网2. 从 Taro 到 ArkUI</p>

在将 Taro 虚拟节点树转换为 ArkUI 的过程中，我们需要进行几个关键步骤：</p>

讯享网<br /> </p>

<img src="https://file1.elecfans.com//web1/M00/F3/6C/wKgZoWcXQBuAXDLKAAiIYMZZYbo181.png" alt="wKgZoWcXQBuAXDLKAAiIYMZZYbo181.png" /></p>

讯享网Taro Element转换 ArkUI过程</p>

讯享网

首先，我们需要在 ArkUI 层面<strong>实现一套与 Taro 组件对应的组件库</strong>。这个步骤至关重要，因为它建立了 Taro 组件和 ArkUI 组件之间的映射关系。例如，我们需要为 Taro 的 View、Text、Image 等基础组件创建对应的 ArkUI 组件。这样，当我们遍历 Taro 虚拟节点树时，就能找到每个节点在 ArkUI 中的对应实现。</p>

讯享网<br /> </p>

在节点映射的过程中，我们注意到 Taro 虚拟节点树与实际 ArkUI 视图结构存在差异。这些差异主要体现在以下几个方面：</p>

讯享网•<strong>复合组件结构：</strong>某些 Taro 组件在 ArkUI 中可能需要多个组件配合实现。例如，ScrollView 组件在 ArkUI 中可能需要一个 Scroll 节点搭配一个 Stack 来实现完整功能。</p>

•<strong>层级位置调整：</strong>一些特殊定位的节点（如 Fixed 定位的元素）在最终渲染时的位置可能与其在虚拟节点树中的层级不一致。这需要在生成渲染树时进行特殊处理。</p>

讯享网•<strong>平台特定组件：</strong>某些 Taro 组件可能需要使用 ArkUI 特有的组件或布局方式来实现，这要求我们在转换过程中进行适当的调整和映射。</p>

<img src="https://file1.elecfans.com//web1/M00/F3/6C/wKgaoWcXQB2AKlzcAAkvMJEcN_w449.png" alt="wKgaoWcXQB2AKlzcAAkvMJEcN_w449.png" /></p>

讯享网因此，在生成渲染树时，我们需要一个更复杂的转换过程，不仅要考虑简单的一对一映射，还要处理这些结构性的差异，确保最终生成的 ArkUI 组件树能够正确反映预期的视图结构和布局。<strong>因此，在Taro > ArkUI的节点对接中，我们需要维护一棵 Render Tree，用于做中间的桥梁。</strong></p>

<br /> </p>

讯享网1. 根据组件类型 创建 Taro Element</p>

在创建 Taro Element 的过程中，我们根据组件的类型来实例化相应的 Taro 元素。这一步骤是将 React 组件转换为 Taro 内部表示的关键。</p>

讯享网</p>

 // 根据组件类型创建对应的Taro节点 std::shared_ptr< TaroElement > TaroDocument::CreateElement(napi_value &node) {

讯享网 // 获取组件类型 TAG_NAME tag_name_ = TaroDOM::TaroElement::GetTagName(node); // 根据组件类型，创建对应的实例 std::shared_ptr< TaroDOM::TaroElement > item; switch (tag_name_) { case TAG_NAME::SCROLL_VIEW: { item = std::make_shared< TaroDOM::TaroScrollView >(node); break; } case TAG_NAME::IMAGE: item = std::make_shared< TaroDOM::TaroImage >(node); break; } case TAG_NAME::SPAN: case TAG_NAME::TEXT: { item = std::make_shared< TaroDOM::TaroText >(node); break; } case TAG_NAME::SWIPER: { item = std::make_shared< TaroDOM::TaroSwiper >(node); break; } // ... } return item;

}

</p>

讯享网2. Taro Element 创建 Taro RenderNode</p>

在创建完 Taro Element 之后，下一步是将其转换为 Taro RenderNode。这个过程是将 Taro 的内部表示进一步转化为更接近 ArkUI 结构的渲染节点。</p>

讯享网</p>

 // 创建 Taro RenderNode void TaroSwiper::Build() {

讯享网if (!is_init_) { // create render node TaroElementRef element = std::stat<u>ic</u>_pointer_cast< TaroElement >(shared_from_this()); auto render_swiper = std::make_shared< TaroSwiperNode >(element); render_swiper->Build(); }

}

</p>

讯享网3. Taro RenderNode 创建 ArkUI Node</p>

最后一步是将 Taro RenderNode 转换为实际的 ArkUI 节点。这个过程涉及到直接与 ArkUI 的底层 API 交互，创建和配置 ArkUI 的原生节点。实现了从 Taro 的渲染节点到 ArkUI 实际可渲染节点的最终转换。</p>

讯享网</p>

 // 创建 ArkUI Node void TaroSwiperNode::Build() {

讯享网NativeNodeApi *nativeNodeApi = NativeNodeApi::getInstance(); // 创建一个Swiper的ArkUI节点 SetArkUINodeHandle(nativeNodeApi->createNode(ARKUI_NODE_SWIPER));

}

</p>

讯享网通过这三个步骤，我们在 <u>C++</u> 层面成功实现了 React 组件结构到 ArkUI 原生组件结构的映射。这一过程使 Taro 应用能够在鸿蒙系统上准确地渲染和运行，为跨平台开发提供了有力支持。</p>

总结</p>

讯享网最后总结下，本文探讨了Taro框架如何将React代码成功运行在鸿蒙系统的ArkUI上。这个过程主要分为两个关键部分：</p>

<img src="https://file1.elecfans.com//web1/M00/F3/6C/wKgaoWcXQB-AfkaKAAmbVAbNNpQ388.png" alt="wKgaoWcXQB-AfkaKAAmbVAbNNpQ388.png" /></p>

讯享网React > ArkUI 架构图</p>

1. Taro对接React</p>

讯享网Taro通过实现自定义的Renderer来对接React。这个Renderer包含了一系列方法，如createInstance、commitUpdate等，用于将React的操作转换为Taro虚拟节点树的操作。这个虚拟节点树是Taro实现跨平台的核心，为不同平台的渲染提供了统一的中间表示。</p>

2. Taro对接ArkUI</p>

讯享网Taro通过自定义Renderer将React操作转换为虚拟节点树，然后通过三步转换过程将其映射到ArkUI结构。这个过程涉及Taro Element、Taro RenderNode和ArkUI Node这三棵树的维护，主要通过这三个流程步骤实现：</p>

1.<strong>创建Taro Element：</strong>这一步将React组件转换为Taro内部表示。</p>

讯享网2.<strong>创建Taro RenderNode：</strong>将Taro的内部表示进一步转化为更接近ArkUI层级结构的渲染节点。</p>

3.<strong>创建ArkUI Node：</strong>最后一步是将Taro RenderNode转换为实际的ArkUI节点，直接与ArkUI的底层API交互。</p>

讯享网通过这种方式，Taro成功地将React组件结构映射到ArkUI原生组件结构，使得Taro应用能够在鸿蒙系统上准确地渲染和运行，同时也为跨平台开发提供了有力支持。</p>

<br /> 系列往期精选：</p>

讯享网《京东鸿蒙上线前瞻——使用 Taro 打造高性能原生应用》</p>

2025年reactui组件（react ui组件）

相关推荐