React-based cross-platform client interface rendering method and system

Abstract

The invention discloses a React-based cross-platform client interface rendering method and system, and belongs to the technical field of interface render.The method comprises the steps that an interface instance request of a client is received and analyzed, and a plurality of interface modules are obtained; for each interface module, judging whether a module instance corresponding to the interface module exists in the cache or not, and if yes, returning the module instance to the client; if not, all module elements of the interface module are associated and then returned to the client, and a module instance is generated by the client; based on the module instances of all the interface modules, performing interface rendering through a client requested by the interface instances; and according to a preset updating frequency, updating the cached module instance, and when the data on which the interface module depends is changed, updating the module instance cache. According to the method, data association and data integration are processed at the background, so that the duration of respective processing at each client can be saved, the processing pressure of the client is reduced, and the efficiency is improved.

Description

Technical Field

[0001] This invention belongs to the field of interface rendering technology, specifically relating to a cross-platform client interface rendering method and system based on React. Background Technology

[0002] like Figure 1 As shown, the mainstream application display method based on the React framework currently on the market standardizes the component elements and styles of the display interface through React, which can achieve targeted interface display effects for different display clients, such as PC browsers and mobile apps. In general functional scenarios, each functional module on PC web pages and mobile applications is developed through the React service framework, output to the corresponding type of client for local environment integration and rendering, and finally display the view effect.

[0003] To meet increasingly complex interaction needs and improve access efficiency, more and more systems are using caching in conjunction with databases for data caching. For example... Figure 2 As shown, the mainstream React frameworks on the market only output modular code, which is then returned to the client for rendering and display as the client requests content. The caching part used by the mainstream frameworks on the market mainly caches data, just to reduce the request pressure on the database.

[0004] However, the above-mentioned existing technology has the following shortcomings: (1) The client obtains information from the server by establishing multiple asynchronous network requests, and then integrates and renders the styles, data, and module code required for content display locally. As the content and styles become more complex, the network loading request traffic pressure is relatively high, and the processing of the obtained content locally also affects the client's processing efficiency and response efficiency to some extent.

[0005] (2) Cross-platform general display modules cannot be flexibly integrated and reused. Currently, the display functions of internet applications need to meet cross-platform standards. If the same functional module is developed separately for each display channel type on PC web pages, mobile web pages, WeChat official accounts, and mobile apps (iOS and Android), the cost is high and it cannot be flexibly reused. The React framework can solve the problem of code-level reuse, but it still cannot completely improve or reduce the processing pressure of rendering modular code on various clients. This mainly includes the integration and processing between modular code and the data information of that module. Components and data of the same object need to be loaded and integrated locally. Lightweight pre-processing can reduce server pressure, but this affects client performance. Summary of the Invention

[0006] This invention addresses the shortcomings of existing technologies by providing a cross-platform client interface rendering method and system based on React. By processing data association and data integration in the background, it can save the time spent processing on each client separately, reduce client processing pressure, and improve efficiency.

[0007] This invention provides the following technical solution: Firstly, a cross-platform client-side UI rendering method based on React is provided, including the following steps: Receive and parse the client's UI instance request to obtain several UI modules corresponding to the currently requested UI instance; For each UI module, check if a corresponding module instance exists in the cache. If it does, return the cached module instance to the client. If it does not exist, associate all module elements of the UI module and return them to the client. The client then generates a module instance, where module elements include module styles, module data, and module code corresponding to the current UI module obtained through React technology. Based on module instances of all interface modules, the interface is rendered through client requests made by the interface instances. The cached module instances are updated according to the preset update frequency, and the module instance cache is updated when the data on which the interface module depends changes.

[0008] Optionally, the client's interface instance request includes: the identifier IDs of all interface modules; the step of determining whether a corresponding module instance exists in the cache for each interface module specifically involves: performing an enumeration query based on the identifier ID of the interface module.

[0009] Optionally, the identifier ID of the interface module includes: role information, view information, data permission information, and client information. Optionally, the cache includes a local first-level cache and a distributed second-level cache. When determining whether a corresponding module instance exists in the cache, the search is first performed in the local first-level cache. If no match is found, the search continues in the distributed second-level cache. If no match is found again, then no module instance corresponding to the interface module exists in the cache. Otherwise, a module instance corresponding to the interface module exists in the cache.

[0010] Optionally, updating the cached module instances according to a preset update frequency, and updating the module instance cache when the data on which the interface module depends changes, specifically involves: Define the priority of all module instances in the cache, and automatically update the module instances in a round-robin fashion according to the time interval corresponding to the priority; By listening for data changes through events and identifying all UI modules affected by the current data changes based on dependencies, when a user request includes the affected UI modules, the database is queried again to obtain the latest data. The module instance is then re-rendered using the latest data and module code and stored in the cache.

[0011] Secondly, a React-based cross-platform client-side UI rendering system is provided, including: The server receives and parses the UI instance request from the client to obtain several UI modules corresponding to the currently requested UI instance. For each UI module, it checks whether there is a corresponding module instance in the cache. If there is, the cached module instance is returned to the client; otherwise, all module elements of the UI module are associated and returned to the client. Module elements include module style, module data, and module code corresponding to the current UI module obtained through React technology. The client sends a UI instance request; it checks whether the return result of each UI module is a module instance; if not, it generates a module instance based on the return result; and it renders the UI based on the received module instance and the generated module instance. The caching module is used to cache UI module instances and update the cached module instances according to a preset update frequency. It also updates the module instance cache when the data that the UI module depends on changes.

[0012] Thirdly, a computer device is provided, including a processor and a memory; wherein, when the processor executes a computer program stored in the memory, it implements the steps of the React-based cross-platform client interface rendering method as described in any one of the first aspects.

[0013] Fourthly, a computer-readable storage medium is provided for storing a computer program; when the computer program is executed by a processor, it implements the steps of the React-based cross-platform client interface rendering method as described in any one of the first aspects.

[0014] Compared with the prior art, the beneficial effects of the present invention are: (1) This invention utilizes the modular component characteristics of React to cache the virtualized interface modules after the development of each interface module is associated with data on the server side. When multiple clients display the content, they can directly obtain the content of the interface module through a unified interface content request and display it. The associated data in the cached interface module is updated regularly. When the same module is needed by each client, the module code is uniformly integrated with associated data on the server side to form the interface module processing, saving the time of processing on each client separately, reducing the client processing pressure and improving efficiency.

[0015] (2) When the present invention receives a client interface request, it performs an enumeration query based on the identifier ID of the interface module and directly returns the cached instance interface module to the client. This makes it convenient to load and cache different data of the React module code according to different roles, views, clients and data permissions as needed. When content requests are made in different scenarios, personalized content can be quickly returned to the client, which is more flexible. Attached Figure Description

[0016] Figure 1 This is a schematic diagram of the modular display and rendering relationship based on the React framework in existing technologies; Figure 2 This is a schematic diagram of the request flow using React and caching in existing technologies; Figure 3 This is a flowchart of the React-based cross-platform client interface rendering method of the present invention; Figure 4 This is a structural block diagram of the React-based cross-platform client interface rendering system of the present invention. Detailed Implementation

[0017] The present invention will be further described below with reference to the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solutions of the present invention and should not be used to limit the scope of protection of the present invention. It should be noted that the term "comprising" and any variations thereof in the specification, claims and the above-mentioned drawings of the present invention are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products or devices.

[0018] Example 1 A cross-platform client-side UI rendering method based on React includes the following steps: Receive and parse the client's UI instance request to obtain several UI modules corresponding to the currently requested UI instance; For each UI module, check if a corresponding module instance exists in the cache. If it does, return the cached module instance to the client. If it does not exist, associate all module elements of the UI module and return them to the client. The client then generates a module instance, where module elements include module styles, module data, and module code corresponding to the current UI module obtained through React technology. Based on module instances of all interface modules, the interface is rendered through client requests made by the interface instances. The cached module instances are updated according to the preset update frequency, and the module instance cache is updated when the data on which the interface module depends changes.

[0019] The above method can be referenced in its specific implementation process. Figure 3 As shown, the specific implementation steps include: Step 1: Receive client interface requests.

[0020] The client-side interface mentioned in this application can be a webpage in a PC browser or an interface displayed to the user in a mobile application (APP). Generally, client-side interfaces can take many forms, commonly including homepages, menu pages, and interfaces displayed after triggering corresponding links in parent and child interfaces. An instance request for a client-side interface consists of instance requests from multiple modules.

[0021] Another type of request interface can be used for functional operations on the client side. This interface display instructions are usually generated by the web application client requesting the small module instance to be loaded after the user performs some operation on the web application. The functional operation and the module in the previous interface display are the same modular instance, only the module size is different.

[0022] After receiving a user interface content access request from the client, this application determines the data requirements requested by the interface access request based on the request header parsed from the request data packet.

[0023] Step 2: Determine whether there is a cached module instance for each interface module.

[0024] In this embodiment, after receiving the client's interface request, it is distributed according to the set rules, that is, distributed to the static resource server or the dynamic server, and distributed to the specified target type logic processing through the request feature instruction. This step is to determine whether the request header instruction feature is a cached interface module request type.

[0025] In this embodiment, the client's interface instance request includes: the identifier IDs of all interface modules; for each interface module, it is determined whether a corresponding module instance exists in the cache, specifically by enumerating and querying based on the identifier ID of the interface module. The identifier ID of the interface module includes: role information, view information, data permission information, and client information. In some other embodiments, the client's interface instance request includes the interface module ID, URL path, query parameters, client environment information, and device information corresponding to the requested interface instance; the number of interface modules corresponding to the currently requested interface instance is determined through static analysis or configuration files.

[0026] The server combines the UI module ID with the corresponding context information to generate a cache key. It then uses this cache key to identify the ID and retrieves the cache instance to determine if a corresponding module instance exists. Context information comes from request headers, authentication tokens, query parameters, or server-side sessions, and includes user identity information, client environment information, device information, and business context.

[0027] Step 3: If no cached module instance exists, return the data content, style resources, and module code to the client.

[0028] The existing normal request logic is processed, which involves splitting and coordinating the request, including logical chaining of various interface methods, verification of permissions and other information, logging, etc., in order to obtain data content, style resources, module code and return them to the client.

[0029] In this embodiment, through the corresponding service call, the structured dataset required by the business instance module is queried from the database according to the request command parameters; the module code corresponding to the request command is obtained through React technology; and the corresponding style module is associated according to different display and module requirements. After reading the relevant data and other information of the interface instance request and logically packaging it as needed, the query results of the three elements (data content, style resources, and module code) of the corresponding interface instance module are pushed to the client on the application server. The client generates a module instance based on the data content, style resources, and module code.

[0030] Step 4: If a cached module instance exists, return the cached module instance to the client.

[0031] The character stream of the corresponding module instance is read from the cache based on the cache key identifier ID. Of course, in some other embodiments, The character stream of the corresponding module instance is read from the cache by using the unique ID of the module identifier in the module instance request command in the interface.

[0032] Since the interface module may be used in multiple interfaces and different views with different user permissions, its access request frequency is relatively high. In this case, each request directly accesses the database, which increases the burden on the database. Step S2 can cache the virtualized instance of the corresponding module through caching, reducing the data request pressure on the server and the content module integration and parsing processing pressure on the client.

[0033] In this embodiment, the cache includes a local first-level cache and a distributed second-level cache. To determine if a corresponding module instance exists in the cache, the system first searches the local first-level cache. If the cache misses, it continues searching the distributed second-level cache. If the cache misses again, the corresponding module instance does not exist in the cache; otherwise, it does. In other words, whether the data is retrieved from the application server's local first-level cache and the query result is returned to the client's interface instance, or stored in memory using a separate second-level cache, both methods can alleviate database request pressure. However, considering the increasing scale and richness of interfaces and modules, a caching method with independent, powerful distributed cache management capabilities is needed. A distributed cluster is established using a second-level cache approach. The establishment of the distributed second-level cache cluster can refer to existing technologies.

[0034] In this embodiment, the module instance returned directly after matching the cache is serialized and then pushed to the client via the API gateway of the WEB request.

[0035] Step 5: The client checks whether the returned result is a module instance.

[0036] For the client, it receives the module instance and module element content (data content, style resources, module code). Based on the content of the returned result, it determines whether it is traditional module instance content (data content, style resources, module code) or virtualized module. Depending on the type, the process steps for rendering the interface will also differ.

[0037] Step 6: For non-module instance return results, the client parses the module element and generates a module instance.

[0038] The client receives the module instance from the corresponding remote server, parses it, and performs localized rendering. PC browsers or mobile operating systems can handle the generation of module instances and complete all necessary calculations locally. The parser's output for the UI module instance consists of a structured tree structure and its attribute nodes.

[0039] Step 7: Client interface rendering and display The rendering tree is generated by combining the already constructed rendering instances and the module instances directly received by the client with the style rule tree. The rendering tree is then traversed to begin layout, calculating the position and size information of each node, and drawing each node of the rendering tree onto the screen to complete the final interface display.

[0040] Step 8: Periodically poll to determine whether the cache of each module needs to be updated.

[0041] Define the priority of all module instances in the cache, and automatically update the module instances in a round-robin fashion according to the time interval corresponding to the priority.

[0042] More specifically, by establishing periodic independent task processes, the data in the module instances is automatically updated in a round-robin fashion according to the priority of continuous updates of all module content in the cluster cache, based on the time intervals corresponding to the priority.

[0043] The virtualized cache of the modules is simply divided into three priorities based on the combined indicators formed by the number of accesses and the frequency of access. This improves the update frequency of module content data with high access frequency, ensures the timeliness of module data, and avoids the performance pressure on the server and database caused by the full data update of a large module content cluster cache.

[0044] Step 9: Read module data and update module content.

[0045] By listening for data changes through events and identifying all UI modules affected by the current data changes based on dependencies, when a user request includes the affected UI modules, the database is queried again to obtain the latest data, and the module instance is re-rendered using the latest data and module code and stored in the cache.

[0046] Through the corresponding service call, based on the request command parameters, the database is queried to obtain the structured dataset required by the business instance module. The database is a traditional mainstream relational database, designed to simply store structured data related to business relationships. Targeted data results are then obtained from the stored dataset using database language, i.e., logical SQL.

[0047] This application integrates the various functional modules and corresponding data required for a common display on a webpage or mobile app client via backend processing. This results in individual functional modules with embedded information, each with a unique identifier ID, which is then cached. Based on the different module requirements of different clients, the server retrieves the data from the cache and transmits it back to the client for loading and display. This reduces the step of integrating React modules with data for each client. When a client initiates a UI display request using the module identifier ID, the server quickly assembles the display instance content of each module from the cache, completing the loading of the complete content module.

[0048] Example 2 like Figure 4 As shown, a cross-platform client-side UI rendering system based on React includes: The server receives and parses the UI instance request from the client to obtain several UI modules corresponding to the currently requested UI instance. For each UI module, it checks whether there is a corresponding module instance in the cache. If there is, the cached module instance is returned to the client; otherwise, all module elements of the UI module are associated and returned to the client. Module elements include module style, module data, and module code corresponding to the current UI module obtained through React technology. The client sends a UI instance request; it checks whether the return result of each UI module is a module instance; if not, it generates a module instance based on the return result; and it renders the UI based on the received module instance and the generated module instance. The caching module is used to cache UI module instances and update the cached module instances according to a preset update frequency. It also updates the module instance cache when the data that the UI module depends on changes.

[0049] For more detailed information about the system described above, please refer to the relevant content disclosed in the foregoing embodiments, which will not be repeated here.

[0050] Example 3 The present invention provides a computer device, including a processor and a memory; wherein, when the processor executes a computer program stored in the memory, it implements the steps of the above-described React-based cross-platform client interface rendering method.

[0051] For more detailed information on the above methods, please refer to the relevant content disclosed in the foregoing embodiments, which will not be repeated here.

[0052] Example 4 This invention provides a computer-readable storage medium for storing a computer program; when the computer program is executed by a processor, it implements the steps of the above-described React-based cross-platform client interface rendering method.

[0053] For more detailed information on the above methods, please refer to the relevant content disclosed in the foregoing embodiments, which will not be repeated here.

[0054] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. The systems, devices, and storage media disclosed in the embodiments are described simply because they correspond to the methods disclosed in the embodiments; relevant details can be found in the method section.

[0055] Those skilled in the art will clearly understand that the techniques in the embodiments of the present invention can be implemented using software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solutions in the embodiments of the present invention, or the parts that contribute to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in various embodiments or certain parts of the embodiments of the present invention.

[0056] The above are merely preferred embodiments of the present invention. The scope of protection of the present invention is not limited to the above embodiments. All technical solutions falling within the scope of the present invention's concept are within the scope of protection of the present invention. It should be noted that for those skilled in the art, any improvements and modifications made without departing from the principles of the present invention should be considered within the scope of protection of the present invention.

Claims

1. A cross-platform client-side UI rendering method based on React, characterized in that, Includes the following steps: Receive and parse the client's UI instance request to obtain several UI modules corresponding to the currently requested UI instance; For each UI module, check if a corresponding module instance exists in the cache. If it does, return the cached module instance to the client. If it does not exist, associate all module elements of the UI module and return them to the client. The client then generates a module instance, where module elements include module styles, module data, and module code corresponding to the current UI module obtained through React technology. Based on module instances of all interface modules, the interface is rendered through client requests made by the interface instances. The cached module instances are updated according to the preset update frequency, and the module instance cache is updated when the data on which the interface module depends changes.

2. The React-based cross-platform client interface rendering method according to claim 1, characterized in that, The client's interface instance request includes: the identifier ID of all interface modules; for each interface module, determining whether there is a corresponding module instance in the cache specifically involves: performing an enumeration query based on the identifier ID of the interface module.

3. The React-based cross-platform client interface rendering method according to claim 2, characterized in that, The identifier ID of the interface module includes: role information, view information, data permission information, and client information.

4. The React-based cross-platform client interface rendering method according to claim 1, characterized in that, The cache includes a local first-level cache and a distributed second-level cache. When determining whether a corresponding module instance exists in the cache, the search is first performed in the local first-level cache. If no match is found, the search continues in the distributed second-level cache. If no match is found either, then no module instance corresponding to the interface module exists in the cache. Otherwise, a module instance corresponding to the interface module exists in the cache.

5. The React-based cross-platform client interface rendering method according to claim 1, characterized in that, The process of updating the cached module instances according to a preset update frequency, and updating the module instance cache when the data on which the interface module depends changes, specifically involves: Define the priority of all module instances in the cache, and automatically update the module instances in a round-robin fashion according to the time interval corresponding to the priority; By listening for data changes through events and identifying all UI modules affected by the current data changes based on dependencies, when a user request includes the affected UI modules, the database is queried again to obtain the latest data. The module instance is then re-rendered using the latest data and module code and stored in the cache.

6. A cross-platform client-side interface rendering system based on React, characterized in that, include: The server receives and parses the UI instance request from the client to obtain several UI modules corresponding to the currently requested UI instance. For each UI module, it checks whether there is a corresponding module instance in the cache. If there is, the cached module instance is returned to the client; otherwise, all module elements of the UI module are associated and returned to the client. Module elements include module style, module data, and module code corresponding to the current UI module obtained through React technology. The client sends a UI instance request; it checks whether the return result of each UI module is a module instance. If not, it generates a module instance based on the return result. The interface is rendered based on the received module instance and the generated module instance. The caching module is used to cache UI module instances and update the cached module instances according to a preset update frequency. It also updates the module instance cache when the data that the UI module depends on changes.

7. A computer device, characterized in that, It includes a processor and a memory; wherein, when the processor executes the computer program stored in the memory, it implements the steps of the React-based cross-platform client interface rendering method according to any one of claims 1-5.

8. A computer-readable storage medium, characterized in that, Used to store computer programs; when the computer programs are executed by a processor, they implement the steps of the React-based cross-platform client interface rendering method as described in any one of claims 1-5.

Images