React component configuration method, system, electronic device and storage medium

Abstract

The embodiment of the application discloses a React component configuration method and system, electronic equipment and storage medium, and relates to the technical field of front-end development. The method comprises the following steps: splitting rendering code in the React component Render into multiple modules; encapsulating the multiple modules into module components in the form of functions respectively; the module components perform rendering according to received parameters and return corresponding rendering effects; encapsulating functions unrelated to rendering logic and parameter requests into a public function component; and exposing the functions in the module components and the public function component for calling. According to the application, the rendering part and the public logic part in the original component are separated, which can reduce the redundancy of the component to some extent, thereby improving the reusability and maintainability of the component, and the application is suitable for front-end development scenes such as web pages and user interfaces.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a React component configuration method, system, electronic device and storage medium. Background Art

[0002] React is a JavaScript library for building user interfaces. In existing React code, most components' Render (a function or method name) values ​​are based on rendering code. However, when rendering code is piled up within a component, it becomes redundant and its single functionality is compromised, making it difficult to reuse and maintain, potentially impacting the performance of the entire project. Summary of the Invention

[0003] In view of this, embodiments of the present invention provide a React component configuration method, apparatus, electronic device, and storage medium, which can reduce component redundancy to a certain extent, thereby facilitating improved component reusability and maintainability.

[0004] In order to achieve the above-mentioned purpose of the invention, the following technical solutions are adopted:

[0005] In a first aspect, an embodiment of the present invention provides a React component configuration method, the method comprising: splitting the rendering code in the React component Render into multiple modules; encapsulating the multiple modules into module components in the form of functions; the module components render according to the received parameters and return the corresponding rendering effects; encapsulating functions unrelated to the rendering logic and parameter requests into a common function component; and exposing the functions in the module components and the common function components for calling.

[0006] Optionally, after exposing the functions in the module component and the common function component for calling, the method further includes: when the React component needs to use at least one of the module component and / or common function component to render a predetermined function of the page, introducing the module component and / or common function component into the React component.

[0007] Optionally, introducing the module component and / or common function component into the React component includes: calling the module component and / or common function component through the calling interface provided by the function; receiving attribute parameters passed in by the module component and / or common function component; rendering based on the attribute parameters and returning HTML code.

[0008] Optionally, introducing the module component and / or public function component into the React component includes: calling the module component and / or public function component through the calling interface provided by the function; the module component and / or public function component is customized with attribute parameters for implementing predetermined function rendering of the page; rendering is performed based on the attribute parameters and returning HTML code.

[0009] Optionally, calling the module component through the calling interface provided by the function includes: introducing a first module component corresponding to the predetermined function of the page according to the predetermined function of the page; and calling the first module component through the function exposed by the first module component in the component Render.

[0010] Optionally, the public function component is created in the same directory as the page-level component.

[0011] In the second aspect, an embodiment of the present invention also provides a React component configuration system, which includes: a splitting program unit for splitting the rendering code in the React component Render into multiple modules; a first encapsulation program unit for encapsulating the multiple modules into module components in the form of functions; the module components render according to the received parameters and return the corresponding rendering effects; a second encapsulation program unit for encapsulating functions that are not related to rendering logic and parameter requests into a common function component; an exposure program unit for exposing the functions in the module components and the common function components for calling.

[0012] In a third aspect, an embodiment of the present invention provides an electronic device, comprising: one or more processors; a memory; one or more executable programs stored in the memory, the one or more processors reading the executable program code stored in the memory, and running the program corresponding to the executable program code to execute any React component configuration method described in the first aspect.

[0013] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement any React component configuration method described in the first aspect.

[0014] The React component configuration method, system, electronic device and storage medium provided by the embodiment of the present invention are further split through the React component, and the rendering code in Render is split into multiple modules, and the multiple modules are respectively encapsulated into module components in the form of functions; the module component renders according to the received parameters and returns the corresponding rendering effect; the functions unrelated to the rendering logic and parameter request are encapsulated into a public function component. In this way, by extracting the rendering part and the public logic part in the original component and encapsulating them into independent components, the redundancy in the original component is reduced, the executed business logic is clear, and the readability is high. Compared with the method of piling up various rendering codes in one component, the redundancy of the component can be reduced to a certain extent, which is conducive to improving the reusability and maintainability of the component. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0016] Figure 1 This is a flow chart of a method for configuring a React component according to an embodiment of the present invention;

[0017] Figure 2 This is a schematic diagram showing the configuration data flow of an embodiment of the present invention, taking the React component as a page component as an example;

[0018] Figure 3 A schematic diagram of the data flow for configuring a React component according to an embodiment of the present invention;

[0019] Figure 4 This is a flow chart of a method for configuring a React component according to an embodiment of the present invention;

[0020] Figure 5 This is a schematic block diagram of the React component configuration system architecture according to another embodiment of the present invention;

[0021] Figure 6 This is a schematic block diagram of another embodiment of the electronic device of the present invention. DETAILED DESCRIPTION

[0022] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0023] It should be understood that the embodiments described are only a portion of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without creative work are within the scope of protection of the present invention.

[0024] The React component configuration method provided by the embodiment of the present invention can be applied to front-end development scenarios, such as web pages, application (APP) user interfaces, etc. By splitting the rendering code accumulated in the component into independent module components, and creating a public function component in the same-level directory to store the public UI (rendering) and public logic, the page-level components are turned into container components (Container Components) that only store specialized business logic (the so-called business logic simply refers to the process steps required to achieve the predetermined page rendering purpose). This can reduce the redundancy caused by the accumulation of code in the current component and improve the maintainability of the component.

[0025] Among them, UI components are responsible for the display of the page and do not have any logic. Container components do not care about what the page looks like, they focus on the business logic of the entire page.

[0026] It should be noted that the method can be solidified in a certain manufactured physical product in the form of software, and when the user uses the product, the method flow of the present application can be reproduced.

[0027] Figure 1 This is a flow chart of a method for configuring a React component according to an embodiment of the present invention; Figure 2 This is a schematic diagram showing the configuration data flow of an embodiment of the present invention, taking the React component as a page component as an example; Figure 3 This is a schematic diagram of the data flow of the React component configuration according to an embodiment of the present invention; see Figures 1 to 3 As shown, the React component configuration method may include the following steps:

[0028] S110. Split the rendering code in the React component Render into multiple modules.

[0029] The React component refers to a function component based on the React.JS framework, which can be a global component, a local component, or a single-file component. Render is a function or method in React.JS for rendering.

[0030] Component rendering is determined by render. Previously, component rendering and all logic were written in a single file. When we manage a component's logic and rendering in a single file, it becomes difficult to maintain the component. Therefore, we need to split the component, letting the UI component handle rendering and the container component handle logic.

[0031] like Figure 2 As shown, in this embodiment, it is based on React.JS, according to the technical concept of separating the rendering part and the logic part in the component, on the basis of separating the UI (rendering) component and the container component, the JSX code in the Render of the UI (rendering) component is further split, specifically, the JSX code of the render part is split out and encapsulated to form a UI component, and the remaining logic part after splitting the JSX code is encapsulated into the container component.

[0032] S120, encapsulating the multiple modules into module components in the form of functions; the module components render according to received parameters and return corresponding rendering effects;

[0033] S130. Encapsulate functions unrelated to rendering logic and parameter requests into a common function component;

[0034] S140: Expose the functions in the module component and the public function component for invocation. The return value of the publicly exposed component function can be UI (page rendering) or logic processing; Figure 2 The common function components are not shown.

[0035] In this embodiment, the rendering code in Render is split into multiple modules by further splitting the React component. These modules are then encapsulated into module components in the form of functions. The module components render according to the received parameters and return the corresponding rendering effects. Functions unrelated to the rendering logic and parameter requests are encapsulated into a public function component. This allows the rendering portion and public logic portion of the original component to be extracted and encapsulated into independent components, reducing redundancy within the original component and ensuring clear and readable business logic. Compared to piling various rendering codes into a single component, this can reduce component redundancy to a certain extent, thereby improving component reusability and maintainability.

[0036] Please see Figure 4As shown, in some embodiments, after exposing the functions in the module components and the common function components for invocation, the method further includes: when a React component needs to utilize at least one of the module components and / or common function components to render a predetermined page function, introducing the module components and / or common function components into the React component. In this way, code reuse can be quickly achieved, improving page rendering efficiency.

[0037] Specifically, introducing the module component and / or common function component into the React component includes: calling the module component and / or common function component through the calling interface provided by the function; receiving attribute parameters passed in by the module component and / or common function component; rendering based on the attribute parameters and returning HTML code.

[0038] For example, if multiple pages require a div box, you need to introduce divFunction first. Call the divFunction function (a function component) in the component render, use the divFunction function to pass in different box attributes such as size, color, and border, and return HTML code through the function component to quickly complete the rendering of different box attributes.

[0039] In the embodiment of the present invention, the aforementioned function exposure method is used to replace the props value passing between components with the above return value, which can make the data flow clearer.

[0040] In some further embodiments, the introducing the module component and / or public function component into the React component includes: calling the module component and / or public function component through the calling interface provided by the function; the module component and / or public function component is customized with attribute parameters for implementing the rendering of predetermined functions of the page; rendering is performed based on the attribute parameters, and html code is returned.

[0041] Still using the above example, we can pre-define the box properties for the function divFunction that needs to be called, and then call it directly through the function. Based on the pre-defined box properties of the function component, we can quickly achieve box rendering.

[0042] In some embodiments, calling the module component through the calling interface provided by the function includes: introducing a first module component corresponding to the predetermined function of the page according to the predetermined function of the page; and calling the first module component through the function exposed by the first module component in the component Render.

[0043] For example, if multiple pages require a div box function, the corresponding first module component is introduced based on the predetermined function of the page, which can quickly realize code reuse and creation of page components.

[0044] In some embodiments, the public function component is created in the same directory as the page-level component.

[0045] In this embodiment, by creating a public function component in the same directory as the page level component to store the public UI (rendering) and public logic parts, the page level component becomes a pure container component that only stores logic, such as Figure 2 shown.

[0046] According to the technical solutions described above, the React component configuration method provided by the embodiment of the present invention can reduce the amount of code of the current component and improve the maintainability of the component by extracting the rendering part from the common logic part in the component to make it a pure container component.

[0047] Furthermore, by presenting JSX code in the form of function components, it is easier to understand, thereby increasing the reuse rate of code blocks and thus improving front-end development efficiency.

[0048] Furthermore, the React component configuration method provided by the embodiment of the present invention is used for rendering of the user interface, which can make the project file structure hierarchy clearer and the data flow between components clearer.

[0049] Example 2

[0050] Figure 5 This is a schematic diagram of the React component configuration system architecture according to an embodiment of the present invention. Figure 4 As shown, based on the same technical concept as the aforementioned embodiments, a React component configuration system is also provided, including: a splitting program unit 210, used to split the rendering code in the React component Render into multiple modules; a first encapsulation program unit 220, used to encapsulate the multiple modules into module components in the form of functions; the module components render according to the received parameters and return the corresponding rendering effects; a second encapsulation program unit 230, used to encapsulate functions that are not related to rendering logic and parameter requests into a common function component; an exposure program unit 240, used to expose the functions in the module components and the common function components for calling.

[0051] The system of this embodiment can be used to perform Figure 1 The technical solution of the method embodiment shown has similar implementation principles and technical effects to those of embodiment 1, which will not be described in detail here and can be referenced by each other.

[0052] In some embodiments, the system further includes: an introduction program unit for introducing the module component and / or public function component into the React component after exposing the functions in the module component and the public function component for calling, when the React component needs to use at least one of the module component and / or public function component to render a predetermined function of the page.

[0053] In some other embodiments, the introduced program unit includes: a calling program module for calling the module component and / or the common function component through a calling interface provided by the function;

[0054] A receiving program module, configured to receive attribute parameters passed in by the module component and / or the common function component;

[0055] The rendering program module is used to render based on the attribute parameters and return HTML code.

[0056] In some further embodiments, the introducing program unit includes:

[0057] A calling program module is used to call the module component and / or public function component through the calling interface provided by the function; the module component and / or public function component is customized with attribute parameters for realizing the rendering of the predetermined function of the page; a rendering program module is used to render based on the attribute parameters and return HTML code.

[0058] The React component configuration system provided by the embodiments of the present invention, based on the same specific technical features as the React component configuration method described in any of the aforementioned embodiments, extracts the rendering portion and common logic portion of the original component and encapsulates them into independent components. This reduces redundancy within the original component, maintains clear business logic, and enhances readability. Compared to stacking various rendering codes in a single component, this can reduce component redundancy to a certain extent, thereby improving component reusability and maintainability.

[0059] It is understandable that the system of this embodiment can also be used to execute other embodiments in the first embodiment. For the sake of clarity and brevity, the remaining embodiments will not be described in detail and can be referred to in conjunction with each other.

[0060] Example 3

[0061] Another embodiment of the present invention provides an electronic device, comprising: one or more processors; a memory; one or more executable programs stored in the memory, the one or more processors reading the executable program code stored in the memory and running the program corresponding to the executable program code to execute the React component configuration method described in any one of the first embodiments.

[0062] Figure 6 FIG. 1 is a schematic structural diagram of an embodiment of an electronic device of the present invention, which can implement any of the methods described in Embodiment 1 of the present invention, such as Figure 6 As shown, as an optional embodiment, the above-mentioned electronic device may include: a housing 41, a processor 42, a memory 43, a circuit board 44 and a power supply circuit 45, wherein the circuit board 44 is placed inside the space enclosed by the housing 41, and the processor 42 and the memory 43 are arranged on the circuit board 44; the power supply circuit 45 is used to supply power to various circuits or devices of the above-mentioned electronic device; the memory 43 is used to store executable program code; the processor 42 runs the program corresponding to the executable program code by reading the executable program code stored in the memory 43, so as to execute the aforementioned React component configuration method described in any one of the first embodiments.

[0063] The specific execution process of the above steps by the processor 42 and the steps further performed by the processor 42 by running the executable program code can be found in the description of the first embodiment of the React component configuration method of the present invention, and will not be repeated here.

[0064] The electronic device exists in various forms, including but not limited to: (1) Mobile communication devices: These devices are characterized by having mobile communication functions and are mainly aimed at providing voice and data communications. Such terminals include: smart phones, multimedia phones, functional phones, and low-end phones. (2) Ultra-mobile personal computer devices: These devices belong to the category of personal computers, have computing and processing functions, and generally also have mobile Internet access features. Such terminals include: PDA, MID and UMPC devices, such as iPad. (3) Portable entertainment devices: These devices can display and play multimedia content. Such devices include: audio and video playback modules (such as iPod), handheld game consoles, e-books, as well as smart toys and portable car navigation devices. (4) Servers: Devices that provide computing services. The server's composition includes processors, hard disks, memory, system buses, etc. The server is similar to the general computer architecture, but because it needs to provide highly reliable services, it has higher requirements in terms of processing power, stability, reliability, security, scalability, and manageability. (5) Other electronic devices with data interaction functions.

[0065] Another embodiment of the present invention provides a computer-readable storage medium, which stores one or more programs. The one or more programs can be executed by one or more processors to implement the React component configuration method described in any one of the above-mentioned embodiments.

[0066] In summary, according to the descriptions of the above embodiments, the React component configuration scheme disclosed in this embodiment can reduce the amount of code of the current component and improve the reusability and maintainability of the component by extracting the rendering part from the public logic part in the component, making it a pure container component.

[0067] Furthermore, by presenting JSX code in the form of function components, it is easier to understand, thereby increasing the reuse rate of code blocks and thus improving front-end development efficiency.

[0068] Furthermore, the React component configuration method provided by the embodiment of the present invention is used for rendering of the user interface, which can make the project file structure hierarchy clearer and the data flow between components clearer.

[0069] It should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply the existence of any such actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.

[0070] Each embodiment in this specification is described in a related manner. The same or similar parts between the embodiments can be referred to each other. Each embodiment focuses on the differences from other embodiments.

[0071] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing related hardware through a computer program. The program can be stored in a computer-readable storage medium, and when executed, the program can include the processes in the above-described method embodiments. The storage medium can also be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0072] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the present invention should be included in the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be based on the scope of protection of the claims.

Claims

1. A React component configuration method, characterized in that: The method comprises the steps of: Split the rendering code in the React component Render into multiple modules; The multiple modules are respectively encapsulated into module components in the form of functions; the module components render according to the received parameters and return corresponding rendering effects; Encapsulate functions unrelated to rendering logic and parameter requests into public function components; Expose the functions in the module component and the public function component for calling; After exposing the functions in the module components and the common function components for invocation, the method further includes: when a React component needs to utilize at least one of the module components and / or the common function components to render a predetermined function of a page, introducing the module components and / or the common function components into the React component; The introducing the module component and / or the common function component into the React component includes: Calling the module component and / or public function component through the calling interface provided by the function; Receive attribute parameters passed in by the module component and / or public function component; Renders based on the attribute parameters and returns HTML code.

2. The React component configuration method according to claim 1, wherein: The introducing the module component and / or the common function component into the React component includes: The module component and / or the common function component are called through the calling interface provided by the function; the module component and / or the common function component are customized with attribute parameters for realizing the rendering of the predetermined function of the page; Renders based on the attribute parameters and returns HTML code.

3. The React component configuration method according to claim 1 or 2, characterized in that: The calling interface provided by the function, calling the module component includes: According to a predetermined function of the page, a first module component corresponding to the predetermined function of the page is introduced; and the first module component is called in the Render component through a function exposed by the first module component.

4. The React component configuration method according to claim 1, wherein: The public function component is created in the same directory as the page level component.

5. A React component configuration system, characterized in that: The system comprises: A splitting program unit is used to split the rendering code in the React component Render into multiple modules; A first encapsulation program unit is used to encapsulate the multiple modules into module components in the form of functions; the module components render according to received parameters and return corresponding rendering effects; A second encapsulation program unit is used to encapsulate functions unrelated to rendering logic and parameter requests into a common function component; An exposure program unit for exposing functions in the module component and the public function component for calling; The system further includes: an introduction program unit for introducing the module component and / or the public function component into the React component after the functions in the module component and the public function component are exposed for invocation, when the React component needs to use at least one of the module component and / or the public function component to render a predetermined function of the page; The introduction program unit includes: A calling program module, configured to call the module component and / or the common function component via a calling interface provided by the function; A receiving program module, configured to receive attribute parameters passed in by the module component and / or the common function component; The rendering program module is used to render based on the attribute parameters and return HTML code.

6. The React component configuration system according to claim 5, characterized in that: The introduction program unit includes: A calling program module, configured to call the module component and / or the common function component through the calling interface provided by the function; the module component and / or the common function component are customized with attribute parameters for implementing the rendering of the predetermined function of the page; The rendering program module is used to render based on the attribute parameters and return HTML code.

7. An electronic device, characterized in that: include: One or more processors; Memory; One or more executable programs are stored in the memory, and the one or more processors read the executable program code stored in the memory and run the program corresponding to the executable program code to execute the React component configuration method described in any one of claims 1 to 4.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the React component configuration method described in any one of claims 1 to 4.

Images