CN115809056A

CN115809056A - 组件复用实现方法、装置和终端设备、可读存储介质

Info

Publication number: CN115809056A
Application number: CN202310071639.8A
Authority: CN
Inventors: 王颖奇; 冯斌; 欧阳国栋
Original assignee: Shenzhen Fulin Technology Co Ltd
Current assignee: Shenzhen Fulin Technology Co Ltd
Priority date: 2023-02-07
Filing date: 2023-02-07
Publication date: 2023-03-17
Anticipated expiration: 2043-02-07
Also published as: CN115809056B

Abstract

本申请涉及网页开发技术领域，提供一种组件复用实现方法、装置和终端设备、可读存储介质，该方法包括：基于预定义的多个React组件，构建目标网页界面的虚拟DOM树；在需要引入第三方库进行界面内容显示的情况下，根据调用第三方库的React父组件查找对应的DOM节点，并将第三方库的实例与查找到的DOM节点进行初始化关联；通过React父组件和第三方库的实例将与第三方库关联的界面内容的目标React组件渲染至关联的DOM节点上，进而生成HTML内容并进行显示。该方法通过基于React组件进行网页界面的业务组件的统一定义，使得在不同网页框架下的业务组件可以复用，提高开发效率等。

Description

组件复用实现方法、装置和终端设备、可读存储介质

技术领域

本申请涉及网页开发技术领域，尤其涉及一种组件复用实现方法、装置和终端设备、可读存储介质。

背景技术

在现有的网页（web）前端设计中，主要使用的框架有如Vue、facebook React、google的Angular等，对于这些框架主要基于虚拟DOM（文档对象模型）技术来实现内容渲染。因此，在组件编写的过程中，往往不涉及DOM节点的具体结构。而对于一些传统的功能组件库或者对性能要求较高的组件，如富文本编辑器、甘特图等，一般是通过直接操作对应的DOM节点进行内容渲染的，因此当遇到一个项目里混合使用两种技术时，需要用两种方式去编写相应的业务组件，并且互相之间难以复用，导致开发工作量大，效率低等。

发明内容

有鉴于此，本申请实施例提供一种可应用于不同网页架构下的组件复用实现方法、装置和终端设备、可读存储介质。

第一方面，本申请实施例提供一种组件复用实现方法，包括：

基于预定义的多个React组件，构建目标网页界面的虚拟DOM树；所述虚拟DOM树包括多个DOM节点，每个所述DOM节点与对应的React组件存在映射关系；

在需要引入第三方库进行界面内容显示的情况下，根据调用所述第三方库的React父组件查找对应的DOM节点，并将所述第三方库的实例与查找到的所述DOM节点进行初始化关联；

通过所述React父组件和所述第三方库的实例将目标React组件渲染至关联的所述DOM节点上，进而生成HTML内容；其中，所述目标React组件用于定义与所述第三方库关联的界面内容；

通过所述第三方库的实例将所述HTML内容显示于所述目标网页界面。

在一些实施例中，所述通过所述React父组件和所述第三方库的实例，将目标React组件渲染至关联的所述DOM节点上，进而生成HTML内容，包括：

通过所述React父组件传入定义的内容渲染函数，以使所述第三方库的实例调用所述内容渲染函数；

在所述内容渲染函数的运行过程中，由所述第三方库的实例创建一个临时DOM节点，并在所述临时DOM节点上通过DOM服务渲染函数挂载所述目标React组件的实例并进行实例渲染；

从渲染后的内容中输出相应HTML内容。

在一些实施例中，该组件复用实现方法还包括：

在所述React组件实例首次被挂载后，对所述React组件实例与所述临时DOM节点进行缓存；

当每次需要生成新的内容时，利用缓存的所述React组件实例及更新数据刷新所述临时DOM节点中的渲染生成内容，得到变更后的HTML内容。

在一些实施例中，所述构建目标网页界面的虚拟DOM树，之后还包括：

在需要进行基于第三方库的数据交互的情况下，通过调用第三方库的React父组件将设置的HTML自定义标签注册为一个目标React组件；

在所述React父组件调用第三方库时，由所述第三方库对所述自定义标签进行HTML内容渲染，并通过响应式元素库对所述目标React组件渲染至所述自定义标签对应的DOM节点上；

建立所述目标React组件与所述React父组件之间的监听通道；

基于所述监听通道实现所述React父组件与用户在所述目标React组件的输入操作之间的交互通信。

在一些实施例中，所述建立所述目标React组件与所述React父组件之间的事件监听通道，包括：

根据所述自定义标签对应的DOM节点的HTML属性，获取通道ID；

通过设置的一个全局事件触发实例，建立一条对应于所述通道ID的所述目标React组件与所述React父组件之间的通信通道，并将所述通信通道注册到相应的事件监听器。

在一些实施例中，所述基于所述监听通道进行所述React父组件与用户在所述目标React组件的输入操作之间的通信，包括：

当用户在所述目标React组件中输入相应的操作后，由所述目标React组件通过所述监听通道触发所述React父组件执行对应的操作；

当所述React父组件监听到所述监听通道内的数据事件发生更新，通过所述监听通道获取更新的数据，并触发所述目标网页界面的内容更新。

在一些实施例中，所述构建目标网页界面的虚拟DOM树，包括：

根据目标网页界面中各内容之间的调用关系，确定每个相应内容对应的React组件之间的关系；所述关系包括组件的组合、嵌套中的一种或组合；

根据各个所述React组件之间的所述关系，构建所述目标网页界面的虚拟DOM树。

在一些实施例中，所述虚拟DOM树与所述目标网页界面的真实DOM树存在映射关系；所述构建目标网页界面的虚拟DOM树，之后还包括：

利用差分算法对所述目标网页界面中的所述虚拟DOM树和所述真实DOM树比较，以确定存在的差异；

根据所述差异，对所述真实DOM树进行更新，进而刷新所述目标网页界面。

第二方面，本申请实施例提供一种组件复用实现装置，包括：

构建模块，用于基于预定义的多个React组件，构建目标网页界面的虚拟DOM树；所述虚拟DOM树包括多个DOM节点，每个所述DOM节点与对应的React组件存在映射关系；

初始化模块，用于在需要引入第三方库进行界面内容显示的情况下，根据调用所述第三方库的React父组件查找对应的DOM节点，并将所述第三方库的实例与查找到的所述DOM节点进行初始化关联；

渲染模块，用于通过所述React父组件和所述第三方库的实例将目标React组件渲染至关联的所述DOM节点上，进而生成HTML内容；其中，所述目标React组件用于定义与所述第三方库关联的界面内容；

显示控制模块，用于通过所述第三方库的实例将所述HTML内容显示于所述目标网页界面。

第三方面，本申请实施例提供一种终端设备，所述终端设备包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施所述的组件复用实现方法。

第四方面，本申请实施例提供一种可读存储介质，其存储有计算机程序，所述计算机程序在处理器上执行时，实施所述的组件复用实现方法。

本申请的实施例具有如下有益效果：

本申请实施例的组件复用实现方法通过基于预定义的多个React组件来构建目标网页界面的虚拟DOM树；在需要引入第三方库进行界面内容显示的情况下，根据调用第三方库的React父组件查找对应的DOM节点，并将第三方库的实例与查找到的DOM节点进行初始化关联；通过React父组件和第三方库的实例将与第三方库关联的界面内容的目标React组件渲染至关联的DOM节点上，进而生成HTML内容；最后，显示HTML内容。通过对网页中的组件采用统一的React组件设计，并利用这些React组件来构建目标网页界面的虚拟DOM树，然后基于该DOM树及相应的React组件来实现第三方库的管理及数据交互等场景，可以有效地解决在不同框架内的React组件的复用问题，从而提高开发效率等。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本申请实施例组件复用实现方法的第一流程示意图；

图2示出了一种网页与网页对应的组件图的示意图；

图3示出了本申请实施例组件复用实现方法的基于React父组件和第三方库管理的一种应用示意图；

图4示出了本申请实施例组件复用实现方法的基于React框架的浏览器界面的应用示意图；

图5示出了本申请实施例组件复用实现方法的第二流程示意图；

图6示出了本申请实施例组件复用实现方法的基于React父组件和第三方库管理的另一种应用示意图；

图7示出了本申请实施例组件复用实现装置的第一结构示意图；

图8示出了本申请实施例组件复用实现装置的第二结构示意图；

图9示出了本申请实施例终端设备的一种结构示意图。

具体实施方式

下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。

通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

在下文中，可在本申请的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

除非另有限定，否则这里使用的所有术语(包括技术术语和科学术语)具有与本申请的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本申请的各种实施例中被清楚地限定。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互结合。

对于目前的主流web前端框架下的业务组件，例如，若在一个项目中需要使用一些传统功能组件或对性能要求较高的第三方库时，由于不同前端框架的内容渲染操作方式不同，导致同一业务组件需要采用不同的编写方式来实现，而在不同的网页前端框架之间很难复用，这样导致在后续的前端设计中，每次都需要针对性地去编写业务组件，不仅存在重复开发的问题，开发周期长，而且不利于网页的维护等。

为此，本申请提出一种能够应用于不同的网页框架之间的组件复用实现方法，该方法基于React进行组件的统一定义，并利用这些React组件来构建目标网页界面的虚拟DOM树，然后基于该DOM树及相应的React组件来实现第三方库的管理及数据交互等多种场景，可以有效地解决在不同框架内的React组件的复用问题，从而提高开发效率等。

下面将结合一些具体的实施例来对该组件复用实现方法进行说明。在此之前，先对本申请提及的主要术语进行解释或定义。

React，一种Web开发框架，是用于构建用户界面的JavaScript库；

React组件：是指利用React框架设计/定义的组件；在React组件的调用中，通常地，调用者称为React父组件，被调用者称为React子组件；值得注意的是，在本申请中，被调用的React子组件被称为目标React组件；

DOM，Document Object Model，文档对象模型；在浏览器网页上，组织页面（或文档）的各个对象被组织在一个树形结构中，形成一个包含多个节点的DOM Tree（DOM树），用来表示页面或文档中对象的标准模型；

DOM节点，是指DOM树中的节点，每一个节点都是一个对象，其中，DOM节点有三个重要的属性，分别是nodeName:节点的名称；nodeValue:节点的值；nodeType:节点的类型。

虚拟DOM，即虚拟的文档对象模型，简称VDOM，是一种将浏览器的真实DOM对象用javascript语言表达的资料结构，和其实际表达的真实DOM对象有着一对一的映射关系。

HTML内容，是指通过HTML格式描述的界面内容。

CustomElements，自定义标签，是网页组件化的基础与核心，通常地，开发者可以基于WebComponents 标准能够将 HTML 页面的功能封装为自定义标签。

Reactive Elements，响应式元素，其能够用于将自定义标签注册为React组件，以便通过React组件使用方式进行调用。

下面对本申请的组件复用实现方法的具体过程进行详细说明。

图1示出了本申请实施例的组件复用实现方法的一种流程图。示范性地，该组件复用实现方法包括以下步骤：

步骤S110，基于预定义的多个React组件，构建目标网页界面的虚拟DOM树；其中，该虚拟DOM树包括多个DOM节点，每个DOM节点与对应的React组件存在映射关系。

在一个网页界面中，会存在多个内容部分，组件就是界面上的一内容部分，例如，图2中的（a）所示是一个网页的界面，而图2中的（b）所示即为该网页界面相应内容对应的组件图。其中，在React框架设计的渲染方式下，一个React组件的定义是根据业务数据返回一个DOM树的数据描述，示范性地，对于目标网页界面中的每个内容，可以基于React分别设计出对应的React组件。

在一种实施方式中，目标网页界面的虚拟DOM树的构建过程，可包括：根据目标网页界面中各内容之间的调用关系，确定每个相应内容对应的React组件之间的关系，例如，可包括但不限于是组件之间的简单组合、一级嵌套，也可以是多级嵌套等，这里不作限定；然后根据各个React组件之间的关系，构建该目标网页界面的虚拟DOM树。可以理解，一个React组件实例表示一个虚拟DOM元素，由这些多级嵌套的React组件，可以得知该网页界面的虚拟DOM树是如何构造的。

可以理解，虚拟DOM树与浏览器界面的真实DOM树存在映射关系；其中，浏览器DOM是由HtmlElement元素组成的DOM树，虚拟DOM结构与浏览器DOM结构存在对应关系。而React组件需要映射到HtmlElement才能展示出来，通常地，虚拟DOM树由渲染函数（ReactDom.render）渲染到实际的浏览器DOM节点上，形成最终的HTML界面显示效果。

可选地，针对一些单纯基于React框架的网页界面场景下，由于不涉及一些如富文本编辑器、甘特图等需要引入第三方库的情形，因此，当需要进行网页内容刷新时，则可以通过React技术中的差分（diff）算法来实现。

示范性地，在构建得到目标网页界面的虚拟DOM树之后，可利用差分算法对目标网页界面中的虚拟DOM树和真实DOM树比较，以确定存在的差异；然后根据该差异，对真实的DOM树进行更新，进而刷新该目标网页界面。

本实施例的组件复用实现方法除了可以适用React框架的网页，还可以适用于基于原生DOM操作的HTML网页场景等，并且还可以进一步引入第三方库进行界面内容显示等，对于这类HTML场景，对于采用统一定义的React组件，其组件操作方式如步骤S120。其中，该第三方库可包括但不限于使用，如富文本编辑器、甘特图、蛛网图等功能组件，以及对这些功能组件的管理等。

步骤S120，在需要引入第三方库进行界面内容显示的情况下，根据调用第三方库的React父组件查找对应的DOM节点，并将第三方库的实例与查找到的DOM节点进行初始化关联。

在需要引入第三方库进行界面内容显示时，如通过第三方库进行相关数据展示等，可将定义与第三方库关联的界面内容的该组件记为目标React组件，而调用该第三方库的组件记为React父组件。

为了保证目标React组件的使用时，示范性地，可先通过React父组件查找出该第三方库对应的DOM节点，进而通过初始化操作将该第三方库的实例绑定到该查找到的DOM节点上，以使得该DOM节点可以按照该第三方库设计的方式来接管该第三方库关联的界面内容的渲染过程。其中，通过该第三方库的实例可以实现相应库的调用。

步骤S130，通过React父组件和第三方库的实例将目标React组件渲染至关联的DOM节点上，进而生成HTML内容；其中，该目标React组件用于定义与第三方库关联的界面内容。

本实施例中，将结合React父组件和第三方库的实例一起来实现HTML内容的显示。例如，在一种实施方式中，如图3所示，步骤S130包括：

步骤S131，通过React父组件传入定义的内容渲染函数，以使第三方库的实例调用内容渲染函数。其中，该内容渲染函数是指用于实现将组件渲染至对应DOM节点的函数（即renderContent），其可以通过React父组件传给第三方库的实例，以便第三方库的实例进行渲染。

步骤S132，在内容渲染函数的运行过程中，由第三方库的实例创建一个临时DOM节点，并在临时DOM节点上通过DOM服务渲染函数挂载目标React组件的实例并进行实例渲染。其中，DOM服务渲染函数为ReactDOMServer.render()函数。

步骤S133，从渲染后的内容中输出相应HTML内容。

示范性地，在renderContent的执行过程中，可通过javascript语言创建一个临时的DOM节点，也即DIV节点，以用于实现React组件的实例渲染；以及创建一个与目标React组件对应的实例。通过函数ReactDOMServer.render()完成渲染后，实例渲染的内容将成为该DIV节点的子节点内容。最后，通过div.innerHTML函数可以获得所需的HTML内容，然后由第三方库的实例将获得的HTML内容绘制到网页界面上，即步骤S140。至此实现了HTML框架下的React组件的使用。

可以理解，在上述使用React组件的过程中，涉及到DIV这一临时节点的创建及目标React组件实例的挂载操作，若需要频繁调用该目标React组件时，可能会面临频繁地进行组件实例的挂载及临时节点的创建等操作，此时会消耗较多的系统资源，因此函数renderContent需要被执行多次时，可以按照如下方式进行优化。

可选地，该组件复用实现还包括：在React组件实例首次被挂载后，对React组件实例与该临时DOM节点进行缓存；然后，当每次需要生成新的内容时，利用缓存的React组件实例及更新数据刷新该临时DOM节点中的渲染生成内容，得到变更后的HTML内容。

可以理解，通过将函数renderContent临时挂载的React组件实例及DIV节点进行缓存，这样每次需要生成新的内容时，可以直接利用已有的React组件实例根据更新的数据来刷新该DIV节点下的子节点内容，从而生成变更后的HTML内容。这一缓存操作，可以大大减少性能的消耗等。

步骤S140，通过第三方库的实例将HTML内容显示于目标网页界面。

最后，将得到的与第三方库相关的内容显示至网页界面中。

以一甘特图库为例，如图4所示，当React父组件在目标网页界面内引入一个甘特图的库，可先查找到对应的浏览器DOM节点，并将甘特图库的实例（gantt）初始化绑定到这个DOM节点上。接着，由React父组件传入内容定义（即renderContent函数）到实例gantt，当实例gantt需要进行渲染的时候，会调用renderContent来创建相应的DIV节点，以及创建目标React组件的实例，进而，通过函数ReactHelper.reactWebComponentToHtml()将基于React定义的web组件转换为HTML元素，然后通过函数ReactDOMServer.render()将目标React组件的实例渲染至对应的DOM节点中，从而获取生成的HTML内容。最后，由实例gantt将得到的HTML内容进行界面显示。

此外，考虑到在一些特定的场景下，比如在富文本编辑器中里面插入工作项筛选器卡片等，这样不仅仅需要使用React组件生成展示内容，还需要使用React完成一些数据交互的操作，因此，本实施例还提出在React接入了第三方库以后，仍然可以使用React组件完成数据交互操作的组件复用实现方法。

作为一种可选的方案，如图5所示，在需要进行基于第三方库的数据交互，该方法还包括：

步骤S210，基于预定义的多个React组件，构建目标网页界面的虚拟DOM树；其中，该虚拟DOM树包括多个DOM节点，每个DOM节点与对应的React组件存在映射关系。

步骤S220，在需要进行基于第三方库的数据交互的情况下，通过调用第三方库的React父组件将设置的HTML自定义标签注册为一个目标React组件。其中，利用浏览器WebComponents标准，可以定义HTML的自定义标签，并且在标签内生成自己定义的HTML内容。例如，可以定义上述的筛选器卡片等标签。

步骤S230，在React父组件调用第三方库时，由第三方库对自定义标签进行HTML内容渲染，并通过响应式元素库对目标React组件渲染至自定义标签对应的DOM节点上。

示范性地，如图6所示，可由第三方库直接将该自定义标签渲染成HTML元素，同时在渲染过程中，通过响应式元素库（即ReactiveElements库）会实现对目标React组件的实例初始化过程，进而将该组件实例渲染到对应的DOM节点上，而渲染后的内容即成为该DOM节点下的内容。

步骤S240，建立目标React组件与React父组件之间的监听通道，并基于监听通道实现React父组件与用户在目标React组件的输入操作之间的交互通信。

在一种实施方式中，在建立目标React组件与React父组件之间的事件监听通道时，可根据该自定义标签对应的DOM节点的HTML属性（HTMLattribute），获取通道ID（即channel ID）；然后通过创建的一个全局的事件触发（EventEmitter）实例，建立一条对应于通道ID的目标React组件与React父组件之间的通信通道，并将该通信通道注册到相应的事件监听器，以便事件监听器对该通信通道内发生的数据或事件进行监听。

可以理解，通过建立的监听通道可以实现对应的React父组件与用户在目标React组件的输入操作之间的交互通信。如图6所示，例如，当用户在目标React组件中进行的一些如点击或输入等相应操作后，由目标React组件通过监听通道触发React父组件执行对应的操作；又或者，当React父组件监听到监听通道内的数据事件发生更新，可以通过监听通道获取至更新的数据，并触发目标网页界面的内容更新。此外，该自定义标签也可以通过该监听通道触发请求数据的事件，以触发React父组件将需要的数据传递给该自定义标签等。

本实施例的组件复用实现方法通过对网页组件采用统一的React组件设计，并针对不同的使用场景实现了React组件的复用，如上述的三种不同的场景等，可以适配到更多现有的第三方库等。另外，由于React组件可以复用，这样可以减少重复开发操作，提高开发效率等。

图7示出了本申请实施例的种组件复用实现装置的一种结构示意图。示范性地，该种组件复用实现装置包括：

构建模块110，用于基于预定义的多个React组件，构建目标网页界面的虚拟DOM树；所述虚拟DOM树包括多个DOM节点，每个所述DOM节点与对应的React组件存在映射关系。

初始化模块120，用于在需要引入第三方库进行界面内容显示的情况下，根据调用所述第三方库的React父组件查找对应的DOM节点，并将所述第三方库的实例与查找到的所述DOM节点进行初始化关联。

渲染模块130，用于通过所述React父组件和所述第三方库的实例将目标React组件渲染至关联的所述DOM节点上，进而生成HTML内容；所述目标React组件用于定义与所述第三方库关联的界面内容。

显示控制模块140，用于通过所述第三方库的实例将所述HTML内容显示于所述目标网页界面。

进一步可选地，如图8所示，该种组件复用实现装置还包括：

标签自定义模块150，用于在所述React父组件调用第三方库时，由所述第三方库对所述自定义标签进行HTML内容渲染，并通过响应式元素库对所述目标React组件渲染至所述自定义标签对应的DOM节点上。

通道建立模块160，用于建立所述目标React组件与所述React父组件之间的监听通道。

监测模块170，用于基于所述监听通道实现所述React父组件与用户在所述目标React组件的输入操作之间的交互通信。

可以理解，本实施例的装置对应于上述实施例的种组件复用实现方法，上述实施例中的可选项同样适用于本实施例，故在此不再重复描述。

图9所示为本申请实施例提供的一种终端设备的结构示意图。例如，该终端设备可以但不限于为如台式计算机、笔记本、智能手机、平板等，其存在形式不作限定，主要取决于其是否需要支持浏览器网页的界面显示功能等。示范性地，该终端设备包括处理器11和存储器12，其中，存储器12存储有计算机程序，处理器11通过运行所述计算机程序，以使终端设备执行本申请的基于React进行组件定义的组件复用实现方法，进而实现不同网页框架之间的组件复用，减少组件的重复开发，提高网页开发效率等。

其中，处理器11可以是一种具有信号的处理能力的集成电路芯片。处理器11可以是通用处理器，包括中央处理器（Central Processing Unit，CPU）、图形处理器（GraphicsProcessing Unit，GPU）及网络处理器（Network Processor，NP）、数字信号处理器（DSP）、专用集成电路（ASIC）、现成可编程门阵列（FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件中的至少一种。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。

其中，存储器12可以是，但不限于，随机存取存储器（Random Access Memory，RAM），只读存储器（ReadOnly Memory，ROM），可编程只读存储器（Programmable Read-OnlyMemory，PROM），可擦除只读存储器（Erasable Programmable Read-Only Memory，EPROM），电可擦除只读存储器（Electric Erasable Programmable Read-Only Memory，EEPROM）等。其中，存储器用于存储计算机程序，处理器在接收到执行指令后，可相应地执行所述计算机程序。

此外，本申请还提供了一种可读存储介质，用于储存上述终端设备中使用的所述计算机程序，其中，所述计算机程序在处理器上执行时，实施上述实施例的组件复用实现方法，该方法包括：基于预定义的多个React组件，构建目标网页界面的虚拟DOM树；所述虚拟DOM树包括多个DOM节点，每个所述DOM节点与对应的React组件存在映射关系；在需要引入第三方库进行界面内容显示的情况下，根据调用所述第三方库的React父组件查找对应的DOM节点，并将所述第三方库的实例与查找到的所述DOM节点进行初始化关联；通过所述React父组件和所述第三方库的实例将目标React组件渲染至关联的所述DOM节点上，进而生成HTML内容；其中，所述目标React组件用于定义与所述第三方库关联的界面内容；通过所述第三方库的实例将所述HTML内容显示于所述目标网页界面。

可以理解，上述实施例的组件复用实现方法中的可选项同样适用于本实施例，故在此不再重复描述。

例如，该可读存储介质可包括但不限于为：U盘、移动硬盘、只读存储器（ROM，Read-OnlyMemory）、随机存取存储器（RAM，RandomAccess Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和结构图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，结构图和/或流程图中的每个方框、以及结构图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块或单元可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或更多个模块集成形成一个独立的部分。所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是智能手机、个人计算机、服务器、或者网络设备等）执行本申请各个实施例所述方法的全部或部分步骤。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。

Claims

1.一种组件复用实现方法，其特征在于，包括：

2.根据权利要求1所述的组件复用实现方法，其特征在于，所述通过所述React父组件和所述第三方库的实例，将目标React组件渲染至关联的所述DOM节点上，进而生成HTML内容，包括：

从渲染后的内容中输出相应HTML内容。

3.根据权利要求2所述的组件复用实现方法，其特征在于，还包括：

在所述React组件的实例首次被挂载后，对所述React组件实例与所述临时DOM节点进行缓存；

4.根据权利要求1所述的组件复用实现方法，其特征在于，所述构建目标网页界面的虚拟DOM树，之后还包括：

建立所述目标React组件与所述React父组件之间的监听通道；

5.根据权利要求4所述的组件复用实现方法，其特征在于，所述建立所述目标React组件与所述React父组件之间的事件监听通道，包括：

根据所述自定义标签对应的DOM节点的HTML属性，获取通道ID；

6.根据权利要求4所述的组件复用实现方法，其特征在于，所述基于所述监听通道进行所述React父组件与用户在所述目标React组件的输入操作之间的通信，包括：

7.根据权利要求1所述的组件复用实现方法，其特征在于，所述构建目标网页界面的虚拟DOM树，包括：

根据各个所述React组件之间的所述关系，构建所述目标网页界面的虚拟DOM树；

所述虚拟DOM树与所述目标网页界面的真实DOM树存在映射关系；所述构建目标网页界面的虚拟DOM树，之后还包括：

8.一种组件复用实现装置，其特征在于，包括：

渲染模块，用于通过所述React父组件和所述第三方库的实例将目标React组件渲染至关联的所述DOM节点上，进而生成HTML内容；所述目标React组件用于定义与所述第三方库关联的界面内容；

9.一种终端设备，其特征在于，所述终端设备包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施权利要求1-7中任一项所述的组件复用实现方法。

10.一种可读存储介质，其特征在于，其存储有计算机程序，所述计算机程序在处理器上执行时，实施根据权利要求1-7中任一项所述的组件复用实现方法。