Component state sharing method, apparatus, device, and computer-readable storage medium

Abstract

The application relates to the field of data processing and provides a component state sharing method, device and equipment and a computer readable storage medium, wherein the method comprises the following steps: when a first component state in a target webpage is updated, a first state change subscription corresponding to the first component is notified; when the first state change subscription receives a state change event, the state change event is transmitted to state change subscriptions corresponding to all components through a state change subscription set; and when the state change subscriptions corresponding to the components in the target webpage receive the state change event, the corresponding components are subjected to state updating according to state values and state change operations in the state change event. In the method, the state change subscriptions of different components are set, the state of each component in the target webpage is collected through the state change subscription when the state of the component in the target webpage is changed, the components whose states are updated are accurately triggered when the state is changed, and unnecessary component updating is avoided.

Description

Technical Field

[0001] This application relates to the field of data processing, and more particularly to a method, apparatus, device, and computer-readable storage medium for sharing component state. Background Technology

[0002] Currently, with the development of the World Wide Web (Web) technology, there are numerous form-filling scenarios in daily work and life, many of which involve different formats, multiple nested layers, combinations of form items, or complex scenarios requiring flexible addition or removal of form items. Technically, this increases the complexity and management difficulty of various form data states. Most mainstream data state management tools are now based on React's Context API, focusing on the sharing of component state. Since components need to communicate, when a state value on the Context changes, due to the lack of state dependency collection, all components using the Context will trigger an update, even if the state value that the component depends on on the Context has not been updated. Summary of the Invention

[0003] This application discloses a solution to the problem of unnecessary component updates caused by component state sharing in existing component state management processes.

[0004] The first aspect of this application provides a method for sharing component state; the method includes:

[0005] In response to a state change event of a first component in the target webpage, the state change event is notified to the first state change subscription corresponding to the first component, wherein the state change event is used to update the state of the first component based on the state value and the state change operation;

[0006] In response to the first state change subscription receiving the state change event, the state change event is transmitted to the state change subscriptions corresponding to components other than the first component in the target webpage through a preset state change subscription set;

[0007] In response to the state change subscription corresponding to each component in the target webpage receiving the state change event, the state change subscription that receives the state change event updates the state of the corresponding component according to the state value and state change operation in the state change event.

[0008] A second aspect of this application provides a component state sharing device applied to a target webpage. The target webpage includes multiple components, each component being bound to a corresponding state value and a state change operation. The target webpage has a corresponding state change subscription set, which includes state change subscriptions corresponding to each component in the target webpage. The component state sharing device includes:

[0009] The response notification module is used to respond to a state change event of a first component in the target webpage and notify the first state change subscription corresponding to the first component of the state change event, wherein the state change event is used to update the state of the first component according to the state value and the state change operation.

[0010] The update delivery module is used to respond to the first state change subscription receiving the state change event and to deliver the state change event to the state change subscriptions corresponding to the components other than the first component in the target webpage through a preset state change subscription set.

[0011] The shared update module is used to respond to the state change subscription corresponding to each component in the target webpage receiving the state change event, and update the state of the corresponding component according to the state value and state change operation in the state change event through the state change subscription that receives the state change event.

[0012] A third aspect of this application provides a component state sharing apparatus, comprising: a memory and at least one processor, wherein the memory stores instructions, and the memory and the at least one processor are interconnected via a line; the at least one processor invokes the instructions in the memory to cause the electronic device to perform the steps of the component state sharing method described above.

[0013] A fourth aspect of this application provides a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the steps of the component state sharing method described above.

[0014] This application responds to a state change event of a first component on a target webpage, notifying the first state change subscription corresponding to that component of the first state change event. The state change event involves updating the state of the first component based on its state value and a state change operation. When the first state change subscription receives the state change event, it propagates the event to the state change subscriptions corresponding to other components on the target webpage (excluding the first component) through a set of state change subscriptions. When each component's state change subscription receives the state change event, it updates the corresponding component's state based on the state value and state change operation within the event. This approach, by setting state change subscriptions for different components, ensures that when a component on the target webpage undergoes a state change, the state change subscriptions collect state dependencies for each component, accurately triggering updates to dependent components and avoiding unnecessary component updates.

[0015] Other features and advantages of this application will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the application. The objectives and other advantages of this application are realized and obtained through the structures particularly pointed out in the description, claims and drawings.

[0016] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0017] Figure 1 This is a schematic diagram of one embodiment of the component state sharing method in this application;

[0018] Figure 2 This is a schematic diagram of another embodiment of the component state sharing method in this application;

[0019] Figure 3 This is a schematic diagram of another embodiment of the component state sharing method in this application;

[0020] Figure 4 This is a schematic diagram of one embodiment of the component state sharing device in this application;

[0021] Figure 5 This is a schematic diagram of another embodiment of the component state sharing device in this application;

[0022] Figure 6 This is a schematic diagram of one embodiment of the electronic device described in this application. Detailed Implementation

[0023] This application provides a component state sharing method, apparatus, device, and computer-readable storage medium. In response to a state change event of a first component on a target webpage, the method notifies the first state change subscription corresponding to the first component of the state change event. The state change event involves updating the state of the first component based on a state value and a state change operation. When the first state change subscription receives the state change event, it transmits the event to the state change subscriptions corresponding to components on the target webpage other than the first component through a set of state change subscriptions. When each component's state change subscription on the target webpage receives the state change event, it updates the state of the corresponding component based on the state value and state change operation in the event. In this method, by setting state change subscriptions for different components, when a component on the target webpage undergoes a state change, the state change subscriptions collect the state dependencies of each component on the target webpage, ensuring that the state change accurately triggers updates to dependent components and avoids unnecessary component updates.

[0024] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in a sequence other than that illustrated or described herein. Furthermore, the terms “comprising” or “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0025] For ease of understanding, the specific process of the embodiments of this application is described below. Please refer to [link / reference]. Figure 1 The first embodiment of the component state sharing method in this application includes:

[0026] 101. In response to the state change event of the first component in the target webpage, notify the first state change subscription corresponding to the first component of the state change event, wherein the state change event is to update the state of the first component based on the state value and the state change operation;

[0027] It is understood that the executing entity of this application can be a component state sharing device, a terminal, or a server; no specific limitation is made here. This application's embodiments use a terminal as an example for illustration.

[0028] In this embodiment, the component state sharing method is applied to a target webpage, which includes multiple components. Each component is bound to a corresponding state value and a state change operation. The target webpage has a corresponding state change subscription set, which includes the state change subscriptions corresponding to each component in the target webpage.

[0029] Specifically, the target webpage is a webpage that uses the technical solution of this component state sharing method. The target webpage has multiple components. When there is only one component on the webpage, since there is no need for component state sharing, the technical solution of this method is not used. Therefore, the target webpage has at least two components. In practical applications, the components in a webpage refer to various elements, parts or controls on the page, such as buttons, text boxes, drop-down menus, check boxes, radio buttons, scroll bars and images, etc. The state of a component refers to the data and variables inside the component. These data and variables can be passed and managed through the component's props and state. The state of a component can change with user interaction and the passage of time, thereby affecting the presentation and behavior of the component.

[0030] In this embodiment, the component that interacts with the user on the target webpage is called the first component, or the component that experiences a state change event is called the first component. The state of the component can be updated in various situations. For example, when the user interacts with the component, including clicking a button or entering a text box, the state of the component may change, thereby triggering the re-rendering of the component. When there is a state update of the component on the target webpage, a state change event is generated and notified to the first state change subscription corresponding to the first component.

[0031] 102. In response to the first state change subscription receiving a state change event, the state change event is passed to the state change subscriptions of the components other than the first component on the target webpage through the preset state change subscription set;

[0032] In this embodiment, state change subscription refers to the ability in React to perform custom operations when a component's state changes by subscribing to its state changes. This can be achieved using React's lifecycle methods componentDidUpdate() and getDerivedStateFromProps(). By comparing the differences between the previous and current states, it can be determined whether the component's state has changed, and thus perform some custom operations. In this embodiment, the custom operation is to notify the component's state change event to the state change subscription set, which includes the state change subscriptions corresponding to each component in the target webpage.

[0033] 103. In response to the state change subscriptions corresponding to each component in the target webpage receiving state change events, the state change subscriptions that receive state change events update the state of the corresponding components according to the state value and state change operation in the state change events.

[0034] In this embodiment, when the state change subscription set corresponding to the target webpage contains a state change subscription for a component that has undergone a state update, the state change subscription set will notify the state change subscriptions of other components of the state change event. The state change subscriptions will determine whether to update the state of the corresponding component based on the state value and state change operation in the state change event. For example, the state storage defines state values ​​a and b and a state change operation W. Component 1 and Component 2 are bound to state value a, and Component 3 is bound to state value b. If a state change operation W is executed in Component 1 (which modifies state value a), Component 1 will update its state. Component 1 will then obtain the latest state value a and update its component. Component 2, which uses state value a, will also obtain the latest state value a and update its component. However, Component 3, which is bound to state value b, will not update its component's state.

[0035] In this embodiment, in response to a state change event of a first component on the target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event involves updating the state of the first component based on its state value and a state change operation. When the first state change subscription receives the state change event, it transmits the event to the state change subscriptions corresponding to components on the target webpage other than the first component through the state change subscription set. When each component's state change subscription receives the state change event, it updates the state of the corresponding component based on the state value and state change operation in the event. This approach, by setting state change subscriptions for different components, collects state dependencies for each component on the target webpage when a component's state changes, ensuring that state changes accurately trigger updates to dependent components and avoiding unnecessary component updates.

[0036] Please see Figure 2 Another embodiment of the component state sharing method in this application includes:

[0037] 201. Create a centralized state store corresponding to the target webpage and proxy objects and state change subscriptions corresponding to each component in the target webpage. The centralized state store includes a set of state change subscriptions and a set of states. The set of states includes multiple state values ​​and state change operations corresponding to each state value.

[0038] In this embodiment, the `createState` method is used to create a centralized state store. The input parameter of this method is a method that defines a state set and state change operations, referred to as parameter 'a'. The output parameter is a React Hook method, referred to as `useState`, which is used in page components to obtain state values ​​and perform state change operations. This centralized state store includes a state set `state` and a state change subscription set `subscribers`. The state set includes state values ​​and state change operations. The state change operations use the state set to retrieve and assign values. Retrieving values ​​retrieves the latest state value, assigning values ​​modifies the state value, and notifying the state change subscription set.

[0039] Specifically, the parameter `a` takes two methods as input: a getter method and an assigner method. The former retrieves the latest state value, and the latter modifies it. The output parameter is an object that defines the state set and state change operations for this state storage. In the `createState` method, an array of state change subscription sets is defined. The `a` method is executed, and its output parameter is stored in the defined centralized state storage. When executing the `a` method, it is provided with the getter and assigner methods as input parameters. The assigner method modifies the latest value of `store` and iterates through the array of state change subscription sets, executing the methods in the array. Here, the input parameter is the latest value of `store`, meaning the state change subscription methods can retrieve the latest `store` value. The getter method simply returns the stored state value.

[0040] 202. Based on the preset component states of each component, select the corresponding state value from the state set, and bind the selected state value and the corresponding state change operation to the corresponding proxy object;

[0041] In this embodiment, a proxy object is used to collect state dependencies. The proxy object is a built-in JavaScript ES6 object used to create a proxy for an object, thereby enabling the interception and customization of basic operations. In the useState method, a proxy object is created. The proxy object is bound to the state value (value x) and the state change operation (action x) to ensure that the state value and state change operation are retrieved from the centralized state storage state set.

[0042] 203. By establishing the correspondence between each component and its corresponding proxy object, bind the state value to the proxy object and the corresponding state change operation to the corresponding component.

[0043] In this embodiment, since there is a correspondence between the Proxy object and the component, the Proxy object is bound to the state value (value x) and the state change operation (action x), which is equivalent to the component being bound to the corresponding state value. For example, the state storage defines state values ​​a and b and the state change operation W. Component 1 and Component 2 are bound to state value a, and Component 3 is bound to state value b.

[0044] 204. Obtain the state change subscriptions corresponding to each component in the target webpage, and store all component state change subscriptions in the state change subscription set;

[0045] It should be noted that a state change subscription callback method is added to the state change subscription set in the centralized state store beforehand. In this callback method, assigning the state store value to the Proxy object will trigger the Proxy object's set method. Then, the component update is executed according to the flag. The criteria for judging this flag are whether the changed value is a state value that the Proxy object has proxied and accessed, and whether there has actually been a change through a shallow comparison.

[0046] 205. In response to a webpage operation on the first component of the target webpage, determine whether to update the state of the first component;

[0047] In this embodiment, when a user interacts with the first component, that is, when the user performs a webpage operation on the first component in the target webpage, the webpage operation may include clicking a button or entering a text box. The state of the component may change, thereby triggering the re-rendering of the component, and determining whether to update the state of the first component.

[0048] 206. If so, execute the value retrieval operation of the state change operation bound to the first component, and obtain the state value snapshot of the corresponding state value from the state set of the centralized state storage;

[0049] In this embodiment, the state change operation is retrieved through the Proxy object. When retrieving the value for the first time, a snapshot of the state value and the state change operation is obtained. Subsequent values ​​are retrieved from the Proxy object itself.

[0050] 207. Assign values ​​to the corresponding state values ​​of the first component based on the state value snapshot, obtain the assignment results, and update the state of the first component based on the assignment results;

[0051] In this embodiment, the state of the first component is updated based on the obtained state value snapshot. Using snapshots can improve development efficiency because it can quickly check whether the rendering output of the component is correct, without having to manually check the attributes and styles of each element.

[0052] 208. When the first component completes its state update, a corresponding state change event is generated;

[0053] In this embodiment, in addition to being triggered by webpage operations, when a component's lifecycle method is called, such as componentDidUpdate(), the component's state may be updated to reflect new data or state, thereby triggering the component's re-rendering. This embodiment of the invention does not limit the way in which the component in the target webpage triggers state updates.

[0054] 209. In response to the state change event of the first component in the target webpage, notify the first state change subscription corresponding to the first component of the state change event, wherein the state change event is to update the state of the first component based on the state value and the state change operation;

[0055] 210. In response to the first state change subscription receiving a state change event, the state change event is passed to the state change subscriptions of the components other than the first component on the target webpage through the preset state change subscription set;

[0056] 211. In response to the state change subscriptions corresponding to each component in the target webpage receiving state change events, the state change subscriptions that receive state change events update the state of the corresponding components according to the state value and state change operation in the state change events.

[0057] In this embodiment, steps 209-211 are similar to steps 101-103 in the first embodiment, and will not be described again here.

[0058] In this embodiment, in response to a state change event of a first component on the target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event involves updating the state of the first component based on its state value and a state change operation. When the first state change subscription receives the state change event, it transmits the event to the state change subscriptions corresponding to components on the target webpage other than the first component through the state change subscription set. When each component's state change subscription receives the state change event, it updates the state of the corresponding component based on the state value and state change operation in the event. This approach, by setting state change subscriptions for different components, collects state dependencies for each component on the target webpage when a component's state changes, ensuring that state changes accurately trigger updates to dependent components and avoiding unnecessary component updates.

[0059] Please see Figure 3 Another embodiment of the component state sharing method in this application includes:

[0060] 301. In response to a state change event of the first component in the target webpage, notify the first state change subscription corresponding to the first component of the state change event, wherein the state change event is to update the state of the first component based on the state value and the state change operation.

[0061] 302. In response to the first state change subscription receiving a state change event, the state change event is passed to the state change subscriptions corresponding to the components in the target webpage other than the first component through a preset set of state change subscriptions;

[0062] In this embodiment, steps 301-302 are similar to steps 101-102 in the first quantity, and will not be described in detail here.

[0063] 303. Responding to the state change subscriptions corresponding to each component in the target webpage receiving state change events, determine whether the corresponding proxy object is bound to the state value of the state change event by receiving the state change subscriptions.

[0064] In this embodiment, the `createState` method is used to create a centralized state store. This centralized state store includes a set of state change subscriptions. When a component uses this state set, it creates a state change subscription, which is then added to the state subscription set in the centralized state store; that is, the former is one of the latter. When the state change subscription set corresponding to the target webpage contains a state change subscription of a component that has undergone a state update, the state change subscription set will notify the state change subscriptions of other components of this state change event.

[0065] Specifically, the criteria for judgment are to determine whether the changed value is a state value that the Proxy object has proxied and accessed, and to determine whether there has indeed been a change through a shallow comparison.

[0066] 304. If so, then determine whether the state value of the state change event has changed by subscribing to the state change event received;

[0067] In this embodiment, shallow comparison refers to comparing whether the values ​​of two objects are equal. It only compares the values ​​themselves and does not involve the internal structure or state of the objects. Shallow comparison is commonly used to determine whether two objects are equal, and it can compare variables of basic data types, strings, and other value types.

[0068] 305. If a change occurs, obtain a snapshot of the state value corresponding to the state value in the state change event based on the value of the state change operation in the state change event.

[0069] In this embodiment, when the state change subscription that receives the state change event determines that the state value of the state change event has changed, it obtains a snapshot of the state value corresponding to the state value in the state change event based on the value retrieval operation of the state change operation in the state change event.

[0070] 306. Based on the value of the state change operation in the state change event, assign the state value to the corresponding component bound to the state change subscription that receives the state change event by taking the state value snapshot;

[0071] In this embodiment, the state of the corresponding component is updated based on the state change subscription that receives the state change event according to the obtained state value snapshot. Using snapshots can improve development efficiency because it can quickly check whether the rendering output of the component is correct, without having to manually check the attributes and styles of each element.

[0072] 307. Update the state of the corresponding component based on the assigned state value.

[0073] In this embodiment, in the state change subscription corresponding to the component, the latest state set is assigned to the Proxy object as the latest state set snapshot, and the component update is performed as needed.

[0074] In this embodiment, in response to a state change event of a first component on the target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event involves updating the state of the first component based on its state value and a state change operation. When the first state change subscription receives the state change event, it propagates the event to the state change subscriptions corresponding to components on the target webpage other than the first component through the state change subscription set. When each component's state change subscription receives the state change event, it updates the state of the corresponding component based on the state value and state change operation in the event. This approach, by setting state change subscriptions for different components, collects state dependencies for each component on the target webpage when a component's state changes, ensuring that state changes accurately trigger updates to dependent components and avoiding unnecessary component updates.

[0075] The component state sharing method in the embodiments of this application has been described above. The component state sharing apparatus in the embodiments of this application is described below; please refer to... Figure 4 One embodiment of the component state sharing device in this application includes:

[0076] The response notification module 401 is used to respond to a state change event of a first component in the target webpage and notify the first state change subscription corresponding to the first component of the state change event, wherein the state change event is used to update the state of the first component according to the state value and the state change operation.

[0077] The update delivery module 402 is used to respond to the first state change subscription receiving the state change event and to deliver the state change event to the state change subscription corresponding to the components other than the first component in the target webpage through a preset state change subscription set.

[0078] The shared update module 403 is used to respond to the state change subscription corresponding to each component in the target webpage receiving the state change event, and update the state of the corresponding component according to the state value and state change operation in the state change event through the state change subscription that receives the state change event.

[0079] In this embodiment, in response to a state change event of a first component on the target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event involves updating the state of the first component based on its state value and a state change operation. When the first state change subscription receives the state change event, it transmits the event to the state change subscriptions corresponding to components on the target webpage other than the first component through the state change subscription set. When each component's state change subscription receives the state change event, it updates the state of the corresponding component based on the state value and state change operation in the event. This approach, by setting state change subscriptions for different components, collects state dependencies for each component on the target webpage when a component's state changes, ensuring that state changes accurately trigger updates to dependent components and avoiding unnecessary component updates.

[0080] Please see Figure 5 Another embodiment of the component state sharing device in this application includes:

[0081] The response notification module 401 is used to respond to a state change event of a first component in the target webpage and notify the first state change subscription corresponding to the first component of the state change event, wherein the state change event is used to update the state of the first component according to the state value and the state change operation.

[0082] The update delivery module 402 is used to respond to the first state change subscription receiving the state change event and to deliver the state change event to the state change subscription corresponding to the components other than the first component in the target webpage through a preset state change subscription set.

[0083] The shared update module 403 is used to respond to the state change subscription corresponding to each component in the target webpage receiving the state change event, and update the state of the corresponding component according to the state value and state change operation in the state change event through the state change subscription that receives the state change event.

[0084] In one feasible implementation, the component state sharing device further includes a storage creation module 404, which is specifically used for:

[0085] Create a centralized state store corresponding to the target webpage, as well as proxy objects and state change subscriptions corresponding to each component in the target webpage. The centralized state store includes the state change subscription set and the state set. The state set includes multiple state values ​​and state change operations corresponding to each state value.

[0086] In one feasible implementation, the component state sharing device further includes a proxy binding module 405, which is specifically used for:

[0087] Based on the preset component states of each component, select the corresponding state value from the state set, and bind the selected state value and the corresponding state change operation to the corresponding proxy object;

[0088] By establishing a correspondence between each component and its corresponding proxy object, the state values ​​bound to the proxy object and the corresponding state change operations are bound to the corresponding components.

[0089] Obtain the state change subscriptions corresponding to each component in the target webpage, and store the state change subscriptions of all components in the state change subscription set.

[0090] In one feasible implementation, the state change operation includes a value retrieval operation and a value assignment operation; the component state sharing device further includes a response update module 406, which is specifically used for:

[0091] In response to a webpage operation on a first component in the target webpage, determine whether to update the state of the first component;

[0092] If so, then execute the value retrieval operation of the state change operation bound to the first component, and obtain the state value snapshot of the corresponding state value from the state set of the centralized state storage;

[0093] The state value corresponding to the first component is assigned a value based on the state value snapshot to obtain the assignment result, and the state of the first component is updated based on the assignment result.

[0094] When the first component completes the state update, it generates a corresponding state change event.

[0095] In one feasible implementation, the shared update module 403 specifically includes:

[0096] The binding judgment unit 4031 is used to respond to the state change subscription corresponding to each component in the target webpage receiving the state change event, and to determine whether the corresponding proxy object is bound to the state value of the state change event by receiving the state change subscription of the state change event.

[0097] The change judgment unit 4032 is used to determine whether the state value of the state change event has changed by receiving the state change subscription of the state change event when the corresponding proxy object is bound to the state value of the state change event.

[0098] The state update unit 4033 is used to update the state of the corresponding component according to the state value and state change operation in the state change event when the state value of the state change event changes.

[0099] In one feasible implementation, the change determination unit 4032 is specifically used for:

[0100] A shallow comparison is performed between the state value bound to the corresponding component of the state change subscription that receives the state change event and the state value of the state change event to obtain the shallow comparison result.

[0101] If the shallow comparison results are the same, then the state value of the state change event has not changed;

[0102] If the shallow comparison results are different, the state value of the state change event changes.

[0103] In one feasible implementation, the state update unit 4033 is specifically used for:

[0104] Obtain a snapshot of the state value corresponding to the state value in the state change event based on the value taken by the state change operation in the state change event;

[0105] The state value snapshot is used to assign values ​​to the state values ​​of the corresponding components bound to the state change subscription that receives the state change event, based on the value of the state change operation in the state change event.

[0106] Update the state of the corresponding component based on the assigned state value.

[0107] In this embodiment, in response to a state change event of a first component on the target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event involves updating the state of the first component based on its state value and a state change operation. When the first state change subscription receives the state change event, it propagates the event to the state change subscriptions corresponding to components on the target webpage other than the first component through the state change subscription set. When each component's state change subscription receives the state change event, it updates the state of the corresponding component based on the state value and state change operation in the event. This approach, by setting state change subscriptions for different components, collects state dependencies for each component on the target webpage when a component's state changes, ensuring that state changes accurately trigger updates to dependent components and avoiding unnecessary component updates.

[0108] above Figure 4 and Figure 5 The component state sharing device in the embodiments of this application is described in detail from the perspective of modular functional entities. The electronic device in the embodiments of this application is described in detail from the perspective of hardware processing.

[0109] Figure 6 This is a schematic diagram of the structure of an electronic device 600 provided in an embodiment of this application. The electronic device 600 can vary significantly due to different configurations or performance. It may include one or more central processing units (CPUs) 610 (e.g., one or more processors) and a memory 620, and one or more storage media 630 (e.g., one or more mass storage devices) for storing application programs 633 or data 632. The memory 620 and storage media 630 can be temporary or persistent storage. The program stored in the storage media 630 may include one or more modules (not shown in the diagram), each module including a series of instruction operations on the electronic device 600. Furthermore, the processor 610 may be configured to communicate with the storage media 630 and execute a series of instruction operations on the electronic device 600 to achieve the following steps:

[0110] In response to a state change event of the first component on the target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event is used to update the state of the first component based on its state value and state change operation. Upon receiving a state change event, the first state change subscription transmits the event to the state change subscriptions corresponding to all components on the target webpage except the first component through a preset set of state change subscriptions. Upon receiving a state change event, each state change subscription corresponding to a component on the target webpage updates the state of its corresponding component based on the state value and state change operation in the state change event. In this approach, by setting state change subscriptions for different components, when a component on the target webpage undergoes a state change, the state change subscriptions collect the state dependencies of each component on the target webpage, ensuring that state changes accurately trigger updates to components that depend on the state, thus avoiding unnecessary component updates.

[0111] Optionally, before responding to the state change event of the first component in the target webpage and notifying the first state change subscription corresponding to the first component, the method further includes: creating a centralized state store corresponding to the target webpage and proxy objects and state change subscriptions corresponding to each component in the target webpage, wherein the centralized state store includes a set of state change subscriptions and a state set, and the state set includes multiple state values ​​and state change operations corresponding to each state value.

[0112] The above method creates a centralized state store, which includes a state change subscription set for each component, as well as pre-defined state values ​​for different states stored in the state set for subsequent state updates.

[0113] Optionally, after creating the centralized state storage corresponding to the target webpage and the proxy objects and state change subscriptions corresponding to each component in the target webpage, the method further includes: selecting the corresponding state value from the state set according to the preset component state of each component, and binding the selected state value and the corresponding state change operation to the corresponding proxy object; binding the state value bound to the proxy object and the corresponding state change operation to the corresponding component through the correspondence between each component and the corresponding proxy object; obtaining the state change subscriptions corresponding to each component in the target webpage, and storing the state change subscriptions of all components in the state change subscription set.

[0114] The above method binds the selected state value and the corresponding state change operation to the corresponding proxy object, and the state dependency collection can be achieved based on the proxy object.

[0115] Optionally, the state change operation includes a value retrieval operation and a value assignment operation; before notifying the first state change subscription corresponding to the first component of the first component of the target webpage of the state change event in response to the state change event of the first component of the target webpage, the method further includes: in response to the webpage operation on the first component of the target webpage, determining whether to update the state of the first component; if so, executing the value retrieval operation of the state change operation bound to the first component, obtaining a state value snapshot of the corresponding state value from the state set of the centralized state storage; assigning a value to the state value corresponding to the first component according to the state value snapshot, obtaining the assignment result, and updating the state of the first component according to the assignment result; when the first component completes the state update, generating the corresponding state change event.

[0116] The above method obtains a snapshot of the corresponding state value through a centralized state storage state set, which can obtain the latest state value of the corresponding state and avoid the component being updated to a state that does not meet the requirements.

[0117] Optionally, the above-mentioned response to receiving a state change event from the state change subscription corresponding to each component in the target webpage, and updating the state of the corresponding component based on the state value and state change operation in the state change event through the state change subscription that received the state change event, includes: responding to receiving a state change event from the state change subscription corresponding to each component in the target webpage, determining whether the corresponding proxy object is bound to the state value of the state change event through the state change subscription that received the state change event; if so, determining whether the state value of the state change event has changed through the state change subscription that received the state change event; if it has changed, updating the state of the corresponding component based on the state value and state change operation in the state change event.

[0118] The above method updates the state of eligible components by making a dual judgment on whether the proxy object is bound to the state value of the state change event and whether the state value has changed.

[0119] Optionally, the above method of determining whether the state value of a state change event has changed by receiving a state change subscription includes: performing a shallow comparison between the state value bound to the corresponding component and the state value of the state change event for the state change subscription receiving the state change event, and obtaining a shallow comparison result; if the shallow comparison result is the same, then the state value of the state change event has not changed; if the shallow comparison result is different, then the state value of the state change event has changed.

[0120] The above method makes judgments through shallow comparisons, without needing to traverse the internal structure or state of the object, thus it is relatively fast and enables rapid sharing and updating of state.

[0121] Optionally, the above-mentioned state update of the corresponding component based on the state value and state change operation in the state change event includes: obtaining a state value snapshot corresponding to the state value in the state change event based on the value of the state change operation in the state change event; assigning the state value bound to the corresponding component of the state change subscription receiving the state change event based on the value of the state change operation in the state change event using the state value snapshot; and updating the state of the corresponding component based on the assigned state value.

[0122] The above method obtains a snapshot of the corresponding state value through value retrieval and assignment operations to update the state, thus avoiding the component from being updated to a state that does not meet the requirements.

[0123] Electronic device 600 may also include one or more power supplies 640, one or more wired or wireless network interfaces 650, one or more input / output interfaces 660, and / or one or more operating systems 631, such as Windows Server, Mac OS X, Unix, Linux, FreeBSD, etc. Those skilled in the art will understand that... Figure 6 The illustrated electronic device structure does not constitute a limitation on the electronic device provided in this application. It may include more or fewer components than illustrated, or combine certain components, or have different component arrangements.

[0124] This application also provides a computer-readable storage medium, which can be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. The computer-readable storage medium stores instructions that, when executed on a computer, cause the computer to perform the following steps:

[0125] In response to a state change event of the first component on the target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event is used to update the state of the first component based on its state value and state change operation. Upon receiving a state change event, the first state change subscription transmits the event to the state change subscriptions corresponding to all components on the target webpage except the first component through a preset set of state change subscriptions. Upon receiving a state change event, each state change subscription corresponding to a component on the target webpage updates the state of its corresponding component based on the state value and state change operation in the state change event. In this approach, by setting state change subscriptions for different components, when a component on the target webpage undergoes a state change, the state change subscriptions collect the state dependencies of each component on the target webpage, ensuring that state changes accurately trigger updates to components that depend on the state, thus avoiding unnecessary component updates.

[0126] Optionally, before responding to the state change event of the first component in the target webpage and notifying the first state change subscription corresponding to the first component, the method further includes: creating a centralized state store corresponding to the target webpage and proxy objects and state change subscriptions corresponding to each component in the target webpage, wherein the centralized state store includes a set of state change subscriptions and a state set, and the state set includes multiple state values ​​and state change operations corresponding to each state value.

[0127] The above method creates a centralized state store, which includes a state change subscription set for each component, as well as pre-defined state values ​​for different states stored in the state set for subsequent state updates.

[0128] Optionally, after creating the centralized state storage corresponding to the target webpage and the proxy objects and state change subscriptions corresponding to each component in the target webpage, the method further includes: selecting the corresponding state value from the state set according to the preset component state of each component, and binding the selected state value and the corresponding state change operation to the corresponding proxy object; binding the state value bound to the proxy object and the corresponding state change operation to the corresponding component through the correspondence between each component and the corresponding proxy object; obtaining the state change subscriptions corresponding to each component in the target webpage, and storing the state change subscriptions of all components in the state change subscription set.

[0129] The above method binds the selected state value and the corresponding state change operation to the corresponding proxy object, and the state dependency collection can be achieved based on the proxy object.

[0130] Optionally, the state change operation includes a value retrieval operation and a value assignment operation; before notifying the first state change subscription corresponding to the first component of the first component of the target webpage of the state change event in response to the state change event of the first component of the target webpage, the method further includes: in response to the webpage operation on the first component of the target webpage, determining whether to update the state of the first component; if so, executing the value retrieval operation of the state change operation bound to the first component, obtaining a state value snapshot of the corresponding state value from the state set of the centralized state storage; assigning a value to the state value corresponding to the first component according to the state value snapshot, obtaining the assignment result, and updating the state of the first component according to the assignment result; when the first component completes the state update, generating the corresponding state change event.

[0131] The above method obtains a snapshot of the corresponding state value through a centralized state storage state set, which can obtain the latest state value of the corresponding state and avoid the component being updated to a state that does not meet the requirements.

[0132] Optionally, the above-mentioned response to receiving a state change event from the state change subscription corresponding to each component in the target webpage, and updating the state of the corresponding component based on the state value and state change operation in the state change event through the state change subscription that received the state change event, includes: responding to receiving a state change event from the state change subscription corresponding to each component in the target webpage, determining whether the corresponding proxy object is bound to the state value of the state change event through the state change subscription that received the state change event; if so, determining whether the state value of the state change event has changed through the state change subscription that received the state change event; if it has changed, updating the state of the corresponding component based on the state value and state change operation in the state change event.

[0133] The above method updates the state of eligible components by making a dual judgment on whether the proxy object is bound to the state value of the state change event and whether the state value has changed.

[0134] Optionally, the above method of determining whether the state value of a state change event has changed by receiving a state change subscription includes: performing a shallow comparison between the state value bound to the corresponding component and the state value of the state change event for the state change subscription receiving the state change event, and obtaining a shallow comparison result; if the shallow comparison result is the same, then the state value of the state change event has not changed; if the shallow comparison result is different, then the state value of the state change event has changed.

[0135] The above method makes judgments through shallow comparisons, without needing to traverse the internal structure or state of the object, thus it is relatively fast and enables rapid sharing and updating of state.

[0136] Optionally, the above-mentioned state update of the corresponding component based on the state value and state change operation in the state change event includes: obtaining a state value snapshot corresponding to the state value in the state change event based on the value of the state change operation in the state change event; assigning the state value bound to the corresponding component of the state change subscription receiving the state change event based on the value of the state change operation in the state change event using the state value snapshot; and updating the state of the corresponding component based on the assigned state value.

[0137] The above method obtains a snapshot of the corresponding state value through value retrieval and assignment operations to update the state, thus avoiding the component from being updated to a state that does not meet the requirements.

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

[0139] 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 various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0140] The above-described 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 method for sharing component state, characterized in that, The component state sharing method includes: In response to a state change event of a first component in a target webpage, the state change event is notified to the first state change subscription corresponding to the first component. The state change event is used to update the state of the first component based on the state value and the state change operation. The state change operation includes a value retrieval operation and a value assignment operation. In response to the first state change subscription receiving the state change event, the state change event is transmitted to the state change subscriptions corresponding to components other than the first component in the target webpage through a preset state change subscription set; In response to the state change subscription corresponding to each component in the target webpage receiving the state change event, the corresponding proxy object is determined to be bound to the state value of the state change event by the state change subscription that received the state change event. If so, then determine whether the state value of the state change event has changed by receiving the state change event subscription; If a change occurs, the state change operation in the state change event is executed to update the state value in the corresponding component to the state value in the state change event.

2. The component state sharing method according to claim 1, characterized in that, Before notifying the first state change subscription corresponding to the first component of the state change event in response to the state change event of the first component in the target webpage, the method further includes: Create a centralized state store corresponding to the target webpage, as well as proxy objects and state change subscriptions corresponding to each component in the target webpage. The centralized state store includes the state change subscription set and the state set. The state set includes multiple state values ​​and state change operations corresponding to each state value.

3. The component state sharing method according to claim 2, characterized in that, After creating the centralized state store corresponding to the target webpage and the proxy objects and state change subscriptions corresponding to each component in the target webpage, the method further includes: Based on the preset component states of each component, select the corresponding state value from the state set, and bind the selected state value and the corresponding state change operation to the corresponding proxy object; By establishing a correspondence between each component and its corresponding proxy object, the state values ​​bound to the proxy object and the corresponding state change operations are bound to the corresponding components. Obtain the state change subscriptions corresponding to each component in the target webpage, and store the state change subscriptions of all components in the state change subscription set.

4. The component state sharing method according to claim 2, characterized in that, Before notifying the first state change subscription corresponding to the first component of the state change event in response to the state change event of the first component in the target webpage, the method further includes: In response to a webpage operation on a first component in the target webpage, determine whether to update the state of the first component; If so, then execute the value retrieval operation of the state change operation bound to the first component, and obtain the state value snapshot of the corresponding state value from the state set of the centralized state storage; The state value corresponding to the first component is assigned a value based on the state value snapshot to obtain the assignment result, and the state of the first component is updated based on the assignment result. When the first component completes the state update, it generates a corresponding state change event.

5. The component state sharing method according to claim 1, characterized in that, The step of determining whether the state value of a state change event has changed by receiving a state change event subscription includes: A shallow comparison is performed between the state value bound to the corresponding component of the state change subscription that receives the state change event and the state value of the state change event to obtain the shallow comparison result. If the shallow comparison results are the same, then the state value of the state change event has not changed; If the shallow comparison results are different, the state value of the state change event changes.

6. The component state sharing method according to claim 1, characterized in that, The step of executing the state change operation in the state change event to update the state value in the corresponding component to the state value of the state change event includes: Obtain a snapshot of the state value corresponding to the state value in the state change event based on the value taken by the state change operation in the state change event; The state value snapshot is used to assign values ​​to the state values ​​of the corresponding components bound to the state change subscription that receives the state change event, based on the value of the state change operation in the state change event. Update the state of the corresponding component based on the assigned state value.

7. A component state sharing device, characterized in that, The component state sharing device includes: The response notification module is used to respond to a state change event of a first component in the target webpage and notify the first state change subscription corresponding to the first component of the state change event. The state change event is used to update the state of the first component according to the state value and the state change operation. The state change operation includes a value retrieval operation and a value assignment operation. The update delivery module is used to respond to the first state change subscription receiving the state change event and to deliver the state change event to the state change subscriptions corresponding to the components other than the first component in the target webpage through a preset state change subscription set. The shared update module is used to respond to the state change subscription corresponding to each component in the target webpage receiving the state change event, and to determine whether the corresponding proxy object is bound to the state value of the state change event by receiving the state change subscription of the state change event; if so, it determines whether the state value of the state change event has changed by receiving the state change subscription of the state change event; if it has changed, it executes the state change operation in the state change event to update the state value in the corresponding component to the state value in the state change event.

8. An electronic device, characterized in that, The electronic device includes: a memory and at least one processor, wherein the memory stores instructions; The at least one processor invokes the instructions in the memory to cause the electronic device to execute the component state sharing method as described in any one of claims 1-6.

9. A computer-readable storage medium storing instructions thereon, characterized in that, When the instruction is executed by the processor, it implements the component state sharing method as described in any one of claims 1-6.

Images