React-based long form performance optimization scheme

Abstract

The invention relates to a React-based long form performance optimization scheme, and relates to the technical field of lazy loading, a set of long forms is created, the purpose and the structure of the long forms are clarified so as to collect information filled by a user, the long forms are divided into a plurality of content blocks according to rows, and in the implementation process, independent React components are created for each form item so as to improve the performance of the long forms. The method comprises the following steps of: setting a fixed height for divided content blocks, ensuring that page layout is not influenced in a loading process, monitoring the content blocks by using an API (Application Program Interface), triggering an event of loading the content blocks when detecting that the content blocks enter a visual area, and setting a callback function of an observer for updating a loading state of the content blocks so as to ensure that the content blocks enter the visual area; the loading state of each content block is maintained, rendering is carried out when the content blocks enter a visible area, performance is optimized, the content blocks are loaded and rendered only when the content blocks are visible, initial rendering overhead is reduced, and performance and user experience are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of lazy loading, and more specifically, to a long form performance optimization solution based on React. Background Art

[0002] With the rapid development of Internet technology and the deepening of enterprise digital transformation, more and more business activities are moving online. Modern business not only relies on data-driven decision-making and management, but also needs to meet the increasingly diverse and personalized needs of users. In this context, forms have been widely used as an important tool for obtaining user information. However, with the continuous iteration of business and the accumulation of information needs, the complexity and volume of forms have also increased, especially the emergence of long forms, which has brought significant challenges to user experience.

[0003] In terms of performance optimization, the traditional method is usually to simplify the form content to reduce the size of the form. However, this approach often leads to incomplete or inaccurate information collection, which in turn affects business decisions and user service quality. Therefore, it is necessary to design an optimization solution that balances performance and information integrity. The long form performance optimization solution based on React came into being. It not only relies on the componentization characteristics of React, but also uses its efficient virtual DOM update mechanism to implement dynamic loading, lazy loading, step-by-step submission and other technical means, thereby effectively improving the user's filling experience. Summary of the invention

[0004] The present invention aims at the technical problems existing in the prior art and provides a long form performance optimization solution based on React to solve the problems raised in the above background technology.

[0005] The technical solution of the present invention to solve the above technical problem is as follows: a long form performance optimization solution based on React, specifically comprising the following steps:

[0006] Step 101: Create a long form to collect information filled in by users, divide the long form into multiple content blocks by row, and create a React component for each form item to set a fixed height for the divided content blocks;

[0007] Step 102: Use the API to monitor the content block. When it is detected that the content block enters the visible area, an event for loading the content block is triggered, and the observer's callback function is set to update the loading status of the corresponding content block.

[0008] Step 103: Maintain the loading status of each content block, and render the content block when it enters the visible area to optimize performance.

[0009] In a preferred embodiment, in step 101, a set of long forms is created to collect information filled in by users, the long form is divided into multiple content blocks by row, and a React component is created for each form item to set a fixed height for the divided content blocks. The specific steps are as follows:

[0010] Step A1, divide the content into blocks: collect the information filled in by the user, list all the input items and their corresponding labels, divide the long form into multiple content blocks according to logical rows, and each block contains several related form items to improve the convenience of user filling;

[0011] Step A2, componentization: Create independent React components for each content block and its contained input items to ensure the reusability and maintainability of the components, and set a fixed height for each content block to ensure that the overall layout of the page is not affected during the loading process.

[0012] In a preferred embodiment, in step 102, an API is used to monitor the content block. When it is detected that the content block enters the visible area, an event for loading the content block is triggered, and a callback function of the observer is set to update the loading status of the corresponding content block. The specific steps are as follows:

[0013] Step B1, create an observer instance: use the API to monitor the visibility of the content block, initialize an observer instance to monitor when each content block enters the visible area;

[0014] Step B2, configure callback function: set the callback function of the observer. When the content block enters the visible area, the function will be triggered to load the content. Register each content block with the observer to monitor its visibility status.

[0015] In a preferred embodiment, in step 103, the loading status of each content block is maintained, and when the content block enters the visible area, it is rendered to optimize performance. The specific steps are as follows:

[0016] Step C1, update loading status: set a loading status for each content block to record whether the block is currently loaded. In the previously set observer callback function, update the loading status of the corresponding content block. When the content block enters the visible area, change its status to "loaded";

[0017] Step C2, trigger rendering: according to the loading status, control the rendering of the content block. When the status is "loaded", actually render the content. By loading and rendering the content block only when it is visible, the initial rendering overhead is reduced, and the performance and user experience are improved.

[0018] Step C3, lazy loading implementation: maintain the visibility status of each content block, and update the status when the block enters the visible area, determine whether to render the specific form item content according to the status, and keep the invisible content block in the "unloaded" state to achieve the lazy loading effect. The lazy loading is one of the common technical means in the performance optimization solution of the Web front-end field. The main principle is to delay the loading of resources on the page, and only load them when the user needs to access them, rather than loading all resources at once;

[0019] Among them, in step C3, the specific steps for implementing lazy loading include: maintaining an indicator in the component state, initially set to false, and when the callback function of the content block is greater than 0, updating the state of the content block to true, triggering the rendering of the actual content, and displaying a "loading" indication for unloaded content blocks to let the user know that the content is loading.

[0020] The beneficial effects of the present invention are as follows: a set of long forms is created, and its purpose and structure are clarified so as to collect information filled in by users; the long form is divided into multiple content blocks by row; in the implementation process, an independent React component is created for each form item, which is used to set a fixed height for the divided content blocks to ensure that the page layout will not be affected during the loading process; an API is used to monitor the content blocks; when it is detected that the content enters the visible area, an event for loading the content of the block is triggered, and an observer's callback function is set to update the loading status of the content block; content is dynamically loaded according to the user's scrolling behavior, so that the long form is more interactive in user experience, which helps to improve the user's filling efficiency; the loading status of each content block is maintained, which helps to ensure the validity and accuracy of the data; when the content block enters the visible area, it is rendered to optimize performance; by loading and rendering the content block only when it is visible, the initial rendering overhead can be reduced, and the performance degradation caused by loading a large number of components is reduced, so that the long form can efficiently collect user information, improve the user experience, and help to increase user participation and satisfaction. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 The present invention is a flow chart of the method. DETAILED DESCRIPTION

[0022] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0023] In the description of this application, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of this application, "plurality" means two or more, unless otherwise clearly and specifically defined.

[0024] In the description of the present application, the term "for example" is used to mean "used as an example, illustration or description". Any embodiment described as "for example" in the present application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is given to enable any technician in the field to implement and use the present invention. In the following description, details are listed for the purpose of explanation. It should be understood that a person of ordinary skill in the art can recognize that the present invention can be implemented without using these specific details. In other examples, well-known structures and processes will not be elaborated in detail to avoid unnecessary details to obscure the description of the present invention. Therefore, the present invention is not intended to be limited to the embodiments shown, but is consistent with the widest scope consistent with the principles and features disclosed in the present application.

[0025] Example 1

[0026] This embodiment provides Figure 1 The following is a long form performance optimization solution based on React, which specifically includes the following steps:

[0027] Step 101: Create a long form to collect information filled in by users, divide the long form into multiple content blocks by row, and create a React component for each form item to set a fixed height for the divided content blocks;

[0028] Step 102: Use the API to monitor the content block. When it is detected that the content block enters the visible area, an event for loading the content block is triggered, and the observer's callback function is set to update the loading status of the corresponding content block.

[0029] Step 103: Maintain the loading status of each content block, and render the content block when it enters the visible area to optimize performance.

[0030] Preferably, in step 101, a set of long forms is created to collect information filled in by users, the long form is divided into multiple content blocks by row, and a React component is created for each form item to set a fixed height for the divided content blocks. The specific steps are as follows:

[0031] Step A1: Divide content blocks: Collect the information entered by the user, list all the input items and their corresponding labels, divide the long form into multiple content blocks according to logical lines, and each block contains several related form items to improve the convenience of user filling out. Ensure that there is a clear visual separation between each block, enhance the readability of the information, and make it easier for users to understand the purpose of each part;

[0032] Step A2, componentization: Create independent React components for each content block and its contained input items to ensure the reusability and maintainability of the components, and set a fixed height for each content block to help improve the reusability and maintainability of the code to ensure that the overall layout of the page is not affected during the loading process.

[0033] Preferably, in step 102, an API is used to monitor the content block. When entering the visible area is detected, an event for loading the content of the block is triggered, and a callback function of the observer is set to update the loading status of the corresponding content block, which can reduce the page waiting time and make the use experience of the entire form smoother. The visible area refers to the part of the page that can be seen on the user's screen. The specific steps are as follows:

[0034] Step B1, create an observer instance: use the API to monitor the visibility of the content block, initialize an observer instance to monitor when each content block enters the visible area;

[0035] Step B2, configure callback function: Set the observer's callback function. When the content block enters the visible area, the function will be triggered to load the content. Register each content block with the observer to monitor its visibility status. By monitoring the visible area and using the callback function, the loading status of each block can be effectively managed.

[0036] Preferably, in step 103, the loading status of each content block is maintained, and when the content block enters the visible area, it is rendered to optimize performance, reduce the inconvenience of the user when filling in the form, and avoid input errors caused by interference from other content. The specific steps are as follows:

[0037] Step C1, update loading status: set a loading status for each content block to record whether the block is currently loaded. In the previously set observer callback function, update the loading status of the corresponding content block. When the content block enters the visible area, change its status to "loaded";

[0038] Step C2, trigger rendering: according to the loading status, control the rendering of the content block. When the status is "loaded", actually render the content. By loading and rendering the content block only when it is visible, the initial rendering overhead is reduced, and the performance and user experience are improved.

[0039] Step C3, lazy loading implementation: maintain the visibility status of each content block, and update the status when the block enters the visible area, determine whether to render the specific form item content according to the status, and keep the invisible content block in the "unloaded" state to achieve the lazy loading effect. The lazy loading is one of the common technical means in the performance optimization solution of the Web front-end field. The main principle is to delay the loading of resources on the page, and only load them when the user needs to access them, rather than loading all resources at once;

[0040] Among them, in step C3, the specific steps for implementing lazy loading include: maintaining an indicator in the component state, initially set to false, and when the callback function of the content block is greater than 0, updating the state of the content block to true, triggering the rendering of the actual content, and displaying a "loading" indication for unloaded content blocks to let the user know that the content is loading.

[0041] Example 2

[0042] This embodiment provides Figure 1 The following is a long form performance optimization solution based on React, which specifically includes the following steps:

[0043] Step 101: Create a long form to collect information filled in by users, divide the long form into multiple content blocks by row, and create a React component for each form item to set a fixed height for the divided content blocks;

[0044] Furthermore, in step 101, a long form is created to collect information filled in by the user, the long form is divided into multiple content blocks by row, and a React component is created for each form item to set a fixed height for the divided content blocks. The specific steps are as follows:

[0045] Step A1, divide the content into blocks: collect the information filled in by the user, list all the input items and their corresponding labels, divide the long form into multiple content blocks according to logical rows, and each block contains several related form items to improve the convenience of user filling;

[0046] Step A2, componentization: Create independent React components for each content block and its contained input items to ensure the reusability and maintainability of the components, and set a fixed height for each content block to ensure that the overall layout of the page is not affected during the loading process.

[0047] Step 102: Use the API to monitor the content block. When it is detected that the content block enters the visible area, an event for loading the content block is triggered, and the observer's callback function is set to update the loading status of the corresponding content block.

[0048] Furthermore, in step 102, the API is used to monitor the content block. When it is detected that the content block enters the visible area, an event of loading the content block is triggered, and the observer's callback function is set to update the loading status of the corresponding content block. The visible area refers to the part of the page that can be seen on the user's screen. The specific steps are as follows:

[0049] Step B1, create an observer instance: use the API to monitor the visibility of the content block, initialize an observer instance to monitor when each content block enters the visible area;

[0050] Step B2, configure callback function: set the callback function of the observer. When the content block enters the visible area, the function will be triggered to load the content. Register each content block with the observer to monitor its visibility status.

[0051] Step 103: Maintain the loading status of each content block, and render the content block when it enters the visible area to optimize performance;

[0052] Furthermore, in step 103, the loading status of each content block is maintained, and when the content block enters the visible area, it is rendered to optimize performance. The specific steps are as follows:

[0053] Step C1, update loading status: set a loading status for each content block to record whether the block is currently loaded. In the previously set observer callback function, update the loading status of the corresponding content block. When the content block enters the visible area, change its status to "loaded";

[0054] Step C2, trigger rendering: according to the loading status, control the rendering of the content block. When the status is "loaded", actually render the content. By loading and rendering the content block only when it is visible, the initial rendering overhead is reduced, and the performance and user experience are improved.

[0055] Step C3, lazy loading implementation: maintain the visibility status of each content block, and update the status when the block enters the visible area, determine whether to render the specific form item content according to the status, and keep the invisible content block in the "unloaded" state to achieve the lazy loading effect. The lazy loading is one of the common technical means in the performance optimization solution of the Web front-end field. The main principle is to delay the loading of resources on the page, and only load them when the user needs to access them, rather than loading all resources at once;

[0056] Among them, in step C3, the specific steps for implementing lazy loading include: maintaining an indicator in the component state, initially set to false, and when the callback function of the content block is greater than 0, updating the state of the content block to true, triggering the rendering of the actual content, and displaying a "loading" indication for unloaded content blocks to let the user know that the content is loading.

[0057] It should be noted that in the above embodiments, the description of each embodiment has its own emphasis, and for parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0058] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0059] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded computer, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0060] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0061] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0062] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0063] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A long form performance optimization solution based on React, characterized in that: The specific steps include: Step 101: Create a long form to collect information filled in by users, divide the long form into multiple content blocks by row, and create a React component for each form item to set a fixed height for the divided content blocks; Step 102: Use the API to monitor the content block. When it is detected that the content block enters the visible area, an event for loading the content block is triggered, and the observer's callback function is set to update the loading status of the corresponding content block. Step 103: Maintain the loading status of each content block, and render the content block when it enters the visible area to optimize performance.

2. According to the long form performance optimization solution based on React in claim 1, it is characterized by: In step 101, a long form is created to collect information filled in by the user, the long form is divided into multiple content blocks by row, and a React component is created for each form item to set a fixed height for the divided content blocks. The specific steps are as follows: Step A1, divide the content into blocks: collect the information filled in by the user, list all the input items and their corresponding labels, divide the long form into multiple content blocks according to logical rows, and each block contains several related form items to improve the convenience of user filling; Step A2, componentization: Create React components for each content block and its contained input items, and set a fixed height for each content block.

3. According to a long form performance optimization solution based on React according to claim 1, it is characterized in that: In step 102, the API is used to monitor the content block. When it is detected that the content block enters the visible area, an event for loading the content block is triggered, and the observer's callback function is set to update the loading status of the corresponding content block. The specific steps are as follows: Step B1, create an observer instance: use the API to monitor the visibility of the content block, initialize an observer instance to monitor when each content block enters the visible area; Step B2, configure callback function: set the callback function of the observer. When the content block enters the visible area, the function will be triggered to load the content. Register each content block with the observer to monitor its visibility status.

4. According to a long form performance optimization solution based on React according to claim 1, it is characterized in that: In step 103, the loading status of each content block is maintained, and when the content block enters the visible area, it is rendered to optimize the performance. The specific steps are as follows: Step C1, update loading status: set a loading status for each content block to record whether the block is currently loaded. In the previously set observer callback function, update the loading status of the corresponding content block. When the content block enters the visible area, change its status to "loaded"; Step C2, trigger rendering: control the rendering of the content block according to the loading status, and actually render the content when the status is "loaded"; Step C3, lazy loading implementation: maintain the visibility status of each content block, and update the status when the block enters the visible area, determine whether to render the specific form item content based on the status, and keep the invisible content block in the "unloaded" state to achieve the lazy loading effect.

5. According to the long form performance optimization solution based on React according to claim 4, it is characterized in that: In step C3, the specific steps for implementing lazy loading include: maintaining an indicator in the component state, initially set to false, and when the callback function of the content block is greater than 0, updating the state of the content block to true, triggering the rendering of the actual content, and displaying a "loading" indication for unloaded content blocks to let the user know that the content is loading.

Images