React component optimization judgment method, device, equipment and storage medium

Abstract

The present invention relates to the field of R&D management and discloses a method for determining the optimization of a react component, comprising: obtaining a configuration file of a react project, traversing the configuration file to obtain each component and the corresponding component code; selecting one component at a time as a target component, and determining whether the target component's code contains a preset syntax; if not, the target component is a component that does not require optimization; if it does, determining a re-rendering scenario based on a rendering function in the target component's code; when re-rendering is unnecessary, the target component does not require optimization; when a parent component passes a value to a child component, determining whether the target component is optimized based on the value of the parent component; when variable control is performed, determining whether the target component is optimized based on the variable value. In addition, the present invention also relates to blockchain technology, and the configuration file can be stored in a node of the blockchain. The present invention also proposes a react component optimization determination device, an electronic device, and a storage medium. The present invention can improve the accuracy of component optimization.

Description

Technical Field

[0001] The present invention relates to the field of R&D management, and in particular to a react component optimization judgment method, device, equipment and storage medium. Background Art

[0002] Currently, in the front-end react framework, the performance optimization mechanism for pages is that when the parent component is updated, its child components will also be updated. For parent components with complex nested components, when the top-level parent component is updated, all child components and their child components will be updated and re-rendered. In this case, user clicks, slides, and other events will show obvious lag.

[0003] Existing re-rendering tools for the React framework use the SCU (ShouldComponentUpdate) method, which allows developers to specify which child components should not be updated when their parent component is updated. However, this method requires developers to sort through the components themselves and determine which child components can be excluded from updating. Furthermore, due to varying levels of understanding of the React framework and SCU among developers, scenarios where re-rendering is appropriate may be missed. Furthermore, when business logic code is updated, child components that previously did not require page rendering may need to be updated. However, developers often forget to clear the code that was previously excluded from updating, resulting in inaccurate component updates. Summary of the Invention

[0004] The present invention provides a react component optimization judgment method, device, equipment and storage medium, the main purpose of which is to solve the problem of low accuracy when updating components.

[0005] To achieve the above-mentioned purpose, the present invention provides a react component optimization judgment method, comprising:

[0006] Obtain a configuration file of a front-end react framework project, traverse the component files in the react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code;

[0007] Select one of the components as a target component one by one, and determine whether the component code of the target component contains a preset syntax;

[0008] When the component code of the target component does not include the preset syntax, setting the target component as a component that does not require SCU optimization;

[0009] When the preset syntax is included in the component code of the target component, determining a re-rendering scenario for each target component according to a rendering function in the component code of the target component;

[0010] When the re-rendering scenario does not require re-rendering, setting the target component to a sub-component that does not require SCU optimization;

[0011] When the re-rendering scene is a scene where a parent component passes a value to a child component, determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component;

[0012] When the re-rendering scenario is a variable control component update rendering, it is determined whether the target component needs to be SCU optimized according to the variable value.

[0013] Optionally, traversing component files in the react framework project according to the configuration file includes:

[0014] Determine the root directory file of the react framework project according to the configuration file;

[0015] Search for component files in the root directory to obtain all component files of the react framework project.

[0016] Optionally, determining whether the component code of the target component contains a preset syntax includes:

[0017] Determining the grammar keyword according to the preset grammar;

[0018] Searching the target component code using the grammatical keyword;

[0019] When the grammar keyword is retrieved, determining that the component code of the target component contains a preset grammar;

[0020] When the grammar keyword is not retrieved, it is determined that the component code of the target component does not contain the preset grammar.

[0021] Optionally, determining the re-rendering scenario of each target component according to a rendering function in a component code of the target component includes:

[0022] Obtain output data of the rendering function in the component code of the target component;

[0023] Finding whether the output data contains other components;

[0024] When the output data includes other components, searching whether the output data includes a preset tag;

[0025] When the output data does not contain other components, determining that the rendering scene of the target component is variable control component update rendering;

[0026] When the preset tag is not included, determining that the re-rendering scenario of the target component is unnecessary to re-render;

[0027] When the preset tag is included, determining the source of the preset tag;

[0028] When the source of the preset tag is the target component, determining that the re-rendering scenario of the target component is a variable control component update rendering;

[0029] When the source of the preset tag is other components, the re-rendering scenario of the target component is determined to be a parent component passing a value to a child component.

[0030] Optionally, setting the target component to a subcomponent that does not require SCU optimization includes:

[0031] Finding a call link of a rendering function in the target component code, and determining a code level of the rendering function according to the call link;

[0032] Add the preset SCU optimization method in the same code level.

[0033] Optionally, determining whether to perform SCU optimization on the target component according to the variable value transferred by the parent component includes:

[0034] Obtaining the initial variable value in the value-passing object in the target component code;

[0035] After the parent component of the target component performs SCU optimization, obtaining the current variable value of the transfer object;

[0036] Determine whether the initial variable value is consistent with the current variable value;

[0037] When the initial variable value is consistent with the current variable value, the target component does not need to be SCU optimized;

[0038] When the initial variable value is inconsistent with the current variable value, the target component needs to be SCU optimized.

[0039] Optionally, determining whether the target component needs to be SCU optimized according to the variable value includes:

[0040] Obtain the current variable value output by the state object in the target component code;

[0041] When the current variable value changes, determining that the target component needs to be SCU optimized;

[0042] When the current variable value does not change, it is determined that the target component does not need to be SCU optimized.

[0043] In order to solve the above problems, the present invention further provides a react component optimization judgment device, the device comprising:

[0044] A configuration file traversal module is used to obtain the configuration file of the front-end react framework project, traverse the component files in the react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code;

[0045] A preset grammar judgment module is used to select one of the components as a target component one by one and judge whether the component code of the target component contains the preset grammar;

[0046] Setting a first optimization module for a target component, configured to set the target component as a component that does not require SCU optimization when the component code of the target component does not contain the preset syntax;

[0047] a re-rendering scene determination module, configured to determine a re-rendering scene for each target component according to a rendering function in the component code of the target component when the preset syntax is contained in the component code of the target component;

[0048] Setting a second optimization module for the target component, for setting the target component as a subcomponent that does not require SCU optimization when the re-rendering scene is unnecessary to be re-rendered;

[0049] Setting a third optimization module for the target component, for determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component when the re-rendering scene is a scene where the parent component passes a value to the child component;

[0050] A fourth optimization module for the target component is set to determine whether the target component needs to be SCU optimized according to the variable value when the re-rendering scene is a variable control component update rendering.

[0051] In order to solve the above problem, the present invention further provides an electronic device, comprising:

[0052] at least one processor; and,

[0053] a memory communicatively connected to the at least one processor; wherein,

[0054] The memory stores a computer program that can be executed by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the above-mentioned react component optimization judgment method.

[0055] In order to solve the above problems, the present invention also provides a computer-readable storage medium, in which at least one computer program is stored. The at least one computer program is executed by a processor in an electronic device to implement the above-mentioned react component optimization judgment method.

[0056] The embodiment of the present invention ensures the comprehensiveness of component optimization judgment by obtaining each component and the corresponding component code in the front-end react project; then selects one by one as the target component, and judges whether the code of the target component contains the preset syntax; if not, the target component is a subcomponent that does not require SCU optimization, that is, the target component does not need to be updated when the parent component is updated, thereby improving the accuracy of component optimization; if it is included, the re-rendering scenario of the target component is determined according to the rendering function in the target component code, and according to the different re-rendering scenarios, it is judged whether the target component needs SCU optimization and whether the target component needs SCU optimization when it is a subcomponent, thereby achieving higher accuracy of component SCU optimization and avoiding unnecessary SCU optimization. Therefore, the react component optimization judgment method, device, electronic device and computer-readable storage medium proposed in the present invention can solve the problem of low accuracy when performing component SCU optimization. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] Figure 1 A flowchart of a react component optimization determination method provided by one embodiment of the present invention;

[0058] Figure 2 A schematic diagram of a process for searching for a preset grammar according to an embodiment of the present invention;

[0059] Figure 3 A schematic diagram of a process for optimizing the determination of parent component variable values provided by one embodiment of the present invention;

[0060] Figure 4 A functional module diagram of a react component optimization judgment device provided by an embodiment of the present invention;

[0061] Figure 5 A schematic structural diagram of an electronic device for implementing the react component optimization determination method provided by one embodiment of the present invention.

[0062] Figure 6 This is a functional module diagram of a react component optimization judgment device provided by one embodiment of the present invention.

[0063] Figure 7 It is a structural diagram of an electronic device for implementing a react component optimization judgment method provided by an embodiment of the present invention.

[0064] The purpose, features and advantages of the present invention will be further described with reference to the accompanying drawings and in conjunction with the embodiments. DETAILED DESCRIPTION

[0065] It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0066] The embodiment of the present application provides a method for determining the optimization of a react component. The execution subject of the method for determining the optimization of a react component includes but is not limited to at least one of the electronic devices such as a server and a terminal that can be configured to execute the method provided by the embodiment of the present application. In other words, the method for determining the optimization of a react component can be executed by software or hardware installed on a terminal device or a server device, and the software can be a blockchain platform. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, etc. The server can be an independent server, or it can be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0067] Reference Figure 1 FIG. 1 is a flow chart of a method for determining the optimization of a react component according to an embodiment of the present invention. In this embodiment, the method for determining the optimization of a react component includes the following steps S1-S7:

[0068] S1. Obtain a configuration file of a front-end react framework project, traverse the component files in the react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code;

[0069] In an embodiment of the present invention, the configuration file is config.js, which is a text file configured by the developer of the react framework project according to the project requirements. The configuration file includes the information required for the successful execution of the react framework project, such as component files, component codes, and the root directory file address information of the react framework project.

[0070] In one optional embodiment of the present invention, a computer statement with a crawling function (Java statement, Python statement) can be used to crawl the configuration file from a pre-built storage space for storing the configuration file, wherein the storage space includes but is not limited to a database, a blockchain node, etc.

[0071] In detail, traversing the component files in the react framework project according to the configuration file includes:

[0072] Determine the root directory file of the react framework project according to the configuration file;

[0073] Search for component files in the root directory to obtain all component files of the react framework project.

[0074] In an embodiment of the present invention, all component files in the react framework project are obtained according to the configuration file, each component file corresponds to a component, and the component code corresponding to each component is obtained through the component file, so that subsequent optimization judgment is more comprehensive and accurate.

[0075] S2. Select one of the components as the target component one by one, and determine whether the component code of the target component contains a preset syntax;

[0076] In the embodiment of the present invention, the preset syntax is a syntax for introducing other components into the component code of the target component, and the preset syntax is to implement the reference of other components through the import keyword.

[0077] For details, see Figure 2 As shown, the determination of whether the component code of the target component contains a preset syntax includes the following steps S21-S24:

[0078] S21, determining the grammar keyword according to the preset grammar;

[0079] S22, using the grammatical keyword to search in the target component code;

[0080] S23: When the grammar keyword is retrieved, determining whether the component code of the target component contains a preset grammar;

[0081] S24: When the grammar keyword is not retrieved, it is determined that the component code of the target component does not contain a preset grammar.

[0082] Specifically, the grammar keyword is a program structure that implements the preset grammar. The keyword can be used to determine whether the target component code contains the preset grammar, and further determine whether other components are introduced into the target component.

[0083] For example, in an embodiment of the present invention, the preset syntax is implemented as import component A from the file address of component A, and the component is referenced through the import keyword.

[0084] S3. When the component code of the target component does not contain the preset syntax, setting the target component as a component that does not require SCU optimization;

[0085] In detail, in an embodiment of the present invention, when the component code of the target component does not contain a preset syntax, that is, the target component does not contain references to other components, and the optimization of the target component is not necessary for the react framework project, the target component is set to a component that does not require SCU optimization.

[0086] S4. When the preset syntax is included in the component code of the target component, determining a re-rendering scenario for each target component according to a rendering function in the component code of the target component;

[0087] In an embodiment of the present invention, when the preset syntax is included in the target component code, that is, the target component contains references to other components, the target component can serve as a parent component and contain references to child components, which is necessary for SCU optimization of the target component.

[0088] In an embodiment of the present invention, the re-rendering scenario is the react framework rendering content of the target component itself, and whether the rendering change of the target component will affect the rendering change of its sub-components. The rendering change of the target component has different effects on its sub-components in different rendering scenarios.

[0089] For details, see Figure 3 As shown, determining the re-rendering scene of each target component according to the rendering function in the component code of the target component includes the following steps S41-S48:

[0090] S41. Obtain output data of a rendering function in the component code of the target component;

[0091] S42, searching whether the output data contains other components;

[0092] S43: When the output data includes other components, searching whether the output data includes a preset tag;

[0093] S44, when the output data does not contain other components, determining that the rendering scenario of the target component is variable control component update rendering;

[0094] S45: When the preset tag is not included, determining that the re-rendering scenario of the target component is unnecessary to re-render;

[0095] S46. When the preset tag is included, determining the source of the preset tag;

[0096] S47: When the source of the preset tag is the target component, determining that the re-rendering scenario of the target component is a variable control component update rendering;

[0097] S48: When the source of the preset tag is other components, determine that the re-rendering scenario of the target component is a parent component passing a value to a child component.

[0098] In an embodiment of the present invention, when the output data of the rendering function does not contain other components, it means that the target component does not contain sub-components, and the target component is a separate component. The re-rendering of the separate component only needs to judge the variable relationship of the target component itself, and further judge whether the target component needs SCU optimization based on the variable relationship.

[0099] Specifically, in an embodiment of the present invention, the preset label is a label of an interpolation expression in the output data of the rendering function and a label of a value that can change dynamically. When the preset label does not exist, it indicates that the rendering content of the target component is in a pure static text format and will not be affected by any dynamic changes of itself. However, when the target component is a child component, the re-rendering update of its parent component will cause the target component to be forced to update and optimize, and this forced update optimization is meaningless.

[0100] S5. When the re-rendering scene does not need to be re-rendered, set the target component to a sub-component that does not need to be SCU optimized;

[0101] In the embodiment of the present invention, the unnecessary re-rendering scene is unnecessary for updating the rendering of the target component, and the target component does not need to be optimized by SCU when it is a subcomponent.

[0102] In detail, the setting the target component to a subcomponent that does not require SCU optimization includes:

[0103] Finding a call link of a rendering function in the target component code, and determining a code level of the rendering function according to the call link;

[0104] Add the preset SCU optimization method in the same code level.

[0105] Specifically, the preset SCU optimization method in the embodiment of the present invention only includes return false in the writing of the SCU optimization method, indicating that no matter how the parent component of the target component changes, it will not cause the target component to be updated.

[0106] S6. When the re-rendering scene is a scene where a parent component passes a value to a child component, determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component;

[0107] In an embodiment of the present invention, the parent component passes values to the child component for re-rendering, indicating that the rendering content display of the target component will be affected by the variable value passed by the external parent component. Based on the content of the variable value passed by the parent component, it is determined whether the target component needs to be SCU optimized.

[0108] For details, see Figure 4 As shown, the step of determining whether to perform SCU optimization on the target component according to the variable value transferred by the parent component includes the following steps S61-S65:

[0109] S61, obtaining the initial variable value in the value-passing object in the target component code;

[0110] S62. After performing SCU optimization on the parent component of the target component, obtain the current variable value of the transfer object;

[0111] S63, determining whether the initial variable value is consistent with the current variable value;

[0112] S64: When the initial variable value is consistent with the current variable value, the target component does not need to be optimized by SCU;

[0113] S65: When the initial variable value is inconsistent with the current variable value, the target component needs to be optimized by SCU.

[0114] Specifically, in an embodiment of the present invention, the value-transmitting object is a props object, and the variable passed by the props object comes from the parent component, for example, this.props.list.variable1, which means that the variable value passed by the props object from the parent component is 1.

[0115] In an embodiment of the present invention, the variable value passed by the external parent component of the target component is further used to determine whether the target component needs to be SCU optimized. This will not cause forced SCU optimization of the child component due to the SCU optimization of the external parent component, thereby improving the accuracy of component optimization.

[0116] S7. When the re-rendering scenario is a variable control component update rendering, determine whether the target component needs to be SCU optimized according to the variable value.

[0117] In an embodiment of the present invention, the re-rendering scenario is when the variable controls the component update rendering, that is, the update rendering of the target component is determined by the variable value of the target component itself. When the variable value changes, the target component needs to be SCU optimized. When the variable value is the same, it is not necessary to re-update the rendering of the target component at this time, and no SCU optimization is required.

[0118] For details, see Figure 5 As shown, determining whether the target component needs to be SCU optimized according to the variable value includes the following steps S71-S73:

[0119] S71. Obtain the current variable value output by the state object in the target component code;

[0120] S72: When the current variable value changes, determining that the target component needs to be SCU optimized;

[0121] S73: When the current variable value does not change, determine that the target component does not need to be SCU optimized.

[0122] In detail, in an embodiment of the present invention, the state object is a state object, and it is determined whether the variable value output by the state object has changed, for example, this.state.variable 2, the current variable value is 2. When the variable value changes, it indicates that the rendering content of the component has also changed. At this time, SCU optimization of the target component is necessary.

[0123] It should be noted that, in an embodiment of the present invention, when the target component does not require SCU optimization, the subcomponents of the target component will not be SCU optimized, thereby increasing the speed of SCU optimization and further improving the accuracy of component optimization in the react framework project.

[0124] The embodiment of the present invention ensures the comprehensiveness of component optimization judgment by obtaining each component and the corresponding component code in the front-end react project; then selects one by one as the target component and determines whether the target component's code contains the preset syntax; if not, the target component is a subcomponent that does not require SCU optimization, that is, the target component does not need to be updated when the parent component is updated, thereby improving the accuracy of component optimization; if it is included, the re-rendering scenario of the target component is determined based on the rendering function in the target component code, and based on the different re-rendering scenarios, it is determined whether the target component needs SCU optimization and whether the target component needs SCU optimization when it is a subcomponent, thereby achieving higher accuracy of component SCU optimization and avoiding unnecessary SCU optimization. Therefore, the react component optimization judgment method proposed in the present invention can solve the problem of low accuracy when performing component SCU optimization.

[0125] like Figure 6 , which is a functional module diagram of a react component optimization judgment device provided by an embodiment of the present invention.

[0126] The react component optimization judgment device 100 of the present invention can be installed in an electronic device. According to the functions to be implemented, the react component optimization judgment device 100 may include a configuration file traversal module 101, a preset grammar judgment module 102, a target component first optimization module 103, a re-rendering scene determination module 104, a target component second optimization module 105, a target component third optimization module 106, and a target component fourth optimization module 107. The module of the present invention can also be referred to as a unit, which refers to a series of computer program segments that can be executed by an electronic device processor and can complete fixed functions, which are stored in the memory of the electronic device.

[0127] In this embodiment, the functions of each module / unit are as follows:

[0128] The configuration file traversal module 101 is used to obtain a configuration file of a front-end react framework project, traverse component files in the react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code;

[0129] The preset grammar determination module 102 is used to select one of the components as a target component one by one and determine whether the component code of the target component contains the preset grammar;

[0130] The target component setting first optimization module 103 is configured to set the target component as a component that does not require SCU optimization when the component code of the target component does not contain the preset syntax;

[0131] The re-rendering scene determination module 104 is configured to determine a re-rendering scene for each target component according to a rendering function in the component code of the target component when the preset syntax is included in the component code of the target component;

[0132] The second optimization module 105 for setting the target component is configured to set the target component as a subcomponent that does not require SCU optimization when the re-rendering scene does not require re-rendering;

[0133] The third target component optimization module 106 is configured to determine whether to perform SCU optimization on the target component according to the variable value passed by the parent component when the re-rendering scene is a scene where the parent component passes a value to the child component;

[0134] The fourth optimization module 107 for setting the target component is used to determine whether the target component needs to be SCU optimized according to the variable value when the re-rendering scene is a variable control component update rendering.

[0135] In detail, each module in the react component optimization judgment device 100 according to the embodiment of the present invention adopts the same Figures 1 to 3 The same technical means as the react component optimization judgment method described in , and can produce the same technical effects, will not be repeated here.

[0136] like Figure 7 , which is a structural diagram of an electronic device for implementing a react component optimization determination method provided by an embodiment of the present invention.

[0137] The electronic device 1 may include a processor 10, a memory 11, a communication bus 12, and a communication interface 13, and may also include a computer program stored in the memory 11 and executable on the processor 10, such as a react component optimization judgment program.

[0138] In some embodiments, the processor 10 may be composed of an integrated circuit, for example, a single packaged integrated circuit, or a plurality of packaged integrated circuits with the same or different functions, including one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and a combination of various control chips. The processor 10 is the control core (Control Unit) of the electronic device, connecting the various components of the entire electronic device using various interfaces and lines, and executing or executing programs or modules stored in the memory 11 (for example, executing a react component optimization judgment program, etc.), as well as calling data stored in the memory 11, to execute various functions of the electronic device and process data.

[0139] The memory 11 includes at least one type of readable storage medium, and the readable storage medium includes a flash memory, a mobile hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a magnetic memory, a disk, an optical disk, etc. In some embodiments, the memory 11 may be an internal storage unit of an electronic device, such as a mobile hard disk of the electronic device. In other embodiments, the memory 11 may also be an external storage device of an electronic device, such as a plug-in mobile hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the electronic device. Furthermore, the memory 11 may also include both an internal storage unit and an external storage device of the electronic device. The memory 11 can be used not only to store application software and various types of data installed in the electronic device, such as the code of the react component optimization judgment program, but also to temporarily store data that has been output or is to be output.

[0140] The communication bus 12 may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. The bus is configured to enable communication between the memory 11 and at least one processor 10, etc.

[0141] The communication interface 13 is used for communication between the above-mentioned electronic device and other devices, including a network interface and a user interface. Optionally, the network interface may include a wired interface and / or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.), which is generally used to establish a communication connection between the electronic device and other electronic devices. The user interface may be a display (Display), an input unit (such as a keyboard (Keyboard)), optionally, the user interface may also be a standard wired interface, a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, and an OLED (Organic Light-Emitting Diode, organic light-emitting diode) touch device, etc. Among them, the display may also be appropriately referred to as a display screen or a display unit, which is used to display information processed in the electronic device and to display a visual user interface.

[0142] The figure only shows an electronic device with components. Those skilled in the art will understand that the structure shown in the figure does not constitute a limitation on the electronic device, and may include fewer or more components than shown in the figure, or combine certain components, or arrange the components differently.

[0143] For example, although not shown, the electronic device may further include a power source (such as a battery) for powering various components. Preferably, the power source may be logically connected to the at least one processor 10 via a power management device, thereby implementing functions such as charge management, discharge management, and power consumption management through the power management device. The power source may further include any components such as one or more DC or AC power sources, a recharging device, a power failure detection circuit, a power converter or inverter, a power status indicator, etc. The electronic device may further include various sensors, Bluetooth modules, Wi-Fi modules, etc., which will not be described in detail here.

[0144] It should be understood that the embodiment is for illustration only and the scope of the patent application is not limited to this structure.

[0145] The react component optimization judgment program stored in the memory 11 of the electronic device 1 is a combination of multiple instructions. When running in the processor 10, it can achieve the following:

[0146] Obtain a configuration file of a front-end react framework project, traverse the component files in the react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code;

[0147] Select one of the components as a target component one by one, and determine whether the component code of the target component contains a preset syntax;

[0148] When the component code of the target component does not include the preset syntax, setting the target component as a component that does not require SCU optimization;

[0149] When the preset syntax is included in the component code of the target component, determining a re-rendering scenario for each target component according to a rendering function in the component code of the target component;

[0150] When the re-rendering scenario does not require re-rendering, setting the target component to a sub-component that does not require SCU optimization;

[0151] When the re-rendering scene is a scene where a parent component passes a value to a child component, determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component;

[0152] When the re-rendering scenario is a variable control component update rendering, it is determined whether the target component needs to be SCU optimized according to the variable value.

[0153] Specifically, the specific implementation method of the processor 10 for the above instructions can refer to the description of the relevant steps in the corresponding embodiment of the accompanying drawings, which will not be repeated here.

[0154] Furthermore, if the modules / units integrated into the electronic device 1 are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. The computer-readable storage medium can be volatile or non-volatile. For example, the computer-readable medium can include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a mobile hard drive, a magnetic disk, an optical disk, a computer memory, or a read-only memory (ROM).

[0155] The present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program. When the computer program is executed by a processor of an electronic device, the computer program can implement:

[0156] Obtain a configuration file of a front-end react framework project, traverse the component files in the react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code;

[0157] Select one of the components as a target component one by one, and determine whether the component code of the target component contains a preset syntax;

[0158] When the component code of the target component does not include the preset syntax, setting the target component as a component that does not require SCU optimization;

[0159] When the preset syntax is included in the component code of the target component, determining a re-rendering scenario for each target component according to a rendering function in the component code of the target component;

[0160] When the re-rendering scenario does not require re-rendering, setting the target component to a sub-component that does not require SCU optimization;

[0161] When the re-rendering scene is a scene where a parent component passes a value to a child component, determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component;

[0162] When the re-rendering scenario is a variable control component update rendering, it is determined whether the target component needs to be SCU optimized according to the variable value.

[0163] In the several embodiments provided by the present invention, it should be understood that the disclosed devices, apparatuses, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the module division is merely a logical function division, and other division methods may be used in actual implementation.

[0164] The modules described as separate components may or may not be physically separate, and the components shown as modules may or may not be physical units, that is, they may be located in one place or distributed across multiple network elements. Some or all of the modules may be selected to achieve the purpose of the solution of this embodiment according to actual needs.

[0165] In addition, the functional modules in various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or hardware plus software functional modules.

[0166] It will be apparent to those skilled in the art that the present invention is not limited to the details of the exemplary embodiments described above, and that the present invention can be implemented in other specific forms without departing from the spirit or essential characteristics of the present invention.

[0167] Therefore, the embodiments should be considered in all respects as illustrative and non-restrictive, and the scope of the invention is defined by the appended claims rather than the foregoing description, and all changes that come within the meaning and range of equivalents of the claims are intended to be embraced therein. Any reference to a figure in a claim should not be construed as limiting the claim to which it relates.

[0168] Blockchain, as used in this article, refers to a novel application model for computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Blockchain is essentially a decentralized database, a series of data blocks generated using cryptographic methods. Each block contains information about a batch of online transactions, used to verify the validity of this information (to prevent counterfeiting) and generate the next block. Blockchain can include the underlying blockchain platform, the platform product service layer, and the application service layer.

[0169] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Artificial Intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to achieve optimal results.

[0170] Furthermore, it is clear that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural. Multiple units or devices recited in a system claim may also be implemented by a single unit or device through software or hardware. Terms such as "first" and "second" are used to indicate names and do not imply any particular order.

[0171] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not limiting. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention.

Claims

1. A react component optimization judgment method, characterized in that: The method comprises: Obtain a configuration file of the front-end react framework project, traverse the component files in the front-end react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code; Select one of the components as a target component one by one, and determine whether the component code of the target component contains a preset syntax; When the component code of the target component does not include the preset syntax, setting the target component as a component that does not require SCU optimization; When the preset syntax is included in the component code of the target component, determining a re-rendering scenario for each target component according to a rendering function in the component code of the target component; When the re-rendering scenario does not require re-rendering, setting the target component to a sub-component that does not require SCU optimization; When the re-rendering scene is a scene where a parent component passes a value to a child component, determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component; When the re-rendering scenario is a variable control component update rendering, determining whether the target component needs to be SCU optimized according to the variable value; The step of setting the target component as a subcomponent that does not require SCU optimization includes: searching for a call link of a rendering function in the component code of the target component, determining a code level of the rendering function according to the call link; and adding a preset SCU optimization method in the same code level. The determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component includes: obtaining the initial variable value in the value-passing object in the component code of the target component; obtaining the current variable value of the value-passing object after the parent component of the target component performs SCU optimization; judging whether the initial variable value is consistent with the current variable value; when the initial variable value is consistent with the current variable value, the target component does not need to perform SCU optimization; when the initial variable value is inconsistent with the current variable value, the target component needs to perform SCU optimization; Determining whether the target component needs to be SCU optimized based on the variable value includes: obtaining the current variable value output by the state object in the component code of the target component; when the current variable value changes, determining that the target component needs to be SCU optimized; when the current variable value does not change, determining that the target component does not need to be SCU optimized.

2. The react component optimization judgment method according to claim 1, wherein: The traversing component files in the front-end react framework project according to the configuration file includes: Determine the root directory file of the front-end react framework project according to the configuration file; Search for component files under the root directory file to obtain all component files of the front-end react framework project.

3. The react component optimization judgment method according to claim 1, wherein: The determining whether the component code of the target component contains a preset syntax includes: Determining grammatical keywords according to the preset grammar; Searching the component code of the target component using the grammatical keyword; When the grammar keyword is retrieved, determining that the component code of the target component contains a preset grammar; When the grammar keyword is not retrieved, it is determined that the component code of the target component does not contain the preset grammar.

4. The react component optimization judgment method according to claim 1, wherein: The determining the re-rendering scenario of each target component according to the rendering function in the component code of the target component includes: Obtain output data of the rendering function in the component code of the target component; Finding whether the output data contains other components; When the output data includes other components, searching whether the output data includes a preset tag; When the output data does not contain other components, determining that the rendering scene of the target component is variable control component update rendering; When the preset tag is not included, determining that the re-rendering scenario of the target component is unnecessary to re-render; When the preset tag is included, determining the source of the preset tag; When the source of the preset tag is the target component, determining that the re-rendering scenario of the target component is a variable control component update rendering; When the source of the preset tag is other components, the re-rendering scenario of the target component is determined to be a parent component passing a value to a child component.

5. A react component optimization judgment device, used to implement the react component optimization judgment method according to any one of claims 1 to 4, characterized in that: The device comprises: A configuration file traversal module is used to obtain a configuration file of a front-end react framework project, traverse the component files in the front-end react framework project according to the configuration file, and obtain each component in the front-end react framework project and the corresponding component code; A preset grammar judgment module is used to select one of the components as a target component one by one and judge whether the component code of the target component contains the preset grammar; Setting a first optimization module for a target component, configured to set the target component as a component that does not require SCU optimization when the component code of the target component does not contain the preset syntax; a re-rendering scene determination module, configured to determine a re-rendering scene for each target component according to a rendering function in the component code of the target component when the preset syntax is contained in the component code of the target component; Setting a second optimization module for the target component, for setting the target component as a subcomponent that does not require SCU optimization when the re-rendering scene is unnecessary to be re-rendered; Setting a third optimization module for the target component, for determining whether to perform SCU optimization on the target component according to the variable value passed by the parent component when the re-rendering scene is a scene where the parent component passes a value to the child component; A fourth optimization module for the target component is set to determine whether the target component needs to be SCU optimized according to the variable value when the re-rendering scene is a variable control component update rendering.

6. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the react component optimization judgment method according to any one of claims 1 to 4.

7. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the react component optimization judgment method according to any one of claims 1 to 4 is implemented.

Images