Method and system for implementing update rendering between multiple sub-components based on react components
By establishing a peer-to-peer channel between child component A and child component B in React components, and using the useTunnel hooks and useEffect mechanisms, the page rendering problem caused by frequent updates of child components is solved, thus improving page performance.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- 杭州比智科技有限公司
- Filing Date
- 2023-05-08
- Publication Date
- 2026-06-09
AI Technical Summary
In React components, frequent updates and rendering between child components cause the parent component and other child components to be re-executed frequently, leading to page crashes or lag.
By establishing a point-to-point channel between child component A and child component B, and using useTunnel hooks to create sender and receiver functions in the React environment, data can be transmitted directly, avoiding the parent component. useEffect can be used to prevent the receiver from being executed multiple times.
It enables high-frequency data transfer between child components without affecting the re-rendering of other components, improving page rendering performance and preventing page crashes or lag.
Smart Images
Figure CN116521167B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer and data processing technology, and in particular to a method and system for high-frequency update rendering between multiple sub-components based on React components. Background Technology
[0002] React is an open-source framework developed using the JavaScript programming language. The core idea of the React framework is componentization, which allows users to break down graphical interfaces into independent, reusable parts, collectively called ReactComponents, and use these components to build complex graphical interfaces.
[0003] A React component tree is a hierarchical structure of one or more components used to represent the UI of an entire React application. Each React component can contain other components, forming a nested hierarchy. For example... Figure 1 As shown, a page can be viewed as an independent React component. If the page contains a title and a button, they can be considered as two child components: a title component and a button component. The page component, title component, and button component form a nested relationship, creating a component tree.
[0004] like Figure 2 As shown, in practical applications, a page will contain much more content. For example, a page might contain a title block and a body block. The title block might contain a logo image, page title text, description, buttons, etc., while the body block might contain forms, detailed text, action buttons, etc. These can all be considered components. These sub-components can be further subdivided into finer-grained sub-components, such as input box components and label components within the form component. All of this will build a complex React component tree.
[0005] The React framework uses Props to pass data between components. These Props describe the external characteristics of a component; they are immutable and are passed from parent to child components. State, on the other hand, is mutable data within a component, describing its internal state. It is typically used to modify data during user interaction or asynchronous operations.
[0006] Typically, Props are used to pass data from a parent component to a child component and to pass data back from a child component to the parent component via callback functions. State, on the other hand, is used to describe the internal state of a component.
[0007] How can an operation or asynchronously generated new data in one child component change the content of another child component?
[0008] Typically, child components can pass data back to their parent components via callback functions. The parent component stores the returned data in its state and then passes it to the specified child component via props. The child component then retrieves the data through the props and displays it. See details. Figure 4 .
[0009] However, when a component's props or state are modified, the React component will be re-executed and rendered. This re-execution will cause the React component itself and all its child components to be re-executed.
[0010] by Figure 2 In the component model, for example, when content is entered into the input box component, the data is simultaneously displayed in the title text component. For instance... Figure 3 As shown, based on the existing React framework functionality, the specific implementation steps are as follows:
[0011] 1. When you enter content into the input box component (child component A), the onChange function of the input box itself will be called back synchronously.
[0012] 2. Call the onChange function, and through the Props callback function, pass the data step by step from the input box component, form component, body block component, and finally to the page component (parent component).
[0013] 3. In the page component, its own state will be updated to store the value entered in the input box, which will cause the page component to perform an update once.
[0014] 4. After the page components are updated, the value entered in the input box is passed to the title block via Props, and then to the title text component (sub-component B), where the title text component renders and displays the input value.
[0015] 5. When content is continuously entered into the input box, steps 1, 2, 3, and 4 will be repeated continuously to synchronize the data from the input box to the title text component.
[0016] Because of this characteristic, updating the parent component's state will cause all child components to be recalculated. To prevent child components from being updated, you need to use React.PureComponent or React.memo, which will first check if the component's props have been modified. If they have been modified, then the child components will be executed.
[0017] Regardless of the approach, this will result in a large number of re-executions of operations by both the parent and child components. This approach won't cause major problems when the parent-child component hierarchy is small, the component's influence is limited, or data updates are infrequent. However, if the parent component represents the entire page, the component has numerous child components, or data updates are very frequent, this will lead to excessive component execution, causing page crashes or lag. Summary of the Invention
[0018] To address the problems existing in the prior art, the purpose of this invention is to provide a method and system for high-frequency updating and rendering between multiple sub-components based on React components, so as to prevent other components from re-executing or re-rendering when two sub-components interact with data.
[0019] To achieve the above objectives, this invention provides a method for updating and rendering multiple child components based on React components, the method comprising the following steps:
[0020] Step S1. Create a hook named useTunnel to establish a point-to-point channel between React child component A and child component B. The hook returns two function variables, namely sender and receiver. The sender is used to send data, and the receiver is used to directly obtain data.
[0021] Step S2. Determine the common parent component of child component A and child component B. In the parent component, call useTunnelhooks to get the two function variables senter and receiver returned by useTunnel. Then, pass these two function variables as child component props to the corresponding child component A and child component B respectively.
[0022] Step S3. In child component A, obtain the sender function variable passed from the parent component through props, and call the sender function to send the data to the receiver function callback function;
[0023] Step S4. In child component B, obtain the receiver function variable passed from the parent component through props, and inject the callback function parameter into the receiver function in useEffect.
[0024] Furthermore, in step S1, a buffer is established in the React environment using useTunnel. The receiver calls the receiver function to inject a parameterized function fallback into useTunnel. In the receiver function instance, this parameterized function fallback is cached in the useRef object fallbackRef.
[0025] Furthermore, when the sender function is called, the data to be transmitted is passed in; in the sender function instance, the parameterized function fallback is obtained from the fallbackRef object and the data is called as the parameter; thus, the data can be obtained in the fallback instance injected by the receiver.
[0026] Furthermore, in step S2, subcomponent A and subcomponent B respectively obtain the associated sender and receiver functions; through these two functions, sender and receiver are used in subcomponent A and subcomponent B respectively to establish a channel with point-to-point communication.
[0027] Furthermore, in step S3, the sub-component A contains an input box component. When the user enters text in the input box, the onChange event is triggered, and the value entered by the user is obtained through e.target.value. When onChange is triggered, sender(e.target.value) is called to send the data to the receiver, thereby realizing the function of sending data from the point-to-point channel sender.
[0028] Furthermore, in step S4, during multiple renderings of the React component, the content in `useEffect` is only executed during initialization, thus preventing the receiver from being executed multiple times. 7. The method for updating rendering between multiple child components based on React components according to claim 6, characterized in that, when using the receiver, a name and a callback function `fallback` are injected into it. This name and function are stored in `useTunnel`. When the sender is triggered to send data, `useTunnel` synchronously calls the cached callback function object, passing the data as a parameter.
[0029] Furthermore, the data is synchronously retrieved in the callback function instance, thereby enabling child component B to retrieve the data sent from child component A.
[0030] Furthermore, a channel is established between child component A and child component B. During the process of data being transmitted directly from child component A to child component B, it no longer passes through the parent component, thus ensuring that only the re-rendering of child component B is affected, without affecting other components.
[0031] On the other hand, the present invention provides a system for updating rendering between multiple sub-components based on React components, the system being used to implement the method for updating rendering between multiple sub-components based on React components according to the present invention.
[0032] The beneficial effects of this invention are as follows:
[0033] By establishing a channel through the parent component, child components can frequently exchange data without causing the parent component and other child components to re-render, thus improving page rendering performance. By directly connecting multiple child components through a channel, the problem of unnecessary re-rendering of other components when two child components exchange data is solved. The technical solution of this invention does not cause other components to re-execute or re-render, preventing page crashes or lag due to excessive rendering execution. Attached Figure Description
[0034] Figure 1 A schematic diagram of a component tree structure in the prior art is shown;
[0035] Figure 2 This diagram illustrates the complex React component tree structure in the prior art.
[0036] Figure 3 A flowchart illustrating a prior art method for updating rendering between sub-components is shown.
[0037] Figure 4 A flowchart illustrating a method for high-frequency update rendering between multiple sub-components based on React components according to the present invention is shown.
[0038] Figure 5 A flowchart illustrating the process of establishing a multi-component-to-multi-component channel based on React components according to the present invention is shown.
[0039] Figure 6 A schematic diagram illustrating a method for synchronously rendering input content in an input box to a title text component according to an embodiment of the present invention is shown. Detailed Implementation
[0040] The technical solution of the present invention will now be clearly and completely described with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.
[0041] In the description of this invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing the invention and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.
[0042] In the description of this invention, it should be noted that, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this invention according to the specific circumstances.
[0043] The following combination Figures 4-6 Specific embodiments of the present invention will be described in detail below. It should be understood that the specific embodiments described herein are for illustrative and explanatory purposes only and are not intended to limit the present invention.
[0044] The method and system for high-frequency updating and rendering between multiple sub-components based on React components according to the present invention can ensure that when two sub-components interact with data, other components will not be re-executed or re-rendered.
[0045] The inventive concept of this invention is as follows: A subcomponent that needs to send data is designated as subcomponent A, and a subcomponent that needs to receive data is designated as subcomponent B; a channel is established between subcomponent A and subcomponent B, through which data is sent by subcomponent A, and subcomponent B listens for and receives data sent from subcomponent A, and updates subcomponent B accordingly. For example... Figure 4 As shown.
[0046] This method includes the following steps:
[0047] Step S1. Create a hook named `useTunnel` to establish a channel. This hook returns two function variables: `sender` and `receiver`, enabling a point-to-point channel between React components. Data is sent via the sender, and the receiver can directly retrieve the data without any intermediaries. The core principle is that `useTunnel` creates a buffer in the React environment. The receiver calls the `receiver` function, injecting a parameterized function `fallback` into `useTunnel`. Within the `receiver` instance, this `fallback` function is cached in the `useRef` object `fallbackRef`. This prevents page refreshes when data changes. When the sender function is called, it passes the data to be transmitted. The sender instance retrieves the parameterized function `fallback` from the `fallbackRef` object and calls it with `data` as the parameter. Thus, the `data` is retrieved in the `fallback` instance injected into the receiver.
[0048] Implement the useTunnel code:
[0049]
[0050]
[0051] Step S2. Due to React's tree structure, two child components need to collaborate through the parent component when establishing a connection. First, in the parent component, the `useTunnel` hook is called to obtain the two function variables returned by `useTunnel`: the sender and the receiver. These two function variables are then passed as props to the corresponding child components A and B, respectively. This way, child components A and B each obtain associated sender and receiver functions. These two functions can then be used in child components A and B to establish a point-to-point communication channel. The following code snippet demonstrates the key usage of `useTunnel` in the parent component and the passing of sender and receiver to child components A and B.
[0052]
[0053]
[0054] Step S3. In child component A, obtain the sender method passed from the parent component via props, and call the sender function to send the data to the callback function of the receiver, which is strongly associated with the sender. For example, in the code snippet below, the child component contains an input box component. When the user enters text in the input box, the onChange event is triggered, and the user's input value can be obtained through e.target.value. When onChange is triggered, calling sender(e.target.value) sends the data to the receiver, thus realizing the function of sending data from the sender in a point-to-point channel. Besides triggering the sender event, the onClick event can also be triggered by clicking a button in the component to achieve inter-component interaction. After asynchronously requesting an API and obtaining a response, the response data can be shared with other child components. All of these can be transmitted through the sender and applied in the child components.
[0055]
[0056]
[0057] Step S4. In child component B, obtain the receiver function passed from the parent component via props, and inject the callback function `fallback` parameter into the receiver function within `useEffect`. The advantage of using `useEffect` is that during multiple renders of the React component, the content in `useEffect` is only executed during initialization, thus preventing the receiver from being executed multiple times. When using the receiver, inject a name `name` and a callback function `fallback`. This name and function will be stored in `useTunnel`. When the sender is triggered to send data `data`, `useTunnel` will synchronously call the cached callback function object, passing the data `data` as a parameter. Thus, the callback function instance will synchronously obtain this data `data`, meaning that in child component B, the data `data` sent from child component A will be retrieved. If, in step S3, the sender sends a string value entered in the Input field, then this string value will be retrieved in the receiver's callback function and placed into `setText`. This will update the `text` parameter and re-render child component B, without causing other child components to re-render. In the example below, the updated `text` will be reflected on the page in child component B. Besides string data, the receiver's callback function can also retrieve other types of data. This allows for processing the passed data within the callback function according to actual business needs, updating the state within child component B, and re-rendering the component.
[0058]
[0059]
[0060] In this way, a channel is established between child component A and child component B. During the process of data being transmitted directly from child component A to child component B, it no longer passes through the parent component. It only affects the re-rendering of child component B and does not affect other components.
[0061] The above application scenarios demonstrate the establishment of point-to-point channels for data transmission, achieving one-to-one data sharing. However, in real-world applications, there are also one-to-many, many-to-one, and many-to-many scenarios. These functionalities can also be achieved using `useTunnel`.
[0062] For complex application scenarios such as one-to-one, one-to-many, many-to-one, and many-to-many, it can still be understood that there are one or more senders and one or more receivers. The following describes the process of implementing many-to-many component data transmission based on the one-to-one sub-component data transmission process implemented in steps S1 to S4.
[0063] When multiple child components A (sending data) send data to multiple child components B (receiving data), the `useTunnel` hooks created in step S1 are still used. In step S2, the common parent component of the child components is determined. Using `useTunnel` in the parent component returns two function variables: the sender and the receiver. Then, the sender and receiver are transmitted to the child components via props, as shown below. Figure 5 As shown, the sender is passed as props to multiple child components A (e.g., A1 and A2), and the receiver is passed as props to multiple child components B (e.g., B1 and B2). In the code example below, the `useTunnel` hook is used in the parent component, and the two function variables, sender and receiver, are passed as child component props to multiple child components A and B respectively.
[0064]
[0065] In step S3, the usage of the sender function obtained by child component A from props is implemented. In `useTunnel`, the sender function is called and retrieves the data. First, all fallback functions are retrieved from the fallbackRef cache, and then each fallback function is called to send the data. This achieves multiple child components acting as instances of the sender.
[0066] In step S4, the usage of the receiver function obtained by child component B from props is implemented. In child component B, the receiver function is called, passing in two parameters: a name and a callback function `fallback`. The name and callback function `fallback` are stored as key-value pairs in the `useTunnel`'s cache `fallbackRef`. When the sender sends data, it first retrieves all injected callback functions from the `fallbackRef` cache and calls them one by one with the passed-in data. This allows multiple child components to receive the data sent by the sender.
[0067] However, it's important to note that in multiple child components B, such as B1 and B2, the first parameter name (name) of the receiver function cannot be the same. This is because the `fallbackRef` in the `useTunnel` cache stores a key-value pair object, using the name (name) as the primary key and the callback function (fallback) as the value. If two or more child components use the same name (name), the callback function that was first called by the receiver and injected into the `fallbackRef` will be overwritten because of the identical name. When the sender sends the data (data) and retrieves all the callback functions from the `fallbackRef`, the initially injected fallback function cannot be found because of the identical name, and the data (data) will not be sent to the component that first called the receiver.
[0068] In multiple child components B, the first parameter name 'name' of the receiver function is defined by the caller. To ensure its uniqueness, the child component name can be used as the parameter name 'name', or the component document path and component name can be used together to construct the parameter name 'name'. This will ensure its uniqueness.
[0069] The above steps enable data to be sent from one or more child components and transmitted directly to one or more child components. During the data transfer process, it only passes through the useTunnel buffer and does not need to borrow other unrelated child components. This ensures that after the channel is established using the parent component, the data transmission process in the child components does not need to go through other components and can complete point-to-point data transmission.
[0070] The key point of this invention is: establishing a channel to achieve point-to-point data transmission.
[0071] Because React components are tree-structured, you first need to determine the common parent component for the two child components, and then pass the sender and receiver functions from the parent component to the two or more child components respectively.
[0072] Data is sent via the sender in subcomponent A, and the function is called via the receiver in subcomponent B using a callback function.
[0073] After establishing a channel through the parent component, child components can frequently pass data without causing the parent component and other child components to re-render, thus improving page rendering performance.
[0074] This invention enables the synchronous rendering of content entered into the input box to the title text component, such as... Figure 6 As shown, the specific implementation steps are as follows:
[0075] In the page components, implement useTunnel and obtain the sender and receiver. Then, pass the sender and receiver as props to the title text component and the input box component respectively.
[0076] When content is entered into the input box, the input box obtains the data through onChange and sends the data through the sender.
[0077] In the title text component, a receiver is implemented to listen for data. When the sender sends data, the receiver will directly obtain the data and render it in real time in this component.
[0078] On the other hand, the present invention provides a system for updating rendering between multiple sub-components based on React components, the system being used to implement the method for updating rendering between multiple sub-components based on React components according to the present invention.
[0079] This invention solves the problem of re-rendering other unnecessary components when two sub-components interact with each other by establishing a channel to directly connect multiple sub-components. The technical solution of this invention will not cause other components to be re-executed or re-rendered, thus preventing problems such as page crashes or lag caused by excessive rendering.
[0080] Any process or method described in the flowcharts of this invention or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing a particular logical function or process, achievable on any computer-readable medium for use by an instruction execution system, apparatus, or device. The computer-readable medium can be any medium containing a program for storage, communication, propagation, or transmission for use by an execution system, apparatus, or device, including read-only memory, magnetic disks, or optical disks.
[0081] In the description of this specification, references to terms such as "embodiment," "example," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the present invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, those skilled in the art can combine or combine the different embodiments or examples described in this specification and the features therein without causing contradiction.
[0082] While embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those skilled in the art can make changes, modifications, substitutions, and alterations to the above embodiments within the scope of the present invention.
Claims
1. A method for updating rendering between multiple child components based on React components, characterized in that, The method includes the following steps: Step S1. Create a hook named useTunnel to establish a point-to-point channel between React child component A and child component B. The hook returns two variables, namely receiver and sender. The sender is used to send data, and the receiver is used to directly obtain data. Step S2. Determine the common parent component of child component A and child component B. In the parent component, call useTunnelhooks to get the two variables senter and receiver returned by useTunnel. Then, pass these two variables as child component props to the corresponding child component A and child component B respectively. Step S3. In child component A, obtain the sender function variable passed from the parent component through props, and call the sender function to send the data to the callback function of the receiver function; Step S4. In child component B, obtain the receiver function variable passed from the parent component through props, and inject the callback function parameter into the receiver function in useEffect.
2. The method for updating and rendering multiple child components based on React components according to claim 1, characterized in that, In step S1, a buffer is created in the React environment using useTunnel. The receiver calls the receiver function to inject a parameterized function fallback into useTunnel. In the receiver function instance, this parameterized function fallback is cached in the useRef object fallbackRef.
3. The method for updating and rendering multiple child components based on React components according to claim 2, characterized in that, When the sender function is called, the data to be transmitted is passed in. In the sender function instance, the parameterized function fallback is obtained from the fallbackRef object and the data is called as the parameter. Thus, the data can be obtained in the fallback function instance injected by the receiver.
4. The method for updating and rendering multiple child components based on React components according to claim 1, characterized in that, In step S2, subcomponent A and subcomponent B obtain associated sender and receiver functions respectively; by using the sender and receiver functions in subcomponent A and subcomponent B respectively, a point-to-point communication channel is established between the subcomponents.
5. The method for updating and rendering multiple sub-components based on React components according to claim 1, characterized in that, In step S3, the sub-component A contains an input box component. When the user enters text in the input box, the onChange event is triggered, and the value entered by the user is obtained through e.target.value. When onChange is triggered, sender(e.target.value) is called to send the data to the receiver, thereby realizing the function of sending data from the point-to-point channel sender.
6. The method for updating and rendering multiple child components based on React components according to claim 1, characterized in that, In step S4, the content in useEffect is only executed during initialization when the React component is rendered multiple times, thus preventing the receiver from being executed multiple times.
7. The method for updating and rendering among multiple child components based on React components according to claim 6, characterized in that, When using the receiver, inject a name and a callback function fallback into it. This name and function will be stored in the useTunnel's buffer fallbackRef. When the sender is triggered to send data, useTunnel synchronously calls the cached fallbackRef callback function and passes the data as a parameter.
8. The method for updating and rendering among multiple child components based on React components according to claim 7, characterized in that, In the callback method instance, the data is synchronously obtained, so that the data sent from the child component A can be obtained in the child component B.
9. The method for updating and rendering multiple sub-components based on React components according to any one of claims 1-8, characterized in that, A channel is established between child component A and child component B. Data is transmitted directly from child component A to child component B without passing through the parent component. This ensures that only the re-rendering of child component B is affected, without affecting other components.
10. A system for updating rendering between multiple child components based on React components, characterized in that, The system is used to implement the method for updating rendering between multiple sub-components based on React components, as described in any one of claims 1-9.