Method for running React component in Vue based on adapter mode

Abstract

The invention belongs to the technical field of front-end cross-frame component multiplexing, and particularly relates to a method for running a React component in Vue based on an adapter mode, which comprises the following steps of: obtaining a Vue wrapper component; component registration is completed through a Vue wrapper component, a React component is packaged into a Vue global or local callable component, and a Vue compatible React component is obtained; a rendering and bridging module is constructed based on a Vue wrapper component, Props bidirectional synchronization, event system mapping, life cycle hook alignment and cross-frame conversion from a slot to a child node are achieved, a Vue compatible React component is called in a Vue environment, and component initialization rendering, interactive response during operation and state updating are completed through the rendering and bridging module; and when the Vue parent component is destroyed, triggering an unloading process of the React component. Therefore, the problems of poor flexibility, low performance, complex process and the like in the prior art are solved.

Description

Technical Field

[0001] This invention belongs to the field of front-end cross-framework component reuse technology, specifically involving a method for running React components based on the adapter pattern in Vue. Background Technology

[0002] In the field of front-end web development, React and Vue are the two mainstream view layer frameworks. With their core advantages such as componentization and responsiveness, they are widely used in various web project development. As the technology ecosystem continues to develop and project scale expands, the coexistence of component libraries and subsystems developed by different frameworks is becoming increasingly common. The need for cross-framework component collaboration is becoming more and more urgent. The core demand is to achieve the integration and reuse of technical assets from different frameworks and the unified expansion of product functions without rewriting existing code.

[0003] Currently, the mainstream solutions for cross-framework component integration in the industry are micro-frontend architecture and iframe embedding. Micro-frontend architecture breaks down the application into multiple independently developed and deployed small applications, which are then combined at runtime; iframe embedding loads applications from different frameworks by creating independent browser contexts. However, both of these solutions have significant limitations: the integration granularity is concentrated at the page or application level, making it impossible to achieve fine-grained fusion of Vue parent components and React child components; the runtime requires loading the complete child application or creating an independent context, leading to increased memory consumption, extended initial loading time, and significant overall performance degradation; developers need to maintain two independent build and deployment processes, and communication between components relies on indirect methods such as postMessage, which not only increases development complexity but also causes inefficiencies in state synchronization and event propagation, making it difficult to meet the needs of fine-grained and efficient cross-framework component integration. Summary of the Invention

[0004] This application provides a method for running React components in Vue based on the adapter pattern to solve problems such as poor flexibility, low performance, and complex processes in existing technologies.

[0005] The first aspect of this application provides a method for running React components based on the adapter pattern in Vue, comprising the following steps: obtaining a Vue wrapper component, wherein the Vue wrapper component serves as a bridge between the React component and the Vue environment; completing component registration through the Vue wrapper component, encapsulating the React component into a globally or locally callable Vue component, thereby obtaining a Vue-compatible React component; achieving bidirectional synchronization of Props, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes through a rendering and bridging module built based on the Vue wrapper component, and calling the Vue-compatible React component in the Vue environment, thereby completing component initialization rendering, runtime interactive response, and state update through the rendering and bridging module; and triggering the unloading process of the React component by calling the rendering and bridging module through the Vue wrapper component when the Vue parent component is destroyed.

[0006] Preferably, obtaining a Vue wrapper component includes: retrieving a preset Vue wrapper component template; configuring the basic parameters of the Vue wrapper component template based on the preset Vue wrapper component template, according to the type of React component to be integrated and the version information of the Vue application; and instantiating the configured Vue wrapper component template into a callable Vue wrapper component to complete the acquisition of the Vue wrapper component.

[0007] Preferably, component registration is completed through the Vue wrapper component, encapsulating the React component into a globally or locally callable Vue component. This includes: constructing a higher-order wrapper function React2VueWrapper; passing the original React component as an input parameter to the higher-order wrapper function, defining Vue component configuration items, and encapsulating the original React component into a registerable Vue component based on the Vue component configuration items; if it needs to be registered as a global Vue component, calling the Vue.component method to complete the global registration of the registerable Vue component; if it needs to be registered as a local Vue component, declaring the registerable Vue component in the components option of the target Vue parent component to complete the local registration; after registration, the Vue-compatible React component is generated based on the rules of the Vue component configuration items, and the Vue-compatible React component can be directly called through Vue template syntax.

[0008] Preferably, the bidirectional synchronization of Props includes: setting up a property collection unit in the rendering and bridging module to collect properties passed from the Vue parent component to the Vue-compatible React component; converting Vue-formatted properties to React-compatible format through a property conversion unit, while filtering invalid properties; setting up a property listening unit to listen for changes in the converted properties, and triggering an update instruction in the rendering and bridging module when a property changes; synchronously injecting the updated properties into the React component through a property injection unit, triggering a re-render of the React component, thus completing the one-way synchronization of Props from Vue to React; and when properties change within the React component, converting the changed properties to Vue-compatible format through a property postback unit and synchronizing them to the Vue wrapper component, thus completing the reverse synchronization of Props from React to Vue.

[0009] Preferably, the event system mapping, lifecycle hook alignment, and cross-frame conversion from slots to child nodes include: Event system mapping: In the rendering and bridging module, the event set passed by the Vue parent component is traversed, and the Vue-formatted events are converted into React-compatible callback functions. A bridging method is created for each converted callback function. When the React component triggers the callback function, the corresponding Vue custom event is triggered through the bridging method, achieving upward bubbling of events from React to Vue; Lifecycle hook alignment: The lifecycle hooks of the Vue wrapper component are bound to the corresponding logic of the React component. The rendering, updating, and unloading mark operations of the React component are executed synchronously during the lifecycle phase of the Vue wrapper component; Cross-frame conversion from slots to child nodes: In the rendering and bridging module, the slot content passed by the Vue parent component is obtained, the slot content is converted into a React-recognizable format, and mapped to the child nodes of the React component, completing the cross-frame conversion from slots to child nodes.

[0010] Preferably, the component initialization rendering, runtime interaction response, and state update include: Initialization rendering: When the Vue-compatible React component is mounted for the first time, the rendering and bridging module creates React elements and renders the React elements into the DOM container preset by the Vue wrapper component; Runtime interaction response: When the React component triggers an interaction operation, it is synchronized to the Vue environment through the rendering and bridging module, and the interaction commands of the Vue environment are synchronized to the React component to achieve cross-framework interaction response; State update: When the property / state on the Vue or React side changes, the rendering and bridging module triggers the update operation of the React component to complete the component state update and view repaint.

[0011] The second aspect of this application provides a system for running React components based on the adapter pattern in Vue, comprising: an acquisition module for acquiring a Vue wrapper component, wherein the Vue wrapper component serves as a bridge between the React component and the Vue environment; a registration module for registering the component through the Vue wrapper component, encapsulating the React component into a globally or locally callable Vue component to obtain a Vue-compatible React component; a rendering bridge module for achieving bidirectional synchronization of Props, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes, and calling the Vue-compatible React component in the Vue environment, and completing component initialization rendering, runtime interactive response, and state update through the rendering bridge module; and an unloading module for triggering the unloading process of the React component by calling the rendering bridge module through the Vue wrapper component when the Vue parent component is destroyed.

[0012] A third aspect of this application provides an electronic device, including: a memory, a processor, and a computer program stored in the memory and executable on the processor. The processor executes the program to implement a method for running React components based on the adapter pattern in Vue as described in the above embodiments.

[0013] A fourth aspect of this application provides a computer-readable storage medium having a computer program stored thereon, which is executed by a processor to implement a method for running React components based on the adapter pattern in Vue as described in the above embodiments.

[0014] A fifth aspect of this application provides a computer program product, including a computer program or instructions for implementing a method for running React components based on the adapter pattern in Vue as described in the above embodiments.

[0015] Therefore, this application has the following beneficial effects: This application's embodiments utilize a Vue wrapper component as a bridge between React components and the Vue environment. Component registration is completed to encapsulate React components into globally or locally callable compatible components within Vue. A rendering and bridging module is built to achieve bidirectional Props synchronization, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes. This compatible component is then invoked to complete initial rendering, runtime interactive responses, and state updates, simultaneously triggering the React component's unloading process. This effectively reduces the limitations of traditional cross-framework integration, where components can only be integrated at the page level and cannot be nested at a fine-grained level. Furthermore, relying on higher-order encapsulation functions and adaptation configuration items, it supports flexible component registration and personalized parameter configuration. This overcomes the limitations of existing solutions, such as high technical asset reuse costs and weak framework version compatibility. It also specifically matches component calling scenarios and framework environments for different projects, significantly improving the flexibility, native adaptation, and code reuse efficiency of cross-framework component integration. This helps developers efficiently achieve collaborative operation of components from different frameworks without rewriting existing code, effectively simplifying the complexity of cross-framework development processes and reducing runtime memory consumption and performance losses. This solves the problems of poor flexibility, low performance, and complex processes in existing technologies.

[0016] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description

[0017] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein: Figure 1 This is a flowchart illustrating the method for running a React component based on the adapter pattern in Vue according to an embodiment of this application. Figure 2 This is a diagram illustrating the cross-Vue environment integration architecture of React components according to one embodiment of this application. Figure 3 This is a schematic diagram of a system in Vue that uses an adapter pattern-based React component according to an embodiment of this application. Figure 4 This is a schematic diagram of the structure of an electronic device provided according to an embodiment of this application. Detailed Implementation

[0018] The embodiments of this application are described in detail below. Examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.

[0019] The following describes a method for running React components based on the adapter pattern in Vue, according to an embodiment of this application, with reference to the accompanying drawings. Addressing the issue of insufficient positioning accuracy mentioned in the background section, this application provides a method for running React components based on the adapter pattern in Vue. In this method, a Vue wrapper component is obtained as a bridge between the React component and the Vue environment. Component registration is completed to encapsulate the React component into a globally or locally callable compatible component in Vue. A rendering and bridging module is constructed to achieve bidirectional synchronization of Props, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes. The compatible component is called to complete initial rendering, runtime interactive responses, and state updates, synchronously triggering the unloading of the React component. This streamlined process effectively reduces the limitations of traditional cross-framework integration, which only allows for page-level component fusion and lacks fine-grained nesting. Furthermore, leveraging higher-order encapsulation functions and adaptive configuration items, it supports flexible component registration and personalized parameter configuration. This overcomes the limitations of existing solutions, such as high costs of reusing technical assets and weak framework version compatibility. It also specifically matches component calling scenarios and framework environments across different projects, significantly improving the flexibility, native adaptability, and code reuse efficiency of cross-framework component integration. This allows developers to efficiently achieve collaborative operation of components from different frameworks without rewriting existing code, effectively simplifying the complexity of cross-framework development and reducing runtime memory consumption and performance degradation. Thus, it solves the problems of poor flexibility, low performance, and complex processes in existing technologies.

[0020] Specifically, Figure 1 This is a flowchart illustrating the method for running a React component based on the adapter pattern in Vue, as provided in an embodiment of this application.

[0021] like Figure 1 As shown, the method for running this React component based on the adapter pattern in Vue includes the following steps: In step S101, a Vue wrapper component is obtained, which serves as a bridge between the React component and the Vue environment.

[0022] Among them, Vue wrapper components refer to Vue components designed specifically for cross-framework adaptation. As a bridge between React components and the Vue environment, they undertake cross-framework property conversion, event mapping and other adaptation logic, and are the core middleware layer for React components to run in the Vue environment.

[0023] It should be noted that React components refer to reusable user interface units developed based on the React front-end framework. They have characteristics such as componentization and responsiveness and are used to build UI modules for web applications.

[0024] The Vue environment refers to the runtime environment of a front-end application built on the Vue front-end framework. It includes the core operating mechanisms of Vue, such as component rendering, state management, and lifecycle scheduling, and provides runtime support for Vue components.

[0025] It is understood that this application embodiment obtains the Vue wrapper component and defines it as the bridging carrier between the React component and the Vue environment, thus building an adaptation connection layer for the two types of framework units. This provides dedicated intermediate support for the integration of React components into the Vue environment, avoids technical conflicts caused by direct interaction between the two, and lays a solid foundation for subsequent key processes such as component registration, cross-framework attribute conversion, and event mapping, effectively ensuring the underlying feasibility and adaptation stability of cross-framework component integration.

[0026] In this embodiment of the application, obtaining a Vue wrapper component includes: retrieving a preset Vue wrapper component template; configuring the basic parameters of the Vue wrapper component template based on the preset Vue wrapper component template, according to the type of React component to be integrated and the version information of the Vue application; and instantiating the configured Vue wrapper component template into a callable Vue wrapper component to complete the acquisition of the Vue wrapper component.

[0027] Among them, Vue wrapper component templates refer to pre-designed Vue component templates with cross-framework adaptability and logical frameworks. They are reusable and do not have specific adaptation parameters configured. They serve as the basic carrier for generating Vue wrapper components. It should be noted that the basic parameters refer to the core parameters that need to be configured in the Vue wrapper component template to adapt to specific React components and Vue versions and to customize the cross-framework adaptation logic of the template. These include core configurations related to component adaptation class, version compatibility class, interaction adaptation class, and runtime configuration class.

[0028] It is understood that the embodiments of this application retrieve a preset Vue wrapper component template and configure basic parameters, so that the template accurately adapts to the React component type to be integrated and the Vue application version based on the basic parameters. This not only leverages the reusability of the template to simplify the wrapper component creation process, but also avoids adaptation conflicts through targeted parameter configuration, ensuring that the instantiated Vue wrapper component has exclusive cross-framework adaptation capabilities and can directly undertake subsequent integration tasks, significantly improving the efficiency and accuracy of wrapper component acquisition and adaptation.

[0029] For example, an e-commerce front-end project needs to integrate a product details functional component developed based on React into a Vue 3 main application. The specific application process is as follows: First, the project's preset general Vue wrapper component template is retrieved. This template has a built-in basic logic framework for cross-framework adaptation. Then, based on this template, and combined with the core information that the React component to be integrated is a functional component and the target Vue application is a Vue 3 version, the template's basic parameters are configured: the component adaptation class parameter is filled with the React component type identifier as "functional component", and the mapping rules between the goodsId parameter in VueProps and the React component's input parameter goodsId are defined; the version compatibility class parameter sets the Vue version adaptation identifier to "Vue3", and configures the mapping rules between Vue's mounted hook and ReactuseEffect hook; the interaction adaptation class parameter specifies the rules for converting Vue's add-cart hyphen event to React's addCart camelCase callback; the runtime configuration class parameter clarifies that the React component's mounting container in the Vue environment is identified as "goods-detail-container", and adds a filter list of invalid attributes such as class and style that do not need to be passed. After completing the parameter configuration, the customized template is instantiated into a Vue wrapper component that can be directly called. This completes the acquisition of the Vue wrapper component, which can be directly imported into the Vue3 main application to become the dedicated bridge carrier for running the React product details component.

[0030] In step S102, component registration is completed through Vue wrapper components, and React components are encapsulated into Vue globally or locally callable components to obtain Vue-compatible React components.

[0031] Component registration refers to the process of declaring and registering components in a Vue application, enabling the component to be called and rendered within a specified scope. It is a prerequisite for Vue components to be used.

[0032] It is understood that the embodiments of this application, by completing component registration and encapsulating React components into globally or locally callable compatible components of Vue, enable React components to adapt to Vue's component calling specifications and scope rules. This supports flexible selection of global registration to achieve application-wide reuse or local registration to limit the calling scope to reduce resource redundancy, based on business needs. It also enables React components to be called in the form of native Vue components, eliminating the technical barriers to direct cross-framework component calls and greatly improving the convenience of integrating and using React components in the Vue environment.

[0033] In this embodiment, component registration is completed through a Vue wrapper component, encapsulating the React component into a globally or locally callable Vue component. This includes: constructing a higher-order wrapper function React2VueWrapper; passing the original React component as an input parameter to the higher-order wrapper function, defining Vue component configuration items, and encapsulating the original React component into a registrable Vue component based on the Vue component configuration items; if it needs to be registered as a global Vue component, calling the Vue.component method to complete the global registration of the registrable Vue component; if it needs to be registered as a local Vue component, declaring the registrable Vue component in the components option of the target Vue parent component to complete the local registration; after registration, a Vue-compatible React component is generated based on the rules of the Vue component configuration items, and the Vue-compatible React component can be directly called through Vue template syntax.

[0034] Among them, the higher-order wrapper function React2VueWrapper is a higher-order function designed specifically for cross-framework component wrapping. It can accept the original React component as input parameter and, in combination with Vue component configuration items, convert it into a component that conforms to the Vue registration specification. It is the core function for completing the transformation of React component into Vue component form.

[0035] It should be noted that raw React components refer to native React components developed directly based on the React framework without any cross-framework adaptation.

[0036] Vue component configuration items refer to the core configuration set defined to encapsulate React components into Vue-recognizable components, including key adaptation information such as component name, Props mapping rules, and event binding logic.

[0037] A registerable Vue component is an intermediate component that, after being processed by a higher-order encapsulation function, fully conforms to the Vue component registration specification and has the conditions to complete global or local registration in a Vue application.

[0038] The target Vue parent component refers to the specific Vue component within which the local registration operation is to be performed; it is the scope-limiting carrier of the local registration component.

[0039] It is understood that the embodiments of this application encapsulate the original React component into a registrable Vue component by constructing a higher-order encapsulation function, and flexibly complete global / local registration by combining the Vue.component method or the components option. Based on the configuration items, Vue-compatible React components are generated, which not only realizes the standardized conversion of React components to Vue components, but also supports flexible selection of the registration scope according to business scenarios, reduces the resource redundancy of global registration, and allows compatible components to be directly called through Vue template syntax, fully adapting to Vue's usage habits, and greatly reducing the learning and usage costs of cross-framework component calls.

[0040] For example, a fresh food e-commerce Vue3 project needs to integrate a shopping cart quantity selection component (the original React component) developed based on React. The specific application process is as follows: First, a higher-order encapsulation function `React2VueWrapper` is built. This function has built-in core adaptation logic such as React component mounting and Props transformation. The shopping cart quantity selection component is passed into this function as an input parameter. At the same time, Vue component configuration items are defined—specifying the component name as "ReactCartNumber", configuring Props mapping rules (Vue's count parameter corresponds to the React component's num parameter), and event binding rules (Vue's change event corresponds to React's onCountChange event). Based on these configuration items, the function encapsulates the original React component into a registrable Vue component that conforms to the Vue registration specification. Because this component needs to be used on multiple pages throughout the application, `Vue.component('ReactCartNumber', registrable Vue component)` is called to complete global registration. If it only needs to be used on the checkout page, then `'ReactCartNumber': registrable Vue component` is declared in the components option of the Vue parent component on the checkout page to complete local registration. After registration, a Vue-compatible React component is generated based on the configuration rules. Developers can directly call the component in any Vue component template using Vue template syntax without having to worry about the underlying cross-framework adaptation logic.

[0041] In step S103, the rendering and bridging module built based on Vue wrapper components achieves bidirectional synchronization of Props, mapping of the event system, alignment of lifecycle hooks, and cross-framework conversion from slots to child nodes. It also calls Vue-compatible React components in the Vue environment and completes component initialization rendering, runtime interactive response, and state update through the rendering and bridging module.

[0042] The rendering and bridging module refers to the core cross-framework adaptation module built on Vue wrapper components. It is specifically designed to implement cross-framework Props synchronization, event mapping adaptation logic, and handle the core processes of component rendering, interactive response, and state update.

[0043] It is understood that the embodiments of this application build a rendering and bridging module based on Vue wrapper components to achieve bidirectional synchronization of Props, mapping of the event system, alignment of lifecycle hooks, and cross-framework conversion from slots to child nodes. Relying on this module, the component initialization rendering, runtime interaction response, and state update are completed, eliminating the cross-framework differences between React and Vue in data transmission, event triggering, lifecycle execution, and content rendering. This ensures that Vue-compatible React components can render normally, interact efficiently, and have their states synchronized in real time in the Vue environment, significantly improving the stability and consistency of cross-framework component operation.

[0044] In this embodiment, the bidirectional synchronization of Props includes: setting up a property collection unit in the rendering and bridging module to collect properties passed from the Vue parent component to the Vue-compatible React component; converting Vue-formatted properties to React-compatible format through a property conversion unit, while filtering invalid properties; setting up a property listening unit to listen for changes in the converted properties, and triggering an update instruction from the rendering and bridging module when a property changes; synchronously injecting the updated properties into the React component through a property injection unit, triggering a re-render of the React component, thus completing the one-way synchronization of Props from Vue to React; and when properties change within the React component, converting the changed properties to Vue-compatible format through a property postback unit and synchronizing them to the Vue wrapper component, thus completing the reverse synchronization of Props from React to Vue.

[0045] The property collection unit refers to a functional unit in the rendering and bridging module specifically designed to collect all properties passed from the Vue parent component to the Vue-compatible React component. It is the starting point of the Props synchronization process.

[0046] It should be noted that the property conversion unit refers to the functional unit in the rendering and bridging module responsible for converting Vue-formatted properties to a React-compatible format and filtering out invalid properties, ensuring cross-framework compatibility of property formats. The property monitoring unit refers to the functional unit in the rendering and bridging module used to monitor property changes after transformation in real time. It is the core sensing link that triggers property update synchronization.

[0047] The property injection unit refers to the functional unit in the rendering and bridging module responsible for injecting updated and format-compatible properties into the React component. It is a key step in achieving one-way property synchronization from Vue to React.

[0048] The property postback unit refers to a functional unit in the rendering and bridging module specifically used to convert changed properties within a React component into a Vue-compatible format and post them back to the Vue wrapper component, thus achieving reverse synchronization of Props.

[0049] It is understood that the embodiments of this application collect the properties passed by the Vue parent component through the property collection unit, adapt the format and filter invalid properties through the property conversion unit, and then trigger updates by the property listening unit to detect property changes. The property injection unit completes the property synchronization from Vue to React, and the property postback unit achieves reverse synchronization. This ensures cross-framework compatibility of property formats and achieves bidirectional real-time synchronization of Props, ensuring data consistency between Vue and React components and improving the accuracy and smoothness of cross-framework component interaction.

[0050] For example, in an e-commerce project, the Vue parent component needs to achieve bidirectional synchronization of the `count` property with the Vue-compatible React product quantity selection component. The specific application is as follows: The property collection unit of the rendering and bridging module first collects the initial `count` value (e.g., 3) and related configuration properties passed from the Vue parent component; the property conversion unit converts the Vue-formatted properties to the React-compatible format, while filtering out invalid properties such as the Vue built-in `key` property; the property listening unit monitors changes to `count` in real time, and when the user modifies `count` to 5 in the Vue parent component, it immediately triggers a module update command; the property injection unit synchronously injects the updated `count=5` into the React component, triggering it to re-render and display the latest quantity, completing the one-way synchronization from Vue to React. If the user clicks the "+" sign in the React component to change `count` to 6, the property postback unit will convert the value to a Vue-compatible format, synchronize it to the Vue wrapper component, and finally feed it back to the Vue parent component, achieving bidirectional synchronization of Props and ensuring real-time data consistency between the two ends.

[0051] In this embodiment, the event system mapping, lifecycle hook alignment, and cross-frame conversion from slot to child node include: Event system mapping: In the rendering and bridging module, the event set passed by the Vue parent component is traversed, and the Vue-formatted events are converted into React-compatible callback functions. A bridging method is created for each converted callback function. When the React component triggers the callback function, the corresponding Vue custom event is triggered through the bridging method, achieving upward bubbling of events from React to Vue; Lifecycle hook alignment: The lifecycle hooks of the Vue wrapper component are bound to the corresponding logic of the React component. The rendering, updating, and unloading mark operations of the React component are executed synchronously during the lifecycle phase of the Vue wrapper component; Cross-frame conversion from slot to child node: In the rendering and bridging module, the slot content passed by the Vue parent component is obtained, the slot content is converted into a React-recognizable format, and mapped to the child node of the React component, completing the cross-frame conversion from slot to child node.

[0052] Among them, the bridging method refers to the dedicated associated method created in the rendering and bridging module for the converted React-compatible format callback function. It serves as a bridge between the React callback function and the Vue custom event, and can trigger the corresponding Vue custom event when the React component triggers the callback.

[0053] It should be noted that Vue custom events refer to the event types used for communication between components in the Vue framework. They are triggered by child components and listened to by parent components, and are the core way for Vue components to pass on interactive behaviors.

[0054] The "to be unloaded" flag operation refers to a flagging operation performed on a React component during the unloading phase of the Vue wrapper component's lifecycle. It is used to inform the React component that it is about to be unloaded, so that it can perform cleanup, unbinding events, and other cleanup logic in advance.

[0055] It is understood that the embodiments of this application support event bubbling from React to Vue in the event system mapping, ensure the effective transmission of interactive behaviors between cross-framework components, synchronize the unloading process of Vue and React components and allow React components to execute cleanup logic in advance by creating a bridging method for the converted callback function, relying on Vue custom events to realize inter-component communication, and executing the unloading mark operation in the unloading stage of Vue wrapper components. This eliminates the technical differences between React and Vue in event communication and lifecycle unloading, and improves the smoothness of cross-framework component interaction and the consistency of lifecycle execution.

[0056] For example, when integrating a React product card component into a Vue 3 e-commerce project, during the event mapping phase, the Vue parent component passes the `@add-to-cart="handleAddCart"` event. The rendering and bridging module iterates through this event set, converting the Vue hyphen-formatted `add-to-cart` into a React-compatible `onAddToCart` callback function and creating a dedicated bridging method. When the user clicks the "Add to Cart" button on the React product card, triggering `onAddToCart`, the Vue custom `add-to-cart` event is triggered via the bridging method, and the Vue parent component's `handleAddCart` method responds, completing the event bubbling upwards. In the lifecycle hook alignment phase, the `mounted` hook of the Vue wrapper component is bound to the React component's rendering logic, synchronously executing React component rendering during `mounted`; the `updated` hook binds to React component update logic, and the `beforeUnmount` hook adds a pending unmount flag to the React component, allowing it to clear its internal timers in advance. In the cross-framework conversion phase from slot to child node, the Vue parent component...<slotname="tag"> When the "limited-time discount" tag is passed in, the module obtains the content of the slot, converts it into a React-recognizable format, maps it to the tag child node of the React component, and finally renders the discount tag in the corresponding position of the product card.

[0057] In this embodiment, component initialization rendering, runtime interaction response, and state update include: Initialization rendering: When the Vue-compatible React component is mounted for the first time, the rendering and bridging module creates React elements and renders the React elements into the DOM container preset by the Vue wrapper component; Runtime interaction response: When the React component triggers an interaction operation, it is synchronized to the Vue environment through the rendering and bridging module, and the interaction commands of the Vue environment are synchronized to the React component to achieve cross-framework interaction response; State update: When the properties / states on the Vue or React side change, the rendering and bridging module triggers the update operation of the React component to complete the component state update and view redraw.

[0058] Among them, a React element is the smallest unit used to describe the UI structure in the React framework. It is created by React.createElement and contains information such as component type, attributes, and child elements. It is the basic carrier for React component rendering.

[0059] It should be noted that the DOM container refers to the DOM node that is pre-defined in the Vue wrapper component and is used to carry the rendering result of React elements. It is the physical carrier for the React component to be presented in the Vue environment.

[0060] Interaction commands are instruction signals (such as clicking or inputting corresponding operation commands) that trigger component interaction behavior in the Vue environment. They can be passed between Vue and React components through the rendering and bridging modules to drive cross-framework interaction responses.

[0061] It is understood that the embodiments of this application create React elements, pre-set DOM containers and pass interaction instructions, rely on React elements to describe the UI structure to support the initial rendering process, use the DOM container to provide a rendering carrier for React elements in the Vue environment, and synchronize interaction operation signals between Vue and React through interaction instructions to ensure successful rendering when the Vue-compatible React component is mounted for the first time, so that the React component has a clear presentation position in the Vue environment, achieves view redrawing when cross-framework interaction response and state update, and improves the stability of cross-framework component operation and the smoothness of interaction.

[0062] For example, when integrating a Vue-compatible React product detail component into a Vue 3 e-commerce project, during the initial rendering phase of the component's first mounting, the rendering and bridging module creates a React element containing UI structures such as product images, specifications, and an add-to-cart button. This element is then rendered into a DOM container with the pre-defined id "react-goods-detail" in the Vue wrapper component, achieving the component's initial visual presentation on the Vue page. During the runtime interaction phase, when a user clicks the "Add to Cart" button within the React component, an interactive operation is triggered. This operation is synchronized to the Vue environment through the rendering and bridging module. Simultaneously, the inventory verification interaction command in the Vue environment is also synchronized to the React component through this module, triggering a change in the button's loading state, achieving cross-framework interactive response. During the state update phase, when the Vue parent component changes the product quantity from 1 to 2, or when the React component internally calculates the change in the total price of the product with the quantity, the rendering and bridging module triggers an update operation in the React component, completing the component state update and view redraw, ensuring that the product quantity and total price are displayed in real time on the page.

[0063] In step S104, when the Vue parent component is destroyed, the React component's unloading process is triggered by calling the rendering and bridging module through the Vue wrapper component.

[0064] It is understood that, in this embodiment of the application, when the Vue parent component is destroyed, the rendering and bridging module of the Vue wrapper component is called to trigger the unloading process of the React component. This ensures that the lifecycle unloading of Vue and React components is executed synchronously, avoiding problems such as memory leaks and invalid event listener residues caused by the React component not being unloaded in time. It also maintains the consistency of cross-framework component lifecycle management and greatly improves the resource utilization efficiency and operational stability of React components integrated in the Vue environment.

[0065] For example, in the checkout page (Vue parent component) of an e-commerce Vue3 project, a Vue-compatible React coupon selection component is integrated. When the user completes the order and is redirected to the payment success page, the Vue parent component of the checkout page is destroyed. At this time, the Vue wrapper component detects the destruction state of the parent component and immediately calls the rendering and bridging module. This module triggers the unloading process of the React coupon selection component—first, clearing the timer that polls the coupon status inside the component, unbinding the event listener for the user clicking the coupon, then removing the DOM node attached to the React component, and finally releasing the memory resources occupied by the component. This avoids the React component remaining because it was not unloaded with the Vue parent component, preventing problems such as memory leaks and invalid coupon API requests.

[0066] The method for running React components in Vue based on the adapter pattern proposed in this application obtains a Vue wrapper component as a bridge between the React component and the Vue environment. It completes component registration to encapsulate the React component into a globally or locally callable compatible component in Vue. It builds a rendering and bridging module to achieve bidirectional synchronization of Props, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes. The compatible component is then called to complete initial rendering, runtime interactive responses, and state updates, synchronously triggering the React component's unloading process. This effectively reduces the traditional cross-framework limitations. This solution addresses the limitation of page-level component integration in framework integration, which restricts component nesting to a fine-grained level. Furthermore, leveraging higher-order encapsulation functions and adaptive configuration items, it supports flexible component registration and personalized parameter configuration. This overcomes the limitations of existing solutions, such as high costs of reusing technical assets and weak framework version compatibility. It also specifically matches component calling scenarios and framework environments across different projects, significantly improving the flexibility, native adaptability, and code reuse efficiency of cross-framework component integration. This allows developers to efficiently achieve collaborative operation of components from different frameworks without rewriting existing code, effectively simplifying the complexity of cross-framework development processes and reducing runtime memory consumption and performance degradation. Thus, it solves the problems of poor flexibility, low performance, and complex processes in existing technologies.

[0067] The following example illustrates how React components based on the adapter pattern run in Vue: In a Vue 3 project for a fresh food e-commerce company, there is a product detail component developed based on React (including product image carousel, price display, specification selection, and add-to-cart functionality). Due to business needs, this component needs to be integrated into the Vue environment. The first step is to "obtain the Vue wrapper component": This involves retrieving the project's default Vue wrapper component template, which includes basic bridging logic placeholders. Based on the type of React product detail component to be integrated (information display + interactive component) and the characteristics of the Vue 3 version, the basic parameters of the template are configured—for example, specifying the DOM container ID as "react-goods-detail-container" and setting the default mapping rules for Props. Finally, the configured template is instantiated into a callable Vue wrapper component. This component will serve as the core bridging carrier between the React product detail component and the Vue environment, supporting subsequent cross-framework adaptation processes.

[0068] Next, component registration is performed, corresponding to the steps of "component registration via Vue wrapper component": First, a higher-order wrapper function `React2VueWrapper` is constructed, which has built-in cross-framework component format conversion logic; the original React product details component is passed to this function as an input parameter, and Vue component configuration items are defined—the component name is explicitly set to "ReactGoodsDetail", and Props mapping rules are set (e.g., "goodsId" on the Vue side corresponds to "productId" on the React side, and "initCount" on the Vue side corresponds to "defaultQuantity" on the React side). Based on these configuration items, the function wraps the original React component into a registrable Vue component that conforms to the Vue registration specification; since this product details component needs to be called in multiple Vue pages such as the product list page and search results page, the team chose to call the `Vue.component` method to complete global registration; after registration, a Vue-compatible React component is generated based on the rules of the Vue component configuration items. At this point, developers can use it in any Vue component template.<ReactGoodsDetail:goodsId="12345":initCount="1" / > The syntax directly calls the component. For example... Figure 2 As shown, this process corresponds to the multi-dimensional mapping relationship between React components and Vue wrapper components in the architecture diagram—a one-to-one conversion between React lifecycle and Vue lifecycle, ReactProps and VueProps, ReactEvent and VueEvent, and ReactChildren and VueSlots, ultimately achieving the adaptation and integration of React components into the Vue environment.

[0069] Subsequently, relying on the rendering and bridging module built with Vue wrapper components, the core cross-framework adaptation logic is completed: First, Props are synchronized bidirectionally. The property collection unit in the module first collects properties such as "goodsId=12345" and "initCount=1" passed from the Vue parent component; the property conversion unit converts these Vue-formatted properties into a React-compatible format, while filtering out invalid properties such as "key" and "ref" built into Vue; the property listening unit monitors changes to these properties in real time. When the user adjusts the purchase quantity from 1 to 2 in the specification selection pop-up of the Vue parent component, the listening unit immediately triggers the module's update instruction, and the property injection unit synchronously injects the updated "initCount=2" into the React product details component, triggering it to re-render to display the latest quantity, completing the one-way synchronization from Vue to React; when the user clicks the "+" sign in the React component to change the quantity from 2 to 3, the property return unit converts the changed quantity into a Vue-compatible format, synchronizes it to the Vue wrapper component, and finally feeds it back to the shopping cart statistics logic of the Vue parent component, realizing the bidirectional synchronization of Props. Meanwhile, the event system mapping logic also runs in this module: the module iterates through the `@add-to-cart="handleAddCart"` event collection passed from the Vue parent component, converts the Vue-formatted "add-to-cart" events into a React-compatible "onAddToCart" callback function, and creates a bridge method for this callback; when the user clicks the "Add to Cart" button in the React component, triggering "onAddToCart", the bridge method will trigger the corresponding Vue custom event, causing the Vue parent component's `handleAddCart` method to respond and execute the cart addition logic, achieving upward bubbling of events from React to Vue. Furthermore, the lifecycle hook alignment logic binds the `mounted` hook of the Vue wrapper component to the React component's rendering logic, synchronously executing the React component's initialization rendering when the Vue wrapper component is mounted; binds the `updated` hook to the React component's update logic, synchronously updating the React component when the Vue component is updated; and binds the `beforeUnmount` hook to the React component's unmounting flag operation, preparing for the subsequent unmounting process. The cross-framework conversion from slot to child node is as follows: when the Vue parent component...<slotname="tag"> When the limited-time discount tag content is passed in, the module will obtain the slot content, convert it into a child node format that React can recognize, and map it to the "tag" child node position of the React product details component. Finally, the "limited-time discount" tag will be rendered in the upper right corner of the component.

[0070] After completing the above adaptation, the component can run in the Vue environment for the entire process: During the initial rendering phase, when the Vue-compatible React component is first mounted to the product details page, the rendering and bridging module will create React elements containing UI structures such as product images, prices, and add-to-cart buttons based on the logic of the React product details component, and render these elements into the "react-goods-detail-container" DOM ​​container preset by the Vue wrapper component. At this time, the user can see the complete React product details component on the Vue page. During the runtime interaction response phase, when the user clicks the "Add to Cart" button in the React component to trigger an interaction, this operation will be synchronized to the Vue environment through the rendering and bridging module. The inventory verification service in the Vue environment will immediately perform an inventory query and synchronize the "In Stock" interaction command back to the React component, triggering the cancellation of the button's loading state; if the inventory is insufficient, the interaction command in the Vue environment will be synchronized to the React component, making the button disabled and displaying an "Insufficient Stock" prompt, achieving a smooth interaction response across frameworks. During the state update phase, when the Vue parent component changes the "goodsId" from 12345 to 12346 due to the user switching product specifications, the rendering and bridging module will trigger the React component's update operation, re-request the new product's details data, and update the view. When the React component internally calculates the total price of the product based on the purchase quantity, changing it from "59.9 yuan" to "119.8 yuan", the module will also trigger a view redraw to ensure that the total price information is displayed on the page in real time.

[0071] Finally, when the user completes the order and is redirected to the payment success page, the Vue product details page (i.e., the Vue parent component) hosting the React product details component is destroyed by the Vue routing mechanism. At this point, the Vue wrapper component detects the destruction state of the parent component and immediately calls the rendering and bridging module to trigger the unloading process of the React product details component: the module first clears the timer that polls for product inventory inside the React component to avoid invalid API requests; then it unbinds the event listener for the user clicking the "Add to Cart" button to prevent event bubbling; then it removes the node of the React component mounted in the "react-goods-detail-container" DOM ​​container; finally, it releases the memory resources occupied by the component, completely completing the unloading of the React component. This process effectively avoids problems such as memory leaks and invalid event listeners caused by the React component not being destroyed with the Vue parent component, ensuring the operational stability of the entire Vue application and verifying the feasibility and reliability of this cross-framework adaptation method in real-world projects.

[0072] In summary, this invention acquires and configures a Vue wrapper component as a bridging carrier, encapsulates a React product details component using higher-order functions, and completes global registration. Then, relying on the rendering and bridging modules, it completes bidirectional Props synchronization, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes. Subsequently, it completes component initialization rendering, cross-framework interactive responses, and state updates, and triggers the React component's unloading process when the Vue parent component is destroyed. This process achieves seamless integration of React components into the Vue environment while ensuring real-time data consistency, smooth interaction, and reasonable resource management.

[0073] Figure 3 This is a schematic diagram of the system structure of React components based on the adapter pattern running in Vue according to an embodiment of this application.

[0074] like Figure 3 As shown, the system 10 in which the React component based on the adapter pattern runs in Vue includes: a fetch module 100, a register module 200, a render bridge module 300, and an unload module 400.

[0075] The system comprises the following modules: 100 (Acquisition Module 100) acquires Vue wrapper components, which serve as a bridge between React components and the Vue environment; 200 (Registration Module 200) registers components using Vue wrapper components, encapsulating React components into globally or locally callable Vue components to obtain Vue-compatible React components; 300 (Rendering Bridge Module 300) is a rendering and bridging module built upon Vue wrapper components, enabling bidirectional synchronization of Props, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes. It also calls Vue-compatible React components within the Vue environment, completing component initialization rendering, runtime interaction responses, and state updates through the rendering and bridging module; and 400 (Unloading Module 400) triggers the React component unloading process by calling the rendering and bridging module through the Vue wrapper component when the Vue parent component is destroyed.

[0076] It should be noted that the foregoing explanation of the method embodiment for running React components based on the adapter pattern in Vue also applies to the system in which React components based on the adapter pattern in this embodiment run in Vue, and will not be repeated here.

[0077] The system for running React components in Vue based on the adapter pattern proposed in this application obtains a Vue wrapper component as a bridge between the React component and the Vue environment. It completes component registration to encapsulate the React component into a globally or locally callable compatible component in Vue. It builds a rendering and bridging module to achieve bidirectional synchronization of Props, event system mapping, lifecycle hook alignment, and cross-framework conversion from slots to child nodes. The system calls this compatible component to complete initial rendering, runtime interactive responses, and state updates, synchronously triggering the React component's unloading process, effectively reducing the traditional cross-framework complexity. This solution addresses the limitation of page-level component integration in framework integration, which restricts component nesting to a fine-grained level. Furthermore, leveraging higher-order encapsulation functions and adaptive configuration items, it supports flexible component registration and personalized parameter configuration. This overcomes the limitations of existing solutions, such as high costs of reusing technical assets and weak framework version compatibility. It also specifically matches component calling scenarios and framework environments across different projects, significantly improving the flexibility, native adaptability, and code reuse efficiency of cross-framework component integration. This allows developers to efficiently achieve collaborative operation of components from different frameworks without rewriting existing code, effectively simplifying the complexity of cross-framework development processes and reducing runtime memory consumption and performance degradation. Thus, it solves the problems of poor flexibility, low performance, and complex processes in existing technologies.

[0078] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device may include: The memory 401, the processor 402, and the computer program stored on the memory 401 and capable of running on the processor 402.

[0079] When processor 402 executes the program, it implements the method for running React components based on the adapter pattern in Vue provided in the above embodiments.

[0080] Furthermore, electronic devices also include: Communication interface 403 is used for communication between memory 401 and processor 402.

[0081] The memory 401 is used to store computer programs that can run on the processor 402.

[0082] The memory 401 may include high-speed RAM (Random Access Memory) memory, and may also include non-volatile memory, such as at least one disk storage.

[0083] If the memory 401, processor 402, and communication interface 403 are implemented independently, then the communication interface 403, memory 401, and processor 402 can be interconnected via a bus to complete communication between them. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 4 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0084] Optionally, in a specific implementation, if the memory 401, processor 402, and communication interface 403 are integrated on a single chip, then the memory 401, processor 402, and communication interface 403 can communicate with each other through an internal interface.

[0085] Processor 402 may be a CPU (Central Processing Unit), an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of this application.

[0086] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described method for running React components based on the adapter pattern in Vue.

[0087] Furthermore, this application also provides a computer program product, including a computer program or instructions, which, when executed, implement the above-described method for running React components based on the adapter pattern in Vue.

[0088] In the description of this specification, the references to "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0089] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "multiple" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0090] Any process or method description in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.

[0091] It should be understood that various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware as in another embodiment, it can be implemented using any of the following techniques known in the art, or a combination thereof: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0092] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

[0093] Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of this application.

Claims

1. A method for running React components based on the adapter pattern in Vue, characterized in that... include: Obtain a Vue wrapper component, which serves as a bridge between React components and the Vue environment; The Vue wrapper component is used to complete component registration, and the React component is encapsulated into a globally or locally callable Vue component to obtain a Vue-compatible React component. The rendering and bridging module built on the Vue wrapper component achieves bidirectional synchronization of Props, mapping of the event system, alignment of lifecycle hooks, and cross-framework conversion from slots to child nodes. It also calls the Vue-compatible React component in the Vue environment and completes component initialization rendering, runtime interaction response, and state update through the rendering and bridging module. When the Vue parent component is destroyed, the rendering and bridging module is called through the Vue wrapper component to trigger the unloading process of the React component.

2. The method for running React components based on the adapter pattern in Vue according to claim 1, characterized in that, Get Vue wrapper components, including: Retrieve a preset Vue wrapper component template; Based on the preset Vue wrapper component template, configure the basic parameters of the Vue wrapper component template according to the type of React component to be integrated and the version information of the Vue application; The configured Vue wrapper component template is instantiated into a callable Vue wrapper component, thus completing the acquisition of the Vue wrapper component.

3. The method for running React components based on the adapter pattern in Vue according to claim 1, characterized in that, The Vue wrapper component is used to complete component registration, encapsulating the React component into a globally or locally callable Vue component, including: Construct a higher-order wrapper function, React2VueWrapper; The original React component is passed as an input parameter to the higher-order encapsulation function, Vue component configuration items are defined, and the original React component is encapsulated into a registerable Vue component based on the Vue component configuration items; To register a Vue global component, call the Vue.component method to complete the global registration of the registrant Vue component. To register a Vue local component, declare the registrant Vue component in the components option of the target Vue parent component to complete the local registration. After registration, the Vue-compatible React component is generated based on the rules of the Vue component configuration items. The Vue-compatible React component can be directly called through Vue template syntax.

4. The method for running React components based on the adapter pattern in Vue according to claim 1, characterized in that, Props two-way synchronization includes: Set up a property collection unit in the rendering and bridging module to collect properties passed from the Vue parent component to the Vue-compatible React component; The property transformation unit converts Vue-formatted properties to React-compatible format while filtering out invalid properties. Set up an attribute listening unit to monitor changes in attributes after transformation. When an attribute changes, trigger an update command from the rendering and bridging modules. The updated properties are synchronously injected into the React component through the property injection unit, triggering the React component to re-render, thus completing the one-way synchronization of Props from Vue to React; When a property changes within a React component, the property postback unit converts the changed property into a Vue-compatible format and synchronizes it to the Vue wrapper component, completing the reverse synchronization of Props from React to Vue.

5. The method for running React components based on the adapter pattern in Vue according to claim 1, characterized in that, Event system mapping, lifecycle hook alignment, and cross-frame transformation from slots to child nodes include: Event system mapping: In the rendering and bridging module, the event collection passed by the Vue parent component is traversed, and the Vue-formatted events are converted into React-compatible callback functions. A bridging method is created for each converted callback function. When the React component triggers the callback function, the corresponding Vue custom event is triggered through the bridging method, achieving the upward bubbling of events from React to Vue. Lifecycle hook alignment: Bind the lifecycle hooks of the Vue wrapper component to the corresponding logic of the React component, and execute the rendering, updating and unloading mark operations of the React component synchronously during the lifecycle phase of the Vue wrapper component; Cross-frame conversion from slot to child node: In the rendering and bridging module, the slot content passed from the Vue parent component is obtained, the slot content is converted into a React-recognizable format and mapped to the child node of the React component, thus completing the cross-frame conversion from slot to child node.

6. The method for running React components based on the adapter pattern in Vue according to claim 1, characterized in that, Component initialization rendering, runtime interaction responses, and state updates, including: Initial rendering: When a Vue-compatible React component is first mounted, the rendering and bridging module creates React elements and renders them into the DOM container pre-defined by the Vue wrapper component; Runtime interactive response: When a React component triggers an interactive operation, it is synchronized to the Vue environment through rendering and bridging modules. The interactive commands in the Vue environment are then synchronized to the React component, achieving cross-framework interactive response. State Update: When a property / state changes on the Vue or React side, the rendering and bridging module triggers an update operation on the React component, completing the component state update and view redraw.

7. A system in which React components based on the adapter pattern run in Vue, characterized in that, include: The acquisition module is used to acquire Vue wrapper components, which serve as a bridge between React components and the Vue environment. The registration module is used to complete component registration through the Vue wrapper component, encapsulating React components into globally or locally callable Vue components to obtain Vue-compatible React components. The rendering bridge module is used to build a rendering and bridging module based on the Vue wrapper component, to achieve bidirectional synchronization of Props, mapping of the event system, alignment of lifecycle hooks and cross-framework conversion from slots to child nodes, and to call the Vue-compatible React component in the Vue environment. The rendering and bridging module completes component initialization rendering, runtime interaction response and state update. The uninstallation module is used to trigger the uninstallation process of the React component by calling the rendering and bridging module through the Vue wrapper component when the Vue parent component is destroyed.

8. An electronic device, characterized in that, Includes a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor executes the program to implement the method for running React components based on the adapter pattern in Vue as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program or instructions stored thereon, characterized in that, When a computer program or instruction is executed, it implements the method for running a React component based on the adapter pattern in Vue as described in any one of claims 1-6.

10. A computer program product, comprising a computer program or instructions, characterized in that, When a computer program or instruction is executed, it implements the method for running a React component based on the adapter pattern in Vue as described in any one of claims 1-6.

Images