Component processing method and device and related product

Abstract

The invention discloses a component processing method and device and a related product, and the method comprises the steps: obtaining a target state identifier which indicates that a to-be-executed operation of a target component is a cache operation or a rendering operation, and outputting an operation parameter if the target state identifier indicates that the to-be-executed operation of the target component is the cache operation; if the target state identifier indicates that the to-be-executed operation of the target component is the rendering operation, rendering the target component; if the operation parameter obtained by the exception capture process is the exception operation parameter, suspending the target component and stopping rendering the target component; wherein the operation parameter is an abnormal operation parameter or a non-abnormal operation parameter; the abnormal operation parameter indicates that the operation result is in the process, and the non-abnormal operation parameter indicates that the operation result is successful or failed. Whether the to-be-executed operation of the target component is the cache operation or the rendering operation is reflected through the target state identifier, so that the influence on the function depending on the React level can be avoided, and the reliability of the rendering process is ensured.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a component processing method, apparatus and related products. Background Technology

[0002] In front-end business scenarios, it may be necessary to hide (or make) components disappear, and then make them appear or disappear under specific circumstances to achieve flexible display of components.

[0003] Currently, a custom React component caching mechanism is provided in related technologies. Its core idea is to intercept and control the rendering of specific components within the React rendering process to achieve component caching and reuse. However, the React component caching mechanism provided by these technologies, by finding a suitable time to interrupt and resume rendering in the React rendering process, may cause the "interruption" and "resumption" operations to affect functions that depend on the React layer, leading to difficult-to-diagnose errors in the rendering process. Summary of the Invention

[0004] This application provides a component processing device and related products, which aim to solve the problem of difficult-to-diagnose errors in the React rendering process caused by operations on React.

[0005] The first aspect of this application provides a component processing method, including:

[0006] Obtain the target state flag of the target component; the target state flag indicates the operation to be performed on the target component; the operation to be performed is either a caching operation or a rendering operation;

[0007] If the target status flag indicates that the operation to be performed on the target component is a cached operation, then the operation parameters are output; the operation parameters are either abnormal operation parameters or non-abnormal operation parameters; abnormal operation parameters indicate that the operation result is in progress, and non-abnormal operation parameters indicate that the operation result is success or failure; if the operation parameters obtained by the exception capture process are abnormal operation parameters, then the target component is suspended and the rendering of the target component is stopped.

[0008] If the target status flag indicates that the operation to be performed on the target component is a rendering operation, then the target component is rendered.

[0009] A second aspect of this application provides a component processing apparatus, comprising:

[0010] The acquisition module is used to acquire the target status identifier of the target component; the target status identifier indicates the operation to be performed on the target component; the operation to be performed is either a caching operation or a rendering operation;

[0011] The first processing module is used to output operation parameters if the target status flag indicates that the operation to be performed on the target component is a cache operation; the operation parameters are abnormal operation parameters or non-abnormal operation parameters; abnormal operation parameters indicate that the operation result is in progress, and non-abnormal operation parameters indicate that the operation result is success or failure; wherein, if the operation parameters obtained by the exception capture process are abnormal operation parameters, the target component is suspended and the rendering of the target component is stopped.

[0012] The second processing module is used to render the target component if the target status flag indicates that the operation to be performed on the target component is a rendering operation.

[0013] A third aspect of this application provides a component processing apparatus, the apparatus comprising a processor and a memory:

[0014] The memory is used to store program code and transmit the program code to the processor;

[0015] The processor is used to execute the steps of the component processing method provided in the first aspect according to the instructions in the program code.

[0016] A fourth aspect of this application provides a computer-readable storage medium for storing program code for performing the steps of the component processing method provided in the first aspect.

[0017] The fifth aspect of this application provides a computer program product, including a computer program or instructions that, when executed, implement the steps of the component processing method provided in the first aspect.

[0018] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0019] In this technical solution, a target status identifier is obtained to indicate whether the operation to be performed on the target component is a caching operation or a rendering operation. If the target status identifier indicates that the operation to be performed on the target component is a caching operation, the operation parameters are output; if the target status identifier indicates that the operation to be performed on the target component is a rendering operation, the target component is rendered; and if the operation parameters obtained by the exception handling process are abnormal operation parameters, the target component is suspended and rendering of the target component is stopped. The operation parameters can be either abnormal or non-abnormal operation parameters. Abnormal operation parameters indicate that the operation result is in progress, while non-abnormal operation parameters indicate that the operation result is success or failure. By using the target status identifier to reflect whether the operation to be performed on the target component is a caching operation or a rendering operation, no operation on React is required. This avoids affecting functions that depend on the React layer, ensuring the reliability of the React rendering process. Furthermore, by obtaining abnormal operation parameters through the exception handling process and suspending the target component corresponding to the abnormal operation parameters, errors are avoided when rendering the target component, improving the reliability of component processing. Attached Figure Description

[0020] Figure 1 A schematic diagram illustrating a CSS display / hiding method for related technologies;

[0021] Figure 2 A schematic diagram illustrating a React component caching mechanism provided for related technologies;

[0022] Figure 3 A schematic diagram of a component processing method provided in an embodiment of this application;

[0023] Figure 4 A flowchart illustrating a component processing method provided in an embodiment of this application;

[0024] Figure 5a A schematic diagram illustrating a non-keep-alive solution provided in an embodiment of this application;

[0025] Figure 5b A schematic diagram of a keep-alive scheme provided in an embodiment of this application;

[0026] Figure 6a A schematic diagram illustrating a component processing method provided in an embodiment of this application;

[0027] Figure 6b A schematic diagram illustrating another component processing method provided in an embodiment of this application;

[0028] Figure 7a A schematic diagram illustrating a page-level component processing flow provided in an embodiment of this application;

[0029] Figure 7b A schematic diagram illustrating a component-level component processing flow provided in an embodiment of this application;

[0030] Figure 8 This is a schematic diagram of the structure of a component processing device provided in an embodiment of this application;

[0031] Figure 9 This is a schematic diagram of the server structure in an embodiment of this application;

[0032] Figure 10 This is a schematic diagram of the structure of a terminal device in an embodiment of this application. Detailed Implementation

[0033] First, several terms that may be used in the embodiments of this application will be explained.

[0034] A front-end development framework is a set of tools or libraries used in front-end development to simplify and accelerate the development process. It provides a series of ready-made code and components, making it easy for developers to quickly build user interfaces and implement various functions.

[0035] JavaScript is a programming language commonly used in front-end development. It features dynamic typing, weak typing, and prototype-based characteristics, and supports multiple types built-in.

[0036] React (also known as React.is or ReactJs) is a free and open-source front-end JavaScript library for building user interfaces (UIs) based on user interface components. React aims to break down the user interface into small, independent, and reusable parts called "components." Each component manages its own state and rendering logic. By combining these small components, developers can build complex user interfaces. This component-based approach not only improves code maintainability but also promotes code reuse.

[0037] Routing refers to the mapping from a URL to a function, and different content is displayed depending on the route.

[0038] CSS (Cascading Style Sheets) is a computer language used to add styles (fonts, spacing, colors, etc.) to structured documents (such as HTML documents or XML applications), such as the style and layout of web pages.

[0039] `display` is a CSS property used to define the display type of a DOM element. When `display` is set to `none`, the DOM element is hidden; when `display` is set to `block`, the DOM element is displayed.

[0040] A view refers to the final screen displayed to the user.

[0041] The DOM (Document Object Model) is a data representation of the objects that make up the document's structure and content in the view.

[0042] A tree structure is a type of data structure in computers. This type of data is like a tree, starting from the root and branching out to the leaves.

[0043] An object is a JavaScript data type.

[0044] The React render tree refers to React storing information about all components that need to be rendered to the view in a large tree-structured object. It then reads the view representation described in this tree structure to draw and finally render it to the view.

[0045] The `keep-alive` component is a built-in component in Vue that keeps the state in memory during component transitions, preventing duplicate DOM rendering. When `keep-alive` wraps a dynamic component, it caches inactive component instances instead of destroying them. `keep-alive` can set the following props: `include` - a string or regular expression indicating that only components whose names match will be cached; `exclude` - a string or regular expression indicating that any component whose name matches will not be cached; and `max` - a number indicating the maximum number of component instances that can be cached.

[0046] The keep-alive component is used to retain the state of child components when switching between components. In other words, it keeps child components in memory during component transitions. For example, when a component is wrapped in keep-alive, its state is cached even if the parent component is destroyed or switched, instead of being destroyed and recreated. By caching components, keep-alive reduces component destruction and recreation, thereby improving application performance and responsiveness.

[0047] Boolean values ​​are primarily used to represent a state as either True or False.

[0048] In computer programming, a hook function is a special type of function that is executed automatically when a specific event or condition occurs, in order to change or enhance the behavior of a program, operating system, application, or other software component.

[0049] Research on the display and hiding of components revealed that in current front-end business scenarios, it may be necessary to hide (or make components disappear) and then make the components appear or disappear in specific situations to achieve flexible display of components.

[0050] One possible related technology is to rewrite the routing library (React-router) to handle component caching, display / hiding logic at the routing level, achieving page / route-level keep-alive. However, React-router, as a widely used routing library in React, is already quite mature, feature-rich, and has a rich API, capable of meeting most route management needs. Rewriting the routing library would require a significant development investment, including understanding the existing codebase, designing a new architecture, implementing new features (such as keep-alive and cache management), and testing. Furthermore, a rewritten routing library might become out of sync with commonly used routing schemes in related technologies, thus missing out on React-router updates and maintenance.

[0051] In another possible related technology, to avoid the problems of solution disconnect, large development workload, and difficulty in updating and maintaining caused by rewriting the routing library, a CSS display / hiding solution is also provided, combined with... Figure 1 As shown, by switching the display property value in CSS to none or block, the display and hiding of DOM nodes can be toggled, achieving an effect similar to keep-alive where components disappear and reappear without changing their state. For example... Figure 1 In the diagram, component A has a `display` value of `block`, while components B and C each have a `display` value of `none`. Therefore, component A is displayed, while components B and C are hidden. When `display` is set to `none`, the DOM elements (including the component's root DOM node) are hidden in the view, but this does not mean that components B or C are not rendered or loaded. Components B or C still exist in the DOM tree, and their internal logic may be executed; however, the rendering results of components B or C will not be drawn onto the view.

[0052] However, components hidden using CSS do not disappear from React's virtual DOM tree. React still calculates the hidden DOM tree every time the view is updated. When the number of hidden components increases, React's rendering performance suffers greatly, which can easily cause page lag. In addition, since DOM nodes actually exist in the client's DOM, although not being rendered will not affect DOM performance, they still exist in memory. This means that cached components exist in both the React virtual DOM and the browser's DOM tree, resulting in a large memory footprint and making the client's page prone to freezing.

[0053] To address the issue of significant memory consumption even after components are hidden, CSS-based component visibility solutions employ a custom React component caching mechanism. The core idea is to intercept and control the rendering of specific components within the React rendering process, enabling component caching and reuse. As an example, combined with... Figure 2 As shown, this includes the top-level wrapper component A (such as...). Figure 2 The diagram shows the keep-alive root component (A) and its local wrapper component (B). Component A, as the global or top-level wrapper component, is responsible for storing and managing cached component instances. Component A provides a caching mechanism, allowing the storage and retrieval of the component's virtual DOM or component instances. Component B is used to mark which child components need to be cached. Component B is also responsible for maintaining the pass-through of the React context, ensuring that child components can correctly receive data and state from the parent layer.

[0054] When React's rendering process reaches component B, component B will interrupt its normal rendering process and delegate the rendering of its child components to component A for processing (e.g., ...). Figure 2 The keep-alive root component shown executes the normal rendering process, renders its descendant components through the rendering function, then reads the cache and returns the cached result. If the read is successful, the child component is rendered.

[0055] In this process, component B does not directly render its child components, but instead passes the child components to component A for rendering and caching. After component A renders the child components, it caches the results (which may be a virtual DOM or a component instance) and returns them to component B for final rendering and display.

[0056] When a child component of component B is destroyed or hidden, a backup (such as a child component of component B) is stored in component A. Figure 2The mechanism (which notifies the parent component to generate a cache and update the cache repository if a cache read fails) allows for quick restoration and rendering of component B's child components when they need to be re-displayed. Therefore, React's component caching mechanism can significantly improve performance, especially in scenarios where the same components need to be frequently shown and hidden.

[0057] However, the React component caching mechanism requires interrupting the normal React rendering process and handling context connections manually, which may result in incomplete compatibility with subsequent React layer-related new features.

[0058] Furthermore, it impacts core React functionalities such as context, error boundaries, React.Suspense, React.lazy, module federation, and synthetic events. These functionalities are not compatible with React's component caching mechanism, resulting in their permanent absence and potentially leading to bugs (errors) that are difficult to troubleshoot.

[0059] Furthermore, this React component caching mechanism passes the components that need to be cached to the top-level component for rendering and caching in the underlying logic, and then passes them to the child components for display. This extra step makes the rendering process take longer than React's normal rendering process, which may have a certain impact on functions that strictly depend on the lifecycle order.

[0060] Furthermore, the implementation principle of React's component caching mechanism is contrary to the programming philosophy and development paradigm required by React. React's component caching mechanism truncates React's render tree, inserts custom logic into it, and then reconnects (restores) it. This reconnection action is a significant risk, potentially leading to contextual disconnection within React.

[0061] Furthermore, React's render tree is a top-down tree structure that relies on hierarchy to manage component context and state. React's component caching mechanism disrupts this hierarchy, making any current or future React features that depend on context hierarchy at risk of issues.

[0062] As can be seen from the relevant content, finding a suitable time to interrupt and resume rendering in the React rendering process may affect functions that depend on the React layer due to the "interruption" and "resumption" operations, which may lead to errors in the rendering process that are difficult to troubleshoot.

[0063] In view of the above problems, this application provides a component processing method, apparatus, and related products. In the technical solution provided in this application, a target status identifier is obtained indicating whether the operation to be performed on the target component is a caching operation or a rendering operation. If the target status identifier indicates that the operation to be performed on the target component is a caching operation, the operation parameters are output; if the target status identifier indicates that the operation to be performed on the target component is a rendering operation, the target component is rendered; and if the operation parameters obtained by the exception capture process are abnormal operation parameters, the target component is suspended and rendering of the target component is stopped; wherein the operation parameters are either abnormal operation parameters or non-abnormal operation parameters; abnormal operation parameters indicate that the operation result is in progress, and non-abnormal operation parameters indicate that the operation result is success or failure.

[0064] In this way, the target state identifier reflects whether the operation to be performed by the target component is a caching operation or a rendering operation, without needing to operate on React. This avoids affecting the functions that depend on the React layer, ensuring the reliability of the React rendering process. Furthermore, the exception handling process can obtain the exception operation parameters, thereby suspending the target component corresponding to the exception operation parameters, avoiding errors when rendering the target component, and improving the reliability of component processing.

[0065] Figure 3 An exemplary scenario architecture diagram of a component processing method is shown. Figure 3 It includes a server 301 and various types of terminal devices 302. Figure 3 The server shown can be a standalone physical server, a server cluster consisting of multiple physical servers, or a distributed system. Additionally, the server can also be a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. Figure 3 The terminal device 302 shown is a device with a display screen, including but not limited to mobile phones, tablets, computers, smart voice interaction devices, and vehicle terminals, but not limited to these. The terminal device and the server can be connected directly or indirectly through wired or wireless communication, and this application does not impose any restrictions.

[0066] The server 301 or terminal device 302 obtains the target status identifier of the target component. The target status identifier indicates the operation to be performed on the target component, which may be a caching operation or a rendering operation. For example, a target status identifier of true indicates a caching operation, and a target status identifier of false indicates a rendering operation.

[0067] If the target status flag indicates that the operation to be performed on the target component is a caching operation, then the server 301 or the terminal device 302 outputs the operation parameters. As an example, assuming that the target component A is a caching operation, then only the operation parameters corresponding to the target component A need to be output, and there is no need to perform a rendering operation on the target component A.

[0068] The operation parameters can be either abnormal or normal. Abnormal operation parameters indicate that the operation is in progress, while normal operation parameters indicate whether the operation is successful or failed. "In progress" refers to the state between the start and end of the operation, which can be represented as no result; while "success" or "failure" indicates the result after the operation has ended.

[0069] If the operation parameter obtained by the exception handling process is an abnormal operation parameter, the target component will be suspended and rendering of the target component will be stopped. It should be understood that when the operation parameter is an abnormal operation parameter, the target component can be considered an abnormal component. In this case, in order to avoid operational errors caused by caching or rendering operations on the abnormal component, it is necessary to suspend the abnormal component and stop rendering of the abnormal component to ensure the reliability of the rendering process.

[0070] If the target status flag indicates that the operation to be performed on the target component is a rendering operation, then the server 301 or the terminal device 302 renders the target component.

[0071] It should be understood that, in the embodiments of this application, the target state identifier reflects whether the operation to be performed by the target component is a caching operation or a rendering operation. There is no need to operate on React and its underlying logic. This can avoid affecting the functions that depend on the React layer, ensure the reliability of the React rendering process, and obtain the abnormal operation parameters through the exception capture process, thereby suspending the target component corresponding to the abnormal operation parameters, avoiding errors when rendering the target component, and improving the reliability of component processing.

[0072] In practice, the collection and processing of relevant data in this application should strictly comply with the requirements of relevant national laws and regulations, obtain the informed consent or separate consent of the subject of personal information, and carry out subsequent data use and processing within the scope of laws and regulations and the authorization of the personal information subject.

[0073] Figure 4 This is a flowchart illustrating a component processing method provided in an embodiment of this application. Figure 2 The component processing methods shown include:

[0074] S401: Obtain the target state identifier of the target component.

[0075] The target component refers to the component to which the operation is to be performed. This target component can be a page-level component or a component-level component. A page-level component refers to a component at the page level, such as a webpage in a browser or a details page in a mini-program. A component-level component refers to a component contained within a page or a component displayed in a partial way, such as a message in a webpage or a chat box on a mobile phone desktop. There is no limitation on the target component here.

[0076] In some possible implementations, the target component can be a component within the target plan rendering component; the target plan rendering component includes multiple components, which are divided according to hierarchy; the target plan rendering component is a plan rendering component within the keep-alive component, which includes multiple plan rendering components.

[0077] Keep-alive can wrap dynamic components and cache inactive component instances, avoiding the re-creation of component instances when the component is re-rendered, thereby improving performance. Therefore, in this implementation, components can be wrapped with keep-alive to form keep-alive components.

[0078] The keep-alive component can include multiple schedule render components. Schedule render components are those that support the construction, saving, and output (outputting) of operation parameters. They are primarily used to output operation parameters or components so that the exception handling process in React can retrieve abnormal operation parameters and enable React to render the target component. It should be noted that in some cases, there can be only one schedule render component; this is not a specific limitation.

[0079] It should be noted that, in combination Figure 5a and Figure 5b As shown, taking filling out a step-by-step form as an example, assume the form includes step 1 and step 2. Step 1 requires name, age, and email address, while step 2 requires address, education level, and place of origin. These two steps correspond to two components (let's call them component 1 and component 2). After filling out the form for step 1 (component 1), clicking the "next" button switches from component 1 to component 2 (component 1 is hidden, component 2 is displayed). When the user clicks the "prev" button to switch back from component 2 to component 1, because component 1 was destroyed and then rebuilt, the form content for step 1 corresponding to component 1 disappears (e.g., ...). Figure 5a(As shown). Therefore, to solve the problem of component content disappearance caused by the need to destroy and rebuild the component during the process of hiding and then showing it again, the embodiments of this application integrate keep-alive in the component rendering process. When component 1 is hidden, it is not destroyed, but cached in the keep-alive component. When component 1 needs to be shown again, it can be retrieved from the keep-alive component, so that the content of component 1 is not lost (e.g., Figure 5b As shown in the image, this improves the user experience.

[0080] It should be understood that the embodiments of this application can be implemented based on keep-alive. Due to the characteristics of keep-alive, when a component wrapped by keep-alive is unloaded and then remounted, the previously rendered component will be displayed directly without recompiling and initializing the relevant content. This skips the time consumed by compiling the component when mounting it, fundamentally reducing the component loading time and speeding up the webpage response. The content corresponding to the component can be saved when the component is hidden and displayed when it is needed, improving the user experience.

[0081] A planned rendering component can include multiple components, which can be divided hierarchically according to the tree structure of the DOM tree. For example, the DOM tree initially includes 3 components (A, B, and C), and then each of the 3 components has 3 associated components (component A corresponds to components a1, a2, and a3; component B corresponds to components b1, b2, and b3; and component C corresponds to components c1, c2, and c3). Component a1 can also include components a11, a12, a13, and a14, and so on. Other components can also continue to include their associated components, thus forming a tree structure. Further assuming that the components to be rendered include all components in the DOM tree, and that multiple components are divided according to the structure of the DOM tree, the first layer can include components A, B and C, the second layer can include components a1, a2, a3, b1, b2, b3, c1, c2 and c3, the third layer can include components a11, a12, a13 and a14, and so on, until all components are divided into different layers.

[0082] It's important to note that the component at the top level of the target component's hierarchy can be called its parent component, and the component at the top level of its parent component's hierarchy can be called its grandparent component. In other words, components at the top one or more levels above the target component's hierarchy are its ancestor components. Similarly, the component at the bottom level of the target component's hierarchy can be called its child component, and components at the bottom level of its child component's hierarchy can be called its descendant component. In other words, components at the bottom one or more levels below the target component's hierarchy are its descendant components.

[0083] The target state flag indicates the pending operation of the target component, which can be a caching operation or a rendering operation. A caching operation means that the target component does not need to be displayed or rendered, but only needs to be cached. A rendering operation means that the target component needs to be displayed or rendered. In one possible implementation, the target state flag can be a boolean value, or it can be any other flag that can indicate the pending operation of the target component; no specific limitation is made here.

[0084] It is understandable that the target component has two states: visible or hidden. Visible corresponds to the target component needing to perform a rendering operation, while hidden corresponds to the target component needing to perform a caching operation. The target state identifier can generally be represented by true or false. Therefore, in this embodiment, the true or false value of the target state identifier can be used to indicate whether the operation to be performed by the target component is a caching operation or a rendering operation, without needing to operate on React and its underlying logic. This avoids affecting functions that depend on the React layer and ensures the reliability of React's rendering process.

[0085] S402: If the target status flag indicates that the operation to be performed by the target component is a cache operation, then output the operation parameters.

[0086] The operation parameters can be either abnormal or normal. Abnormal operation parameters indicate that the operation result is in progress, while normal operation parameters indicate whether the operation result is success or failure. The operation result refers to the outcome of the operation performed by the target component. This operation can be some actions that the target component is about to perform, such as rendering, caching, etc.

[0087] If the exception handling process obtains an abnormal operation parameter, the target component will be suspended and rendering will be stopped. The exception handling process refers to the process used to capture abnormal operation parameters. This process can be a React process, and it can perform global exception parameter capture at the top level of the React component rendering tree so that the target component can be suspended and rendering stopped upon obtaining an abnormal operation parameter.

[0088] In some possible implementations, if the target component is suspended and rendering of the target component is stopped, the update operation parameters corresponding to the target component can be obtained through the exception handling process. If the update operation parameters are non-exception operation parameters, the suspension operation of the target component ends. If the update operation parameters are exception operation parameters, the target component is suspended and rendering of the target component is stopped. Here, the update operation parameters are the operation parameters obtained after the operation parameters.

[0089] It should be understood that when the target component returns to normal, the corresponding operation parameters will also change from abnormal operation parameters to normal operation parameters. At this time, the suspension of the target component can be stopped, and rendering or caching operations can continue to be performed on the target component. This avoids the target component from being continuously suspended and affecting the subsequent caching or rendering of the target component, thereby avoiding abnormal display of the target component and improving the reliability of component processing.

[0090] S403: If the target status flag indicates that the operation to be performed on the target component is a rendering operation, then render the target component.

[0091] It should be understood that if the target state flag indicates that the pending operation of the target component is a rendering operation, then the target component can be considered to need to be displayed. In this case, the target component can be rendered according to React's rendering process to display the view.

[0092] In this embodiment, the target state identifier reflects whether the operation to be executed by the target component is a caching operation or a rendering operation. That is, the upper-level behavior of this application only needs to reflect whether the operation to be executed by the target component is a caching operation or a rendering operation through a single target state identifier, without operating on React and its underlying logic. This avoids affecting the functions that depend on the React layer and ensures the reliability of the React rendering process. Furthermore, if the exception operation parameter captured by the exception handling process at the bottom layer of React meets the suspension condition, the target component corresponding to the exception operation parameter is suspended and rendering is stopped, avoiding errors when rendering the target component and improving the reliability of component processing. The component processing method provided in this application conforms to the programming thinking and design patterns of React, ensuring that the component will not cause additional rendering overhead during the suspension process, while avoiding affecting the functions that depend on the React layer, thus ensuring the high reliability and high performance of the React rendering process.

[0093] Based on the component processing method provided in the above embodiments, step S402 may include:

[0094] A1: If the target status identifier indicates that the operation to be performed by the target component is a cache operation, then obtain the historical cache type of the target component.

[0095] The history cache type indicates the cache type of the target component before the operation to be performed. The history cache type is either a cached component or a non-cached component. A cached component means that the target component was cached in the last operation, while a non-cached component means that the target component was not cached in the last operation. It should be understood that since the component may switch between shown and hidden states, and the component may not have been stored in advance, there may be no corresponding operation parameters. Therefore, when the operation to be performed is a cached operation, the cache type of the target component in the last operation is determined, and then the operation parameters are determined based on the cache type.

[0096] A2: If the historical cache type is a cache component, then output the operation parameters.

[0097] It should be understood that if the historical cache type is a cached component, it is assumed that the target component has already built the corresponding component with the operation parameters cached during the last operation, so the operation parameters corresponding to the target component can be output directly.

[0098] A3: If the historical cache type is a non-cached component, then construct and output the operation parameters.

[0099] It should be understood that if the historical cache type is a non-cached component, it is assumed that the target component was not cached during the last operation (the last operation may have been a rendering operation), and there is no corresponding operation parameter. Therefore, it is necessary to construct the operation parameter and then output the operation parameter.

[0100] In this embodiment, when the historical cache type is a non-cached component and the operation to be performed is a cache operation, the target component needs to be initialized. Therefore, it is necessary to construct and save the operation parameters and then output the operation parameters. If the historical cache type is a cached component and the operation to be performed is a cache operation, it can be assumed that the state of the target component has not changed. At this time, it is only necessary to obtain the previously stored operation parameters and output them. On the basis of ensuring the reliability of rendering, the component processing speed is further improved.

[0101] Based on the component processing method provided in the above embodiments, step S403 may include:

[0102] B1: If the target status flag indicates that the operation to be performed by the target component is a rendering operation, then obtain the historical cache type of the target component.

[0103] Among them, the historical cache type indicates the cache type of the target component before the operation to be performed; the historical cache type is either a cached component or a non-cached component.

[0104] B2: If the historical cache type is a cached component, then output the target component and render the target component.

[0105] It should be understood that if the historical cache type is a cached component, then the target component can be assumed to have been saved during the last operation and can be rendered directly.

[0106] B3: If the historical cache type is a non-cached component, output the descendant component corresponding to the target component and render the descendant component.

[0107] It should be understood that if the historical cache type is a cached component, it can be assumed that the target component was not saved during the last operation, so it is necessary to render the descendant components (child components, child components of child components, grandchild components of child components, etc.) corresponding to the target component.

[0108] In this embodiment of the application, by determining whether the historical cache type of the target component is a non-cached component or a cached component, it is determined whether to render the target component or its descendant components, thus ensuring the reliability of the rendering process.

[0109] To further illustrate the implementation process of steps A1-A3 and B1-B3, as a possible example, combined with... Figure 6a As shown, assuming the target state identifier is a Boolean value, the component processing method provided in this application embodiment may include:

[0110] When the boolean value is true, and the target component was a non-cached component in the last React DOM tree rendering, a promise (referring to the operation parameters in this application) can be constructed through the Schedule Render component, and the promise and its resolve can be cached, and then the promise can be thrown.

[0111] `resolve` is a method of the promise object used to change the promise's state from "pending" to "fulfilled" and pass a value to the promise's handler function (i.e., the callback function of the `.then()` method).

[0112] It's important to note that caching `resolve` is done to prevent memory leaks caused by promises remaining in a pending state. More specifically, it's to prevent potential memory leaks caused by promise objects created in the promise chain remaining in a pending state for an extended period. In JavaScript, if a promise object remains in a pending state for a long time and is referenced in multiple places (e.g., through closures), this memory may not be reclaimed, leading to a memory leak. Therefore, by caching `resolve` and calling it at the appropriate time, we can ensure that promise objects can transition from a pending state to a fulfilled (successful) or rejected (failed) state in a timely manner, allowing the garbage collection mechanism to reclaim this memory.

[0113] When the boolean value is true, and the target component was a cached component during the last React DOM tree rendering, simply throw the promise cached from the previous component. It should be understood that if the target component was already cached during the previous operation, there's no need to repeat the construction of the previous operation's parameters; simply throwing the promise is sufficient.

[0114] When a promise is thrown, the top level of the React DOM rendering tree is detected by the exception handling process. When the exception handling process obtains the exception operation parameter (the exception promise), it will suspend the corresponding target component and pause rendering until the target component returns to a normal component (i.e., the promise is successful or failed).

[0115] When the boolean value is false, and the target component was a non-cached component after the last React DOM tree rendering, the descendant component corresponding to the target component is returned directly, and the rendering operation is performed.

[0116] When the boolean value is false, and the target component was a cached component after the last React DOM tree rendering, the cached promise.resolve needs to be executed, and the promise should be set to null after execution. Then, the target component is returned, and the rendering operation on the target component is performed. Setting the promise to null after execution prevents memory leaks.

[0117] Based on the component processing method provided in the above embodiments, in some possible implementations, the method may further include:

[0118] C1: If the operation to be performed is a rendering operation and the target component's historical state is a hidden or suspended state, then the first operation is executed synchronously by calling the rendering hook function.

[0119] Historical state refers to the target component's state during its historical execution operations. Historical execution operations are the preceding operations to be executed, with the first operation being a non-cached and non-rendering operation. Hidden state refers to the target component's state when it is not displayed. Suspended state means the target component is not rendered in React's rendering flow but is suspended and no operations are performed. Synchronous execution means execution occurs immediately after the render hook function is called.

[0120] The rendering hook function (use Active) refers to the function called when the target component transitions from a hidden or suspended state to a visible or rendered state, and the target component needs to perform operations other than rendering or caching (the first operation). The first operation is a non-caching operation, and non-rendering operations refer to operations other than rendering or caching, such as capturing component images, establishing a WebSocket persistent connection, etc. The code for using the rendering hook function can be as follows:

[0121] useActive(()=>{

[0122] console.log('useActive')

[0123] })

[0124] As one possible implementation, step C1 may include:

[0125] D1: Get the instantiated object corresponding to the target component.

[0126] An instanced object (activePluginIns) refers to an object used to record the component state of the target component and its descendant components. Specifically, the instanced object is obtained based on the scheduled rendering component corresponding to the target component.

[0127] `activePluginIns` can be understood as special data passed from ancestor components to descendant components. This data is an instantiated object, which the underlying scheduled rendering component can access. In the underlying logic, the parent component of the scheduled rendering component (i.e., the response layer) calls the hook that uses the `UseKeepAliveIns` instance to keep the component alive. This hook returns a singleton instantiated object (hereinafter referred to as `activePluginIns`). In other words, `activePluginIns` is only executed the first time `useKeepAliveIns` is called in this component. After that, every time `UseKeepAliveIns` is executed in the main rendering, the same `activePluginIns` is returned.

[0128] It's important to note that the core idea of ​​the Singleton pattern is to ensure that a class has only one instance and provide a global access point to that instance. In JavaScript, especially when used in conjunction with React hooks, the Singleton pattern can be implemented through closures and React's state management. In your scenario, the `useKeepAliveIns` hook implements such a Singleton, ensuring that the `activePluginIns` instance is created only once throughout the entire application's lifecycle, and subsequent calls will return the same instance.

[0129] The activePluginIns function has the following features: it records the current state of the planned rendering component (whether it is hidden or suspended); it records the state of the planned rendering component during the last rendering (whether it is hidden or suspended); it collects the callback functions registered by the caching hook function in the descendant components of the planned rendering component when the component is hidden or suspended, and executes them at the appropriate time.

[0130] It's important to note that in the parent component of the component scheduled for rendering, `activePluginIns` is passed to descendant components via `createContext`. The component scheduled for rendering can access `activePluginIns` and modify the current state of the component recorded in `activePluginIns`. When descendant components call the render hook function (`useActive`) and the cache hook function (`useUnActive`), `activePluginIns` is aware of this and registers the corresponding callback functions. `createContext` is a function in React used to create context objects. React's Context API provides a way to share global state across component hierarchies.

[0131] D2: Call the instance method in the instantiated object to determine whether the target component's state has changed from the first state to the second state.

[0132] The first state is either a hidden state or a suspended state, and the second state is either a displayed state or a rendered state.

[0133] It should be understood that the prerequisite for performing the first operation is a transition from the first state to the second state. If there is no transition from the first state to the second state, then the first operation does not need to be performed.

[0134] D3: If the target component's state changes from the first state to the second state, then execute the function parameters of the rendering hook function corresponding to the first operation.

[0135] Function parameters refer to the parameters obtained from the callback function received by the rendering hook function.

[0136] It should be understood that the render hook function accepts a callback function as a function parameter. When the render hook function is called by a descendant component of the component to be rendered (such as the target component), the render hook function will obtain the instantiated object passed by the component to be rendered through useContext.

[0137] If the instantiated object is not obtained, it proves that the ancestor component of the target component that called the rendering hook function is not wrapped by keep-alive (does not belong to the scheduled rendering component), and the logic can be terminated directly.

[0138] When the rendering hook function obtains the instantiated object, it calls the isChangeToActive instance method on the instantiated object to determine whether it is active. This method determines whether the target component that called the instantiated object has just changed from a hidden / suspended state to a shown / rendered state in the current rendering frame, and determines whether to execute the function parameters based on the return value. If it changed from a hidden / suspended state to a shown / rendered state, the function parameters of the rendering hook function corresponding to the first operation are executed.

[0139] C2: If the operation to be performed is a cache operation and the target component's historical state is a display state or a rendering state, then the second operation is executed asynchronously by calling the cache hook function.

[0140] Among them, non-cached operations and non-rendering operations refer to the second operation being an operation other than caching operations and rendering operations.

[0141] The cache hook function (useUnActive) refers to the function called when the target component transitions from a visible or rendered state to a hidden or suspended state, and the target component needs to perform operations other than rendering or caching (the second operation). The code for using the cache hook function can be as follows:

[0142] useUnActive(()=>{

[0143] console.log('useUnActive')

[0144] })

[0145] It's important to note that the first operation needs to be executed synchronously, while the second operation can be executed asynchronously. Specifically, since the component state corresponding to the first operation is changing from a hidden / suspended state to a shown / rendered state, the first operation needs to be executed synchronously with this change to ensure its correct execution. However, for the second operation, the component state corresponding to the second operation is changing from a shown / rendered state to a hidden / suspended state. Since the component is currently in a hidden / suspended state, the second operation can be executed at an appropriate time and therefore can be executed asynchronously.

[0146] In one possible implementation, step C1 may include:

[0147] E1: Get the instantiated object corresponding to the target component.

[0148] The instantiated object is obtained based on the planned rendering component corresponding to the target component. An instantiated object (activePluginIns) refers to an object used to record the component state of the target component and its descendant components. The instantiated object in this embodiment is the same as the instantiated object described in the above embodiments; related explanations can be found in the foregoing explanations of instantiated objects, and will not be repeated here.

[0149] E2: Call the instance method in the instantiated object and store the target function parameters of the cache hook function corresponding to the second operation in the parameter table. The parameter table includes multiple function parameters.

[0150] It should be understood that the cache hook function will receive a callback function as a function parameter. When the cache hook function is called by a descendant component of the component scheduled to be rendered (such as the target component), the cache hook function will obtain the instantiated object of the component scheduled to be rendered through useContext.

[0151] If the cache hook function fails to obtain an instantiated object, it proves that the ancestor component of the target component calling the cache hook function is not the scheduled rendering component wrapped in keep-alive, and the logic can be terminated directly.

[0152] If the cache hook function obtains an instantiated object, it will call the addUnActiveEventListener instance method on the instantiated object and store the function parameters in the parameter table within the instantiated object.

[0153] E3: If the target component's state changes from the second state to the first state, then execute the target function parameters in the parameter list.

[0154] It should be understood that when an instantiated object detects that a descendant component (such as the target component) in the planned rendering component is about to transition from a visible / rendered state to a hidden / suspended state, it will execute all function parameters stored in the parameter table.

[0155] Based on steps C1 and C2, as an example, when a target component is hidden and then redisplayed, if any action needs to be performed, such as a web-socket long connection in component A, since web-socket long connections are relatively wasteful of performance, the connection can be paused and the state of the target component can be saved when the cache hook function is called (step C2). When the rendering hook function is called, only the web-socket needs to be reconnected (step C1), without regenerating the virtual DOM of component A, thus reducing loading time. This can save server resources and optimize the user experience of the front end.

[0156] In this embodiment, the implementation principle of the rendering hook function and the caching hook function relies on React's context, and further uses the context to realize communication between ancestor components and descendant components. For example, if a rendering hook function or a caching hook function is used in a target component, the corresponding rendering hook function or caching hook function will look in the context for whether there is an instantiated object passed by an ancestor component. If it exists, it proves that the target component's ancestor component has a keep-alive component. At this time, the callback function received by the rendering hook function or caching hook function can be executed as needed.

[0157] It should be understood that, due to the characteristics of the React context, if a keep-alive component is used in a descendant component of the keep-alive component, the instance object passed by the deeper keep-alive component will override the instance object of the shallower keep-alive component. Therefore, when a target component A uses a render hook function or a cache hook function, regardless of how many layers of keep-alive components appear in the target component's ancestor components, the execution timing of the render hook function or cache hook function depends only on the keep-alive component closest to the target component (i.e., the closest ancestor component), ensuring the reliability of the call.

[0158] Combination Figure 6bAs shown, as an example, a descendant component (target component) in the planned rendering component of the keep-alive component might call a rendering hook function or a cache hook function. If a descendant component calls a rendering hook function, it checks if an instance of the target component exists to determine whether to execute the callback function. Then, it retrieves the target component's state (currently displayed, previously hidden) from the keep-alive component's active internal state management, and performs the first operation based on the rendering hook function. If a descendant component calls a cache hook function, it checks if an instance of the target component exists to determine whether to execute the callback function. If an instance of the target component exists, it collects the function parameters of the callback function and stores them in a parameter table. When the target component's state changes from displayed to hidden, all function parameters in the parameter table corresponding to the cache hook function can be executed.

[0159] In this embodiment, rendering hook functions or caching hook functions are registered as callback functions in React. When the first operation or the second operation needs to be performed, the corresponding callback function can be called and executed through rendering hook functions or caching hook functions. This allows the behavior of the program to be dynamically modified or extended at runtime, improving the flexibility and scalability of the program.

[0160] Based on the component processing method provided in the above embodiments, different types of target components will have different use cases, which will be explained in conjunction with the embodiments below.

[0161] When the target component is a page-level component (page-level keep-alive), it needs to have React 16.6+ installed (React 16.6 was released in 2018) and react-router-dom6+ installed (the routing library is optional and has no fixed requirements). Furthermore, a [GlobalWrapper component] needs to be encapsulated. The GlobalWrapper component needs a container to store cached components; this container should ideally be an LRU cache to remove components that haven't been activated for a long time, thus optimizing memory usage. The GlobalWrapper component needs a method / scheme to receive route pages / route components passed from the parent component. The GlobalWrapper component internally renders all route pages in the repository and dynamically passes the rendering state to the scheduled rendering component based on the activation status of the route pages.

[0162] Combination Figure 7aAs shown, the GlobalWrapper component can capture route pages and cache them in a cache repository. When the cache repository changes, it can retrieve the cached content and then render the route page. Each route page can be cached in a separate scheduled rendering component, which can then show and hide multiple components on the route page.

[0163] It should be noted that the system can also monitor route pages in the cache repository. When the cache time of a route page exceeds a preset time, the route page can be deleted to optimize memory usage.

[0164] It should be understood that the component processing method provided in this application, when processing page-level components, can speed up webpage response and improve user experience in scenarios with long page loading times, such as 3D digital screens, websites with a large number of images, and weak network environments.

[0165] Furthermore, as shown in Table 1, taking page-level components as an example, the memory usage of a website with keep-alive disabled is similar to that with keep-alive enabled. Compared to related technologies where showing and hiding via CSS consumes a large amount of memory, the embodiments of this application can reduce memory usage.

[0166] Table 1: Website Memory Usage

[0167] Website use cases Website memory usage keep-alive not enabled 94,664K Enable keep-alive 95,516K

[0168] When the target component is a component-level component (component-level keep-alive), this component-level component requires React 16.6 or later (React 16.6 was released in 2018). Within the component-level component, simply import the scheduled render component, pass the target component that needs to be kept-alive to the scheduled render component, and inform it of the rendering status. See [link to documentation] for details. Figure 7b As shown.

[0169] Based on the component processing method provided in the above embodiments, see [link to relevant documentation]. Figure 8 This figure is a schematic diagram of the structure of a component processing device provided in an embodiment of this application. Figure 8 The component processing device 800 shown may include:

[0170] The acquisition module 801 is used to acquire the target status identifier of the target component; the target status identifier indicates the operation to be performed on the target component; the operation to be performed is a caching operation or a rendering operation;

[0171] The first processing module 802 is used to output operation parameters if the target status identifier indicates that the operation to be performed on the target component is a cache operation; the operation parameters are abnormal operation parameters or non-abnormal operation parameters; abnormal operation parameters indicate that the operation result is in progress, and non-abnormal operation parameters indicate that the operation result is success or failure; wherein, if the operation parameters obtained by the exception capture process are abnormal operation parameters, the target component is suspended and the rendering of the target component is stopped.

[0172] The second processing module 803 is used to render the target component if the target status flag indicates that the operation to be performed on the target component is a rendering operation.

[0173] As an example, the first processing module 802 is used for:

[0174] If the target state identifier indicates that the operation to be performed by the target component is a cache operation, then obtain the historical cache type of the target component; the historical cache type indicates the cache type of the target component before the operation to be performed; the historical cache type is either a cached component or a non-cached component;

[0175] If the historical cache type is a cache component, then output the operation parameters;

[0176] If the historical cache type is a non-cached component, then construct and output the operation parameters.

[0177] As an example, the second processing module 803 is used for:

[0178] If the target state flag indicates that the operation to be performed on the target component is a rendering operation, then obtain the historical cache type of the target component; the historical cache type indicates the cache type of the target component before the operation to be performed; the historical cache type is either a cached component or a non-cached component;

[0179] If the historical cache type is a cached component, then the target component is output and rendered.

[0180] If the historical cache type is a non-cached component, then the descendant components corresponding to the target component are output and rendered.

[0181] As an example, the device 800 also includes:

[0182] The first operation module is used to synchronously execute the first operation by calling the rendering hook function if the operation to be executed is a rendering operation and the historical state of the target component is a hidden state or a suspended state; the historical state is the state of the target component in the historical execution operation, and the historical execution operation is the previous execution operation of the operation to be executed; the first operation is a non-cached operation and a non-rendering operation.

[0183] The second operation module is used to asynchronously execute the second operation by calling the cache hook function if the operation to be performed is a cache operation and the historical state of the target component is a display state or a rendering state; the second operation is a non-cache operation and a non-rendering operation.

[0184] As an example, the first operation module is used for:

[0185] Obtain the instantiated object corresponding to the target component; the instantiated object is obtained based on the scheduled rendering component corresponding to the target component;

[0186] Call the instance method in the instantiated object to determine whether the target component's state has changed from the first state to the second state; the first state is a hidden state or a suspended state, and the second state is a displayed state or a rendered state;

[0187] If the target component's state changes from the first state to the second state, then the function parameters of the rendering hook function corresponding to the first operation are executed.

[0188] As an example, the second operation module is used for:

[0189] Obtain the instantiated object corresponding to the target component; the instantiated object is obtained based on the scheduled rendering component corresponding to the target component;

[0190] Call the instance method in the instantiated object and store the target function parameters of the cache hook function corresponding to the second operation in the parameter table; the parameter table includes multiple function parameters;

[0191] If the target component's state changes from the second state to the first state, then the target function parameters in the parameter list are executed.

[0192] As an example, following the first processing module 802, an update module is also included, for:

[0193] The update operation parameters corresponding to the target component are obtained through the exception handling process; the update operation parameters are the operation parameters obtained after the update operation parameters.

[0194] If the update operation parameter is a non-abnormal operation parameter, then the suspension operation on the target component ends;

[0195] If the update operation parameter is an abnormal operation parameter, the target component will be suspended and rendering of the target component will be stopped.

[0196] As an example, the target component is a component within the target scheduled rendering component; the target scheduled rendering component includes multiple components, which are divided according to hierarchy; the target scheduled rendering component is a scheduled rendering component within the keep-alive component, and the keep-alive component includes multiple scheduled rendering components.

[0197] The component processing apparatus provided in this application embodiment has the same beneficial effects as the component processing method provided in the above embodiments, and therefore will not be described again.

[0198] The following sections will describe the structures for server-based and terminal-based configurations.

[0199] Figure 9 This is a schematic diagram of a server structure provided in an embodiment of this application. The server 900 can vary significantly due to different configurations or performance. It may include one or more central processing units (CPUs) 922 (e.g., one or more processors) and memory 932, and one or more storage media 930 (e.g., one or more mass storage devices) for storing application programs 942 or data 944. The memory 932 and storage media 930 can be temporary or persistent storage. The program stored in the storage media 930 may include one or more modules (not shown in the diagram), each module may include a series of instruction operations on the server. Furthermore, the CPU 922 may be configured to communicate with the storage media 930 and execute the series of instruction operations in the storage media 930 on the server 900.

[0200] Server 900 may also include one or more power supplies 926, one or more wired or wireless network interfaces 950, one or more input / output interfaces 958, and / or one or more operating systems 941, such as Windows Server. TM Mac OS X TM Unix TM Linux TM FreeBSD TM etc.

[0201] CPU 922 is used to perform the following steps:

[0202] Obtain the target state flag of the target component; the target state flag indicates the operation to be performed on the target component; the operation to be performed is either a caching operation or a rendering operation;

[0203] If the target status flag indicates that the operation to be performed on the target component is a cached operation, then the operation parameters are output; the operation parameters are either abnormal operation parameters or non-abnormal operation parameters; abnormal operation parameters indicate that the operation result is in progress, and non-abnormal operation parameters indicate that the operation result is success or failure; if the operation parameters obtained by the exception capture process are abnormal operation parameters, then the target component is suspended and the rendering of the target component is stopped.

[0204] If the target status flag indicates that the operation to be performed on the target component is a rendering operation, then the target component is rendered.

[0205] This application also provides another component processing device, such as... Figure 10 As shown, for ease of explanation, only the parts related to the embodiments of this application are shown. For specific technical details not disclosed, please refer to the method section of the embodiments of this application. The terminal can be any terminal device including mobile phones, tablets, personal digital assistants (PDAs), point-of-sale (POS) terminals, in-vehicle computers, etc. Taking a mobile phone as an example:

[0206] Figure 10 This is a block diagram illustrating a portion of the structure of a mobile phone related to the terminal provided in the embodiments of this application. (Reference) Figure 10 The mobile phone includes: a radio frequency (RF) circuit 1010, a memory 1020, an input unit 1030, a display unit 1040, a sensor 1050, an audio circuit 1060, a wireless fidelity (WiFi) module 1070, a processor 1080, and a power supply 1090, etc. Those skilled in the art will understand that... Figure 10 The mobile phone structure shown does not constitute a limitation on the mobile phone and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0207] The following is combined with Figure 10 A detailed introduction to each component of a mobile phone:

[0208] The RF circuit 1010 can be used for receiving and transmitting signals during information transmission or calls. Specifically, it receives downlink information from the base station and processes it with the processor 1080; additionally, it transmits uplink data to the base station. Typically, the RF circuit 1010 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low-noise amplifier (LNA), a duplexer, etc. Furthermore, the RF circuit 1010 can also communicate wirelessly with networks and other devices. The aforementioned wireless communications may use any communication standard or protocol, including but not limited to Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Long Term Evolution (LTE), email, and Short Messaging Service (SMS).

[0209] The memory 1020 can be used to store software programs and modules. The processor 1080 executes various mobile phone functions and data processing by running the software programs and modules stored in the memory 1020. The memory 1020 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the mobile phone (such as audio data, phonebook, etc.). In addition, the memory 1020 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0210] The input unit 1030 can be used to receive input numerical or character information, and to generate key signal inputs related to user settings and function control of the mobile phone. Specifically, the input unit 1030 may include a touch panel 1031 and other input devices 1032. The touch panel 1031, also known as a touch screen, can collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near the touch panel 1031), and drive the corresponding connection devices according to a pre-set program. Optionally, the touch panel 1031 may include two parts: a touch detection device and a touch controller. The touch detection device detects the user's touch position and the signal generated by the touch operation, and transmits the signal to the touch controller; the touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 1080, and can also receive and execute commands sent by the processor 1080. In addition, the touch panel 1031 can be implemented using various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 1031, the input unit 1030 may also include other input devices 1032. Specifically, other input devices 1032 may include, but are not limited to, one or more of the following: physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, etc.

[0211] The display unit 1040 can be used to display information input by the user or information provided to the user, as well as various menus of the mobile phone. The display unit 1040 may include a display panel 1041, which may optionally be configured as a Liquid Crystal Display (LCD), Organic Light-Emitting Diode (OLED), or similar display panel 1041. Further, a touch panel 1031 may cover the display panel 1041. When the touch panel 1031 detects a touch operation on or near it, it transmits the information to the processor 1080 to determine the type of touch event. Subsequently, the processor 1080 provides corresponding visual output on the display panel 1041 according to the type of touch event. Although in Figure 10 In this embodiment, the touch panel 1031 and the display panel 1041 are two separate components to realize the input and output functions of the mobile phone. However, in some embodiments, the touch panel 1031 and the display panel 1041 can be integrated to realize the input and output functions of the mobile phone.

[0212] The mobile phone may also include at least one sensor 1050, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor. The ambient light sensor can adjust the brightness of the display panel 1041 according to the ambient light level, and the proximity sensor can turn off the display panel 1041 and / or the backlight when the phone is moved to the ear. As a type of motion sensor, an accelerometer sensor can detect the magnitude of acceleration in various directions (generally three axes). When stationary, it can detect the magnitude and direction of gravity and can be used for applications that recognize the phone's posture (such as landscape / portrait switching, related games, magnetometer posture calibration), vibration recognition-related functions (such as pedometer, taps), etc. Other sensors that may be configured in the mobile phone, such as gyroscopes, barometers, hygrometers, thermometers, and infrared sensors, will not be described in detail here.

[0213] The audio circuit 1060, speaker 1061, and microphone 1062 provide an audio interface between the user and the mobile phone. The audio circuit 1060 converts the received audio data into electrical signals and transmits them to the speaker 1061, where the speaker 1061 converts them into sound signals for output. On the other hand, the microphone 1062 converts the collected sound signals into electrical signals, which are then received by the audio circuit 1060, converted into audio data, and then processed by the processor 1080 before being transmitted via the RF circuit 1010 to, for example, another mobile phone, or the audio data can be output to the memory 1020 for further processing.

[0214] WiFi is a short-range wireless transmission technology. Through the WiFi module 1070, mobile phones can help users send and receive emails, browse web pages, and access streaming media, providing users with wireless broadband internet access. Although Figure 10 The WiFi module 1070 is shown, but it is understood that it is not an essential component of a mobile phone and can be omitted as needed without changing the essence of the invention.

[0215] The processor 1080 is the control center of the mobile phone, connecting various parts of the phone through various interfaces and lines. It executes software programs and / or modules stored in the memory 1020 and calls data stored in the memory 1020 to perform various functions and process data, thereby collecting overall data and information from the phone. Optionally, the processor 1080 may include one or more processing units; preferably, the processor 1080 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 1080.

[0216] The mobile phone also includes a power supply 1090 (such as a battery) that supplies power to various components. Preferably, the power supply can be logically connected to the processor 1080 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system.

[0217] Although not shown, mobile phones may also include a camera, Bluetooth module, etc., which will not be described in detail here.

[0218] In this embodiment of the application, the processor 1080 included in the terminal also has the following functions:

[0219] Obtain the target state flag of the target component; the target state flag indicates the operation to be performed on the target component; the operation to be performed is either a caching operation or a rendering operation;

[0220] If the target status flag indicates that the operation to be performed on the target component is a cached operation, then the operation parameters are output; the operation parameters are either abnormal operation parameters or non-abnormal operation parameters; abnormal operation parameters indicate that the operation result is in progress, and non-abnormal operation parameters indicate that the operation result is success or failure; if the operation parameters obtained by the exception capture process are abnormal operation parameters, then the target component is suspended and the rendering of the target component is stopped.

[0221] If the target status flag indicates that the operation to be performed on the target component is a rendering operation, then the target component is rendered.

[0222] This application also provides a computer-readable storage medium for storing program code that is used to execute any one of the implementation methods of a component processing method described in the foregoing embodiments.

[0223] This application also provides a computer program product including instructions that, when run on a computer, cause the computer to execute any one of the component processing methods described in the foregoing embodiments.

[0224] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working process of the system and equipment described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0225] In the several embodiments provided in this application, it should be understood that the disclosed systems and methods can be implemented in other ways. For example, the system embodiments described above are merely illustrative. For instance, the division of the system is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple systems may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection through some interfaces, devices, or units, and may be electrical, mechanical, or other forms.

[0226] The system described as separate components may or may not be physically separate. Components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment, depending on actual needs.

[0227] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0228] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes: USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, optical disks, and other media capable of storing program code.

[0229] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A component processing method, characterized in that, include: Obtain the target status identifier of the target component; The target state identifier indicates the operation to be performed on the target component; the operation to be performed is either a caching operation or a rendering operation. If the target status identifier indicates that the operation to be performed by the target component is a cache operation, then the operation parameters are output; the operation parameters are abnormal operation parameters or non-abnormal operation parameters; the abnormal operation parameters indicate that the operation result is in progress, and the non-abnormal operation parameters indicate that the operation result is success or failure; wherein, if the operation parameters obtained by the exception capture process are the abnormal operation parameters, then the target component is suspended and the rendering of the target component is stopped. If the target state identifier indicates that the operation to be performed on the target component is a rendering operation, then the target component is rendered.

2. The method according to claim 1, characterized in that, If the target state identifier indicates that the operation to be performed on the target component is a caching operation, then the operation parameters are output, including: If the target state identifier indicates that the operation to be performed by the target component is a cache operation, then the historical cache type of the target component is obtained; the historical cache type indicates the cache type of the target component before the operation to be performed; the historical cache type is a cached component or a non-cached component; If the historical cache type is a cache component, then output the operation parameters; If the historical cache type is a non-cached component, then construct and output the operation parameters.

3. The method according to claim 1, characterized in that, If the target state identifier indicates that the operation to be performed on the target component is a rendering operation, then rendering the target component includes: If the target state identifier indicates that the operation to be performed by the target component is a rendering operation, then the historical cache type of the target component is obtained; the historical cache type indicates the cache type of the target component before the operation to be performed; the historical cache type is a cached component or a non-cached component; If the historical cache type is a cache component, then the target component is output and rendered. If the historical cache type is a non-cached component, then the descendant component corresponding to the target component is output, and the descendant component is rendered.

4. The method according to claim 1, characterized in that, The method further includes: If the operation to be executed is a rendering operation and the historical state of the target component is a hidden state or a suspended state, then the first operation is executed synchronously by calling the rendering hook function; the historical state is the state of the target component in the historical execution operation, and the historical execution operation is the previous execution operation of the operation to be executed; the first operation is a non-cached operation and a non-rendering operation; If the operation to be executed is a cache operation and the historical state of the target component is a display state or a rendering state, then the second operation is executed asynchronously by calling the cache hook function; the second operation is the non-cache operation and the non-rendering operation.

5. The method according to claim 4, characterized in that, The first operation, performed synchronously by calling the rendering hook function, includes: Obtain the instantiated object corresponding to the target component; the instantiated object is obtained based on the planned rendering component corresponding to the target component; Invoke the instance method in the instantiated object to determine whether the component state of the target component has changed from the first state to the second state; the first state is a hidden state or a suspended state, and the second state is a displayed state or a rendered state; If the component state of the target component changes from the first state to the second state, then the function parameters of the rendering hook function corresponding to the first operation are executed.

6. The method according to claim 4, characterized in that, The asynchronous execution of the second operation by calling the cache hook function includes: Obtain the instantiated object corresponding to the target component; the instantiated object is obtained based on the planned rendering component corresponding to the target component; The instance method in the instantiated object is invoked to store the target function parameters of the cache hook function corresponding to the second operation in a parameter table; the parameter table includes multiple function parameters. If the component state of the target component changes from the second state to the first state, then the target function parameters in the parameter table are executed.

7. The method according to any one of claims 1-6, characterized in that, After suspending the target component and stopping rendering of the target component, the method further includes: The update operation parameters corresponding to the target component are obtained through the exception capture process; the update operation parameters are the operation parameters obtained after the operation parameters. If the update operation parameter is a non-abnormal operation parameter, then the suspension operation on the target component ends; If the update operation parameter is an abnormal operation parameter, then the target component is suspended and rendering of the target component is stopped.

8. The method according to any one of claims 1-6, characterized in that, The target component is one of the target planned rendering components; the target planned rendering component includes multiple components, which are divided according to hierarchy; the target planned rendering component is one of the planned rendering components in the keep-alive component, and the keep-alive component includes multiple planned rendering components.

9. A component processing apparatus, characterized in that, include: The acquisition module is used to acquire the target status identifier of the target component; The target status identifier indicates the operation to be performed on the target component; The operation to be performed is either a caching operation or a rendering operation; The first processing module is configured to output operation parameters if the target status identifier indicates that the operation to be performed on the target component is a cache operation; the operation parameters are abnormal operation parameters or non-abnormal operation parameters; the abnormal operation parameters indicate that the operation result is in progress, and the non-abnormal operation parameters indicate that the operation result is success or failure; wherein, if the operation parameters obtained by the exception capture process are the abnormal operation parameters, the target component is suspended and the rendering of the target component is stopped. The second processing module is used to render the target component if the target state identifier indicates that the operation to be performed on the target component is a rendering operation.

10. A component processing device, characterized in that, The device includes a processor and a memory: The memory is used to store program code and transmit the program code to the processor; The processor is configured to execute the steps of the component processing method according to any one of claims 1 to 8, based on the instructions in the program code.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store program code for performing the steps of the component processing method according to any one of claims 1 to 8.

12. A computer program product, characterized in that, Includes a computer program or instructions that, when executed, implement the steps of the component processing method according to any one of claims 1 to 8.

Images