A page view processing method of a React application and a related device
By using IndexedDB and Redux for view management in React applications, the problems of slow response speed and poor data security are solved, achieving fast response and secure and stable view processing.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- SHENZHEN FULIN TECH CO LTD
- Filing Date
- 2023-06-28
- Publication Date
- 2026-06-16
AI Technical Summary
Existing React applications suffer from slow response times, inconvenient scaling, and poor data security in view management.
IndexedDB is used as the local database, and Redux is used for state management. Snapshot data is created by merging server-side view data and local cached view data. Page view rendering is performed based on the updated Redux data nodes to update component state, thus achieving the security and stability of view data.
It improves data read and write speed, provides faster response, is easier to expand and maintain, ensures the security and stability of view data, and meets various user needs.
Smart Images
Figure CN116821549B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and in particular to a method, system, computer device, and storage medium for processing page views in a React application. Background Technology
[0002] With the continuous development of Internet technology, more and more applications using React as the front-end framework need to support a variety of different views, such as list views, table views, map views, etc. At the same time, in order to improve user experience, these views usually need to save users' personalized settings, such as sorting methods, grouping methods, layout methods, filtering conditions, and table header settings. Existing view management has problems such as slow response speed, inconvenient expansion, and poor data security. There is an urgent need for a new view management method and system to meet these needs. Summary of the Invention
[0003] The purpose of this application is to provide a method, system, computer device, and storage medium for processing page views in React applications, so as to solve the problems of slow response speed, inconvenient expansion, and poor data security in the view management process of the prior art.
[0004] To address the aforementioned technical problems, this application provides a method for processing page views in a React application, the method comprising:
[0005] In response to a page view processing request from a React application, server-side view data is obtained based on the view ID in the page view processing request, and local cached view data corresponding to the view ID is obtained from the IndexedDB database connected to the React application.
[0006] Read the target field information of the local cached view data, and determine whether the local cached view data has been updated based on the target field information;
[0007] If the local cached view data is updated, then the server-side view data and the local cached view data are merged and a snapshot data is created;
[0008] If the local cached view data is not updated, then the snapshot data is created based on the server-side view data;
[0009] The snapshot data is updated to the Redux data node and the local cached view data. Based on the updated Redux data node, the state of the React application's components is updated, and the page view is rendered based on the updated component state.
[0010] Furthermore, the step of merging the server-side view data and the locally cached view data includes:
[0011] Identify multiple data items to be merged, and determine whether the data items are target data items;
[0012] If it is a target data item, then determine whether the target data item exists in the local cache view data. If it exists, then retrieve the corresponding data from the local cache view data; otherwise, retrieve the corresponding data from the server-side view data.
[0013] If it is not the target data item, the corresponding data is directly obtained from the server-side view data;
[0014] The data of each data item obtained from the local cache view data and the server-side view data will be merged.
[0015] Furthermore, after the step of rendering the page view, the method further includes:
[0016] Receive view operation instructions and update the field data of the corresponding component according to the view operation instructions;
[0017] The snapshot data is recreated based on the updated field data, and the newly created snapshot data is updated to the Redux data nodes and the local cached view data to re-render the page view.
[0018] Furthermore, after re-rendering the page view, the method further includes:
[0019] Receive view configuration storage instructions and determine the current user's permissions based on the view configuration storage instructions;
[0020] Based on the user's permissions, the current view data is stored on the server in a view type that matches the permissions. The view types include public view types and private view types.
[0021] Upon receiving a view restoration request after view adjustment, the system retrieves the selected view data from the server based on the view restoration request to restore the view.
[0022] Furthermore, after receiving the view configuration storage instruction, the method further includes:
[0023] When multiple receive view configuration storage instructions are received, it is determined whether the multiple receive view configuration storage instructions are for the same view data. If so, the view data is overwritten and stored on the server based on the order in which the view configuration storage instructions are stored or updated.
[0024] Furthermore, after the step of storing the current view data to the server in a view type that matches the permissions, the method further includes:
[0025] Receive a view copy request, and obtain the view data to be copied and the current user's permissions based on the view copy request;
[0026] Determine whether the view to be copied matches the current user's permissions. If they match, create new view data on the server and associate the newly created view data with the current user; otherwise, terminate the view copying request.
[0027] To address the aforementioned technical problems, this application also provides a page view processing system for React applications, comprising:
[0028] The data acquisition module is used to respond to the page view processing request of the React application, obtain server-side view data according to the view ID in the page view processing request, and obtain the local cached view data corresponding to the view ID from the IndexedDB database connected to the React application.
[0029] The judgment module is used to read the target field information of the local cached view data and determine whether the local cached view data has been updated based on the target field information;
[0030] The snapshot creation module is used to merge the server-side view data and the local cached view data and create snapshot data when the local cached view data is updated, and to create the snapshot data based on the server-side view data when the local cached view data is not updated.
[0031] The view processing module is used to update the snapshot data to the Redux data node and the local cached view data, update the state of the React application components based on the updated Redux data node, and render the page view based on the updated component state.
[0032] Furthermore, when merging the server-side view data and the local cached view data, the snapshot creation module is specifically used for:
[0033] Identify multiple data items to be merged, and determine whether the data items are target data items;
[0034] If it is a target data item, then determine whether the target data item exists in the local cache view data. If it exists, then retrieve the corresponding data from the local cache view data; otherwise, retrieve the corresponding data from the server-side view data.
[0035] If it is not the target data item, the corresponding data is directly obtained from the server-side view data;
[0036] The data of each data item obtained from the local cache view data and the server-side view data will be merged.
[0037] To address the aforementioned technical problems, this application also provides a computer device, including a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the page view processing method for a React application as described above.
[0038] To address the aforementioned technical problems, this application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the page view processing method for a React application as described above.
[0039] Compared with the prior art, this application has the following main advantages:
[0040] This application uses IndexedDB as a local database for React applications, which can improve data read and write speed and make view processing more responsive. At the same time, with React as the front-end framework, Redux is used to manage the state of each component of the React application, which is easy to extend and maintain. Furthermore, using IndexedDB as a local database can ensure the security and stability of view data. Attached Figure Description
[0041] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0042] Figure 1 This is an exemplary system architecture diagram to which this application can be applied;
[0043] Figure 2 This is a flowchart of an embodiment of the page view processing method for a React application according to this application;
[0044] Figure 3 This is a schematic diagram of the structure of an embodiment of the page view processing system for a React application according to this application;
[0045] Figure 4 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation
[0046] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.
[0047] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.
[0048] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.
[0049] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 serves as the medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.
[0050] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various client applications can be installed on terminal devices 101, 102, and 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, and social media platforms. These applications can be developed based on React and can be accessed through a browser.
[0051] Terminal devices 101, 102, and 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers. In the following embodiments, terminal devices 101, 102, and 103 are mainly used to provide an entry point for React applications for users to operate the view and receive view data returned by server 105.
[0052] Server 105 can be a server that provides various services, such as the server that provides server-side view data as described below.
[0053] It should be noted that the page view processing method for React applications provided in this application embodiment is generally executed by terminal devices 101, 102, and 103. Correspondingly, the page view processing system for React applications is generally set in terminal devices 101, 102, and 103.
[0054] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.
[0055] Continue to refer to Figure 2 A flowchart illustrating an embodiment of a method for processing page views in a React application according to this application is shown. The method for processing page views in a React application includes the following steps S201 to S205:
[0056] Step S201: In response to the page view processing request of the React application, obtain server-side view data according to the view ID in the page view processing request, and obtain the local cached view data corresponding to the view ID from the IndexedDB database connected to the React application.
[0057] In this embodiment, the React application is an application built with React as the front-end framework. It loads the page view through a browser and provides a user interface.
[0058] Furthermore, taking the loading of a page view through a browser as an example, during the initialization of a React application page, a page view processing request is initiated. This request includes the view ID of the view to be processed. By communicating with the server using a RESTful API, server-side view data matching the view ID is obtained. The RESTful API is an architectural style for developing web services, enabling communication between different software systems. Simultaneously, dexie.js connects to the browser's IndexedDB database to retrieve locally cached view data corresponding to the view ID. IndexedDB is a native NoSQL database used by the browser, and dexie.js is an open-source JavaScript library that facilitates interaction with the IndexedDB database.
[0059] In other implementations, the server-side view data can be obtained by communicating with the server using the WebSocket API or JSONP. WebSocket is a protocol that enables full-duplex communication over a single TCP connection, making data exchange between the client and the server simpler. JSONP (JSON with Padding) is a "use case" of JSON that can be used for cross-domain data access in browsers.
[0060] Step S202: Read the target field information of the local cached view data, and determine whether the local cached view data has been updated based on the target field information. If the local cached view data has been updated, proceed to step S203; if the local cached view data has not been updated, proceed to step S204.
[0061] Specifically, the information of the isUpdate field in the local cached view data, i.e. the target field information, is read to determine whether the local cached view data corresponding to the current view ID has been updated. When the information of the isUpdate field is true, it means that the local cached view data has been updated, and the update comes from the user's view operation.
[0062] Step S203: Merge the server-side view data and the local cached view data and create snapshot data, and then execute step S205;
[0063] In this embodiment, when the locally cached view data is updated, it is necessary to merge the server-side view data and the locally cached view data, and then create groupFetchOptions snapshot data based on the merged view data. The generated groupFetchOptions snapshot data serves as the data basis for operating the view. Each data item to be merged has a priority in the data acquisition source during the merging process. Accordingly, the step of merging the server-side view data and the locally cached view data includes:
[0064] Multiple data items to be merged are identified, and it is determined whether the data item is a target data item. If it is a target data item, it is determined whether the target data item exists in the local cache view data. If it exists, the corresponding data is obtained from the local cache view data; otherwise, the corresponding data is obtained from the server-side view data. If it is not a target data item, the corresponding data is directly obtained from the server-side view data. The data of each data item obtained from the local cache view data and the server-side view data are merged.
[0065] Specifically, when the data items to be merged are layout, grouping, sorting, filtering, or table field setting data items, they are the target data items. Local cached view data is used first. When there is no local cached view data for these data items, server-side view data is used.
[0066] Step S204: Create the snapshot data based on the server-side view data, and then execute step S206; if the local cached view data is not updated, directly use the server-side view data to generate groupFetchOptions snapshot data, that is, the data source of all data items is the server.
[0067] Step S205: Update the snapshot data to the Redux data node and the local cached view data, update the state of the React application components based on the updated Redux data node, and render the page view based on the updated component state.
[0068] Updating the `groupFetchOptions` snapshot data to the Redux node triggers updates to the corresponding components and enables page rendering. Updating the `groupFetchOptions` snapshot data to the IndexedDB database updates the locally cached view data. Specifically, after the Redux data node is updated, it will trigger updates to the state of the React application's components, including at least:
[0069] Triggering an update to the layout component retrieves the latest layout data; triggering an update to the grouping component retrieves the latest groupBy data; triggering an update to the sorting component retrieves the latest sortings data; triggering an update to the filter component retrieves the latest conditions data; triggering an update to the table header settings component retrieves the latest tableFieldSetting data.
[0070] Then, based on the snapshot data from `groupFetchOptions`, a GraphQL request is sent to retrieve relevant data and render the page. Specifically, the updated layout data is retrieved to determine the style of the table or card to be rendered, the latest `groupBy` data is retrieved to render the grouping method data, the latest `sortings` data is retrieved to render the sorting method data, the latest `conditions` data is retrieved to render the filter condition data, and the latest `tableFieldSetting` data is retrieved to render the table header settings data, thus completing the view rendering.
[0071] In an optional implementation, after the step of rendering the page view, the method further includes:
[0072] Receive view operation instructions, update the field data of the corresponding component according to the view operation instructions; recreate snapshot data based on the updated field data, and update the newly created snapshot data to the Redux data node and the local cached view data to re-render the page view.
[0073] In an optional implementation, when a user manipulates the view in the browser interface, if any of the layout, grouping, sorting, conditions, or table field settings in the view are modified, the data of the corresponding field will be modified, and a groupFetchOptions snapshot data will be generated to update the local cached view data of the corresponding view ID in the Redux data node and IndexedDB database. The page view will then be re-rendered based on the updated data.
[0074] In an optional implementation, after re-rendering the page view, the method further includes:
[0075] The system receives a view configuration storage instruction and determines the current user's permissions based on the instruction. It then stores the current view data on the server according to the user's permissions, using a view type that matches the permissions. The view types include public view types and private view types. Upon receiving a view restore request after view adjustment, the system retrieves the selected view data from the server based on the view restore request and performs view restore.
[0076] When a user manipulates a view in the browser interface, the user can save or save the adjusted view. Specifically, when the user saves, the adjusted view data is saved to the server and overwrites the original server-side view data corresponding to the view ID. When the user saves the view, new view data is created and saved to the server. During the saving or saving process, different types of views can be stored based on the user's permissions. Ordinary users are assigned the permission to store private view data and can only operate on the storage or saving of private view data. Administrators or temporarily authorized ordinary users are assigned the permission to store both public and private view data, and can operate on the storage or saving of both types. This operation improves the flexibility of view operations while ensuring the security of view data.
[0077] For view data saved by the user or stored separately on the server, view restoration can be performed based on user actions. Specifically, when a user's view restoration request is received, the server-side view data will be retrieved and directly used to generate groupFetchOptions snapshot data. View restoration can then be performed based on the groupFetchOptions snapshot data. groupFetchOptions The snapshot data is updated to the Redux data nodes for view rendering. At the same time, the groupFetchOptions snapshot data can also be sent to the IndexedDB database to generate local cached view data so that the view configuration can be quickly restored when the user enters the page next time.
[0078] In an optional implementation, after receiving the view configuration storage instruction, the method further includes:
[0079] When multiple receive view configuration storage instructions are received, it is determined whether the multiple receive view configuration storage instructions are for the same view data. If so, the view data is overwritten and stored on the server based on the order in which the view configuration storage instructions are stored or updated.
[0080] Specifically, when synchronizing data under multi-device view operations, only administrators have the authority to create and save public views. When multiple administrators operate on the same view data, the overwrite operation is performed according to the order in which the view data is updated.
[0081] In an optional implementation, after the step of storing the current view data to the server in a view type that matches the permissions, the method further includes:
[0082] Upon receiving a view copy request, the server retrieves the view data to be copied and the current user's permissions based on the request. It then determines whether the views to be copied match the current user's permissions. If they match, a new view is created on the server, and the newly created view is associated with the current user; otherwise, the view copy request is terminated. This step also enables view permission management.
[0083] Compared with the prior art, the embodiments of this application have the following main advantages:
[0084] This application uses IndexedDB as a local database for React applications, which improves data read and write speed and makes view processing more responsive. Furthermore, while using React as the front-end framework, Redux is employed for state management of the React application's components, facilitating expansion and maintenance. Using IndexedDB as the local database also ensures the security and stability of view data. In addition, this embodiment provides various view management functions to meet different user needs.
[0085] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. This computer program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).
[0086] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.
[0087] Further reference Figure 3 As a response to the above Figure 2 The implementation of the method shown in this application provides an embodiment of a page view processing system for React applications. This system embodiment is similar to... Figure 2 Corresponding to the method embodiments shown, this system can be specifically applied to various servers.
[0088] like Figure 3 As shown, the React application page view processing system described in this embodiment includes: a data acquisition module 301, a judgment module 302, a snapshot creation module 303, and a view processing module 304. Wherein:
[0089] The data acquisition module 301 is used to respond to the page view processing request of the React application, obtain server-side view data according to the view ID in the page view processing request, and obtain the local cached view data corresponding to the view ID from the IndexedDB database connected to the React application.
[0090] The judgment module 302 is used to read the target field information of the local cached view data and determine whether the local cached view data has been updated based on the target field information.
[0091] The snapshot creation module 303 is used to merge the server-side view data and the local cache view data and create snapshot data when the local cache view data is updated, and to create the snapshot data based on the server-side view data when the local cache view data is not updated.
[0092] The view processing module 304 is used to update the snapshot data to the Redux data node and the local cached view data, update the state of the React application components based on the updated Redux data node, and render the page view based on the updated component state.
[0093] In an optional implementation, the snapshot creation module 303, when merging the server-side view data and the local cached view data, is specifically used for:
[0094] Multiple data items to be merged are identified, and it is determined whether the data item is a target data item. If it is a target data item, it is determined whether the target data item exists in the local cache view data. If it exists, the corresponding data is obtained from the local cache view data; otherwise, the corresponding data is obtained from the server-side view data. If it is not a target data item, the corresponding data is directly obtained from the server-side view data. The data of each data item obtained from the local cache view data and the server-side view data are merged.
[0095] In an optional implementation, the data acquisition module 301 is further configured to receive a view operation instruction after the view processing module 304 renders the page view, and update the field data of the corresponding component according to the view operation instruction; correspondingly, the snapshot creation module 303 is further configured to recreate the snapshot data based on the updated field data, and update the newly created snapshot data to the Redux data node and the local cached view data, so as to re-render the page view.
[0096] In an optional implementation, the view processing module 304 is further configured to:
[0097] The system receives a view configuration storage instruction and determines the current user's permissions based on the instruction. It then stores the current view data on the server according to the user's permissions, using a view type that matches the permissions. The view types include public view types and private view types. Upon receiving a view restore request after view adjustment, the system retrieves the selected view data from the server based on the view restore request and performs view restore.
[0098] In an optional embodiment, the view processing module 304, when receiving view configuration storage instructions, is further configured to: when receiving multiple view configuration storage instructions, determine whether the multiple view configuration storage instructions are for the same view data; if so, perform overwrite storage of view data on the server based on the order in which the view data is stored or updated by each view configuration storage instruction.
[0099] In an optional implementation, after storing the current view data to the server in a view type that matches the permissions, the view processing module 304 is further configured to: receive a view copy request; obtain the view data to be copied and the current user's permissions according to the view copy request; determine whether the view to be copied matches the current user's permissions; if they match, create new view data on the server and associate the newly created view data with the current user; otherwise, terminate the view copy request.
[0100] When the above modules perform related operations, the specific technical content involved in each operation can be referred to the relevant content in the above method embodiments, which will not be elaborated here.
[0101] Compared with the prior art, the embodiments of this application have the following main advantages:
[0102] This application uses IndexedDB as a local database for React applications, which improves data read and write speed and makes view processing more responsive. Furthermore, while using React as the front-end framework, Redux is employed for state management of the React application's components, facilitating expansion and maintenance. Using IndexedDB as the local database also ensures the security and stability of view data. In addition, this embodiment provides various view management functions to meet different user needs.
[0103] To address the aforementioned technical problems, this application also provides a computer device, including a memory and a processor. The memory stores a computer program, and when the processor executes the computer program, it implements the steps of the page view processing method for a React application as described above, and has corresponding technical effects.
[0104] Please refer to details. Figure 4 , Figure 4 This is a basic structural block diagram of the computer device in this embodiment. The computer device 4 includes a memory 41, a processor 42, and a network interface 43 that are interconnected via a system bus. It should be noted that only the computer device 4 with components 41-43 is shown in the figure; however, it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.
[0105] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.
[0106] The memory 41 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 41 may be an internal storage unit of the computer device 4, such as the hard disk or memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 4. Of course, the memory 41 may include both the internal storage unit and its external storage device of the computer device 4. In this embodiment, the memory 41 is typically used to store the operating system and various application software installed on the computer device 4, such as the program code of the page view processing method of the React application. In addition, the memory 41 can also be used to temporarily store various types of data that have been output or will be output.
[0107] In some embodiments, the processor 42 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is used to run program code stored in the memory 41 or process data, for example, to run program code for the page view processing method of the React application.
[0108] The network interface 43 may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 4 and other electronic devices.
[0109] To address the aforementioned technical problems, this application also provides a computer-readable storage medium storing a computer program that can be executed by at least one processor to perform the steps of the page view processing method for a React application as described above, and to achieve the corresponding technical effects.
[0110] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.
[0111] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.
Claims
1. A method for processing page views in a React application, characterized in that, The method includes: In response to a page view processing request from a React application, server-side view data is obtained based on the view ID in the page view processing request, and local cached view data corresponding to the view ID is obtained from the IndexedDB database connected to the React application. Read the target field information of the local cached view data, and determine whether the local cached view data has been updated based on the target field information, wherein the update comes from the user's view operation; If the local cached view data is updated, then the server-side view data and the local cached view data are merged and a snapshot data is created; If the local cached view data is not updated, then the snapshot data is created based on the server-side view data; The snapshot data is updated to the Redux data node and the local cached view data. Based on the updated Redux data node, the state of the React application's components is updated, and the page view is rendered based on the updated component state.
2. The page view processing method for React applications according to claim 1, characterized in that, The step of merging the server-side view data and the locally cached view data includes: Identify multiple data items to be merged, and determine whether the data items are target data items; If it is a target data item, then determine whether the target data item exists in the local cache view data. If it exists, then retrieve the corresponding data from the local cache view data; otherwise, retrieve the corresponding data from the server-side view data. If it is not the target data item, the corresponding data is directly obtained from the server-side view data; The data of each data item obtained from the local cache view data and the server-side view data will be merged.
3. The page view processing method for React applications according to claim 1 or 2, characterized in that, After the step of rendering the page view, the method further includes: Receive view operation instructions and update the field data of the corresponding component according to the view operation instructions; The snapshot data is recreated based on the updated field data, and the newly created snapshot data is updated to the Redux data nodes and the local cached view data to re-render the page view.
4. The page view processing method for React applications according to claim 3, characterized in that, After re-rendering the page view, the method further includes: Receive view configuration storage instructions and determine the current user's permissions based on the view configuration storage instructions; Based on the user's permissions, the current view data is stored on the server in a view type that matches the permissions. The view types include public view types and private view types. Upon receiving a view restoration request after view adjustment, the system retrieves the selected view data from the server based on the view restoration request to restore the view.
5. The page view processing method for React applications according to claim 4, characterized in that, After receiving the view configuration storage instruction, the method further includes: When multiple receive view configuration storage instructions are received, it is determined whether the multiple receive view configuration storage instructions are for the same view data. If so, the view data is overwritten and stored on the server based on the order in which the view configuration storage instructions are stored or updated.
6. The page view processing method for React applications according to claim 4, characterized in that, After the step of storing the current view data to the server in a view type that matches the permissions, the method further includes: Receive a view copy request, and obtain the view data to be copied and the current user's permissions based on the view copy request; Determine if the view to be copied matches the current user's permissions. If they match, create new view data on the server and associate the newly created view data with the current user; otherwise, terminate the view copying request.
7. A page view processing system for a React application, characterized in that, include: The data acquisition module is used to respond to the page view processing request of the React application, obtain server-side view data according to the view ID in the page view processing request, and obtain the local cached view data corresponding to the view ID from the IndexedDB database connected to the React application. The judgment module is used to read the target field information of the local cached view data and determine whether the local cached view data has been updated based on the target field information, wherein the update comes from the user's view operation. The snapshot creation module is used to merge the server-side view data and the local cached view data and create snapshot data when the local cached view data is updated, and to create the snapshot data based on the server-side view data when the local cached view data is not updated. The view processing module is used to update the snapshot data to the Redux data node and the local cached view data, update the state of the React application components based on the updated Redux data node, and render the page view based on the updated component state.
8. The page view processing system for React applications according to claim 7, characterized in that, When merging the server-side view data and the local cached view data, the snapshot creation module is specifically used for: Identify multiple data items to be merged, and determine whether the data items are target data items; If it is a target data item, then determine whether the target data item exists in the local cache view data. If it exists, then retrieve the corresponding data from the local cache view data; otherwise, retrieve the corresponding data from the server-side view data. If it is not the target data item, the corresponding data is directly obtained from the server-side view data; The data of each data item obtained from the local cache view data and the server-side view data will be merged.
9. A computer device, characterized in that, It includes a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the page view processing method of the React application as described in any one of claims 1 to 6.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the page view processing method for a React application as described in any one of claims 1 to 6.