A binary bit-mask-based react component state penetration and broadcast method, system and application

Abstract

The application provides a binary bitmask-based React component state penetration and broadcast method, system and application, and relates to the front-end application development technical field.The binary bitmask is introduced into the React state management, and the state identification and query with O(1) time complexity are realized through the bit operation.The cross-level state update is realized through the global state management and component ID mapping, and the performance loss of the props step-by-step transmission in the deep component tree is avoided.The subscription matching with O(1) time complexity is realized through the bitmask operation, and the subscription matching efficiency is improved.The state change filtering query based on the field level is realized in combination with the bitmask technology, and the log retrieval accurate to the field level is supported.Compared with the prior art, the application has significant advantages in the state penetration capability, subscription accuracy, time complexity and rendering performance, and is particularly outstanding in large React applications, real-time data applications and performance-sensitive applications.

Description

Technical Field

[0001] This invention relates to the field of front-end application development technology, and in particular to state management and component communication technology in front-end applications. Specifically, it relates to a method, system, and application for React component state penetration and broadcasting based on binary bitmasks. Background Technology

[0002] React, as a mainstream front-end development framework, greatly improves development efficiency and code maintainability through its component-based approach. However, in complex application scenarios, state sharing and data communication between multiple components often become particularly complex. Existing solutions suffer from the following technical shortcomings:

[0003] 1. The Context API incurs significant performance overhead when passing data through deep nested components. When the component tree is deep, updates to the Context's Provider cause all components consuming that Context to re-render, even if these components haven't used the changed data. In large applications, the Context can become a performance bottleneck, leading to unnecessary re-rendering and performance degradation. When deep components access the Context state, intermediate components may also be affected, resulting in unexpected rendering behavior.

[0004] 2. State management libraries like Redux require a lot of boilerplate code. Redux requires defining multiple concepts such as Action Types, ActionCreators, and Reducers, increasing code complexity. Simple state updates require writing multiple files and functions, increasing development and maintenance costs. The learning curve is steep; novice developers need to master multiple concepts to use it correctly; it appears overly complex and redundant in small applications.

[0005] 3. Cross-level component communication requires passing props layer by layer. When two components that are not in a parent-child relationship need to share state, props must be passed through intermediate components. This violates the encapsulation principle, making intermediate components bear unnecessary data transmission responsibilities. When the component hierarchy changes, multiple prop transmission logics need to be modified, increasing maintenance difficulty. In complex component trees, it is difficult to track data flow, reducing code readability.

[0006] 4. Lack of precise control over the granularity of state subscription. Existing state management solutions typically only allow for coarse-grained subscriptions, preventing components from precisely controlling which state fields they listen for changes in. When a part of a state object changes, all consumers of the object receive an update notification, leading to unnecessary re-rendering. This prevents true local updates, impacting application performance; in complex applications, it's difficult to accurately predict which components will re-render due to state changes. Summary of the Invention

[0007] Objective of the Invention: The objective of the present invention is to propose a method, system and application for React component state penetration and broadcasting based on binary bit masks, which realizes precise subscription matching of time complexity through bit masks, realizes cross-level state penetration through global state management and component ID mapping, and realizes precise state change tracking through bit mask logs. The solution of the present invention can greatly reduce the memory pressure of the server.

[0008] In the first aspect of the present invention, a method for React component state penetration and broadcasting based on binary bit masks is proposed, and the method includes:

[0009] S1. Construct a state bit mask registry, assign a unique binary bit identifier to each state field in the global state through shift operations, and establish a two-way mapping relationship between the field name and the bit mask, and output a list of state fields for components to select for subscription;

[0010] S2. The component selects predetermined fields from the list of state fields to form a watch list, combines the bit masks corresponding to the watched fields through OR operations to generate the subscription mask of the component, and stores it in the subscriber mapping table;

[0011] S3. When a state update request is triggered, compare the state copies before and after the update, identify the changed fields and obtain their bit masks, and accumulate and generate a global change mask through OR operations;

[0012] S4. Perform precise broadcast updates, perform AND operations on the global change mask and each subscription mask in the subscriber mapping table. If the operation result is non-zero, it is determined that there is an intersection and the callback function of the corresponding component is triggered for local updates;

[0013] S5. Record log entries containing the change mask, changed fields and the complete state before and after the change in chronological order, and provide state backtracking queries according to the timestamp.

[0014] As a preferred solution of the first aspect, the output of the list of state fields for components to select for subscription specifically includes:

[0015] Define a forward mapping table from fields to binary bit masks;

[0016] Register each predefined state field and its unique bit mask generated through the 1<<n operation to the forward mapping table through an initialization method;

[0017] Extract all registered field names from the forward mapping table to generate the list of state fields.

[0018] As a preferred solution of the first aspect, step S2 specifically includes:

[0019] The component passes in its component ID and the fields to be subscribed to from the list of state fields through the subscription field manager interface;

[0020] Call the bitmask combination method, traverse the fields to be subscribed to and obtain the bitmasks of each field from the registry, and perform an OR operation to generate a composite subscription mask;

[0021] The component ID, the generated composite subscription mask, and the callback function used to trigger component updates are encapsulated into a subscriber object and stored in the subscription mapping table of the global state manager.

[0022] As a preferred embodiment of the first aspect, step S3 specifically includes:

[0023] Receive a status update request containing the target field and the new value, and create a copy of the current global state as a comparison benchmark;

[0024] Iterate through the fields in the update request and determine whether the field values ​​have changed substantially. If they have changed, retrieve the bitmask corresponding to the field from the registry and merge it into the global change mask, which is initially set to 0.

[0025] By directly modifying the value of the global state object, state penetration can be achieved by bypassing the props layer by layer.

[0026] As a preferred embodiment of the first aspect, the specific determination logic for the precise broadcast update in step S4 is as follows:

[0027] Iterate through all subscriber objects in the subscriber map table;

[0028] Perform bitwise operations on each subscriber's subscriptionMask and the current changeMask, with the following logical expression:

[0029] (changeMask&subscriptionMask)!==0

[0030] When the above logical expression is true, it is determined that the state subscribed to by the component has changed, and the callback function registered by the component is executed; if it is false, the component is not re-rendered.

[0031] As a preferred embodiment of the first aspect, step S5 specifically includes:

[0032] After each state update, the current timestamp, global change mask, list of changed fields, copies of the state before and after the update, and the ID of the component that triggered the update are encapsulated into a log entry;

[0033] Log entries are stored sequentially in a fixed-size sliding window queue. When the number of log entries exceeds the preset maximum value, the oldest log record is automatically deleted.

[0034] The getStateAtTime method matches the corresponding log entry in the log queue based on the input timestamp and returns a snapshot of the state at the current time to achieve time slice backtracking.

[0035] A second aspect of the present invention provides a React component state penetration and broadcasting system based on binary bitmasks, the system comprising:

[0036] The status bitmask registry module is used to predefine status fields and their corresponding unique binary bitmasks, maintain a bidirectional mapping table between field names and bitmasks, and provide an optional list of status fields to the outside world.

[0037] The global bitmask core state manager is used to store the global state, maintain the subscriber mapping table, handle state penetration update logic, and schedule the broadcast process.

[0038] The state penetration engine module, integrated into the React architecture, is used to generate a global change mask based on field changes and directly update the target state.

[0039] The precise subscription broadcast module uses a bitwise AND matching algorithm to identify affected subscription components and trigger updates in O(1) time complexity.

[0040] The State Change Log and Time Slicing module is used to persistently store the history of state changes and supports state retrieval and backtracking based on field level or time dimension.

[0041] As a preferred embodiment of the second aspect, the system also includes a subscription field manager, which serves as a ReactHook interface for receiving binding fields selected by the component from the list of state fields and initializing the component's subscription configuration when the component is mounted.

[0042] As a preferred embodiment of the second aspect, the status bitmask registry module supports a composite bitmask query function, which uses bit operations to parse a list of all original status fields contained in a composite bitmask.

[0043] The global bitmask core state manager initializes the global state, registry instance, and logger instance during construction, and provides a globally unique singleton access interface to the outside world.

[0044] The React component state penetration and broadcasting method based on binary bitmasks disclosed in the first aspect above can be applied to React front-ends with the need for cross-level state sharing and communication among multiple components. Specific scenarios include shopping cart state management on e-commerce platforms, cross-page synchronization of user information, real-time updates of product data, and complex form multi-module data linkage and multi-component state collaboration in large-scale back-end management systems.

[0045] Compared with the prior art, the technical solution of the present invention has the following beneficial technical effects:

[0046] (1) The O(1) time complexity matching algorithm using bitmasks can significantly improve the efficiency of state subscription matching compared to the traditional O(n) traversal matching method.

[0047] (2) The state penetration engine avoids unnecessary re-rendering of intermediate components, greatly reducing rendering overhead, and the average time of state update is significantly reduced compared with the traditional method.

[0048] (3) By using bitmasks to achieve precise subscription control at the field level, components can precisely subscribe to changes in specific state fields, avoiding unnecessary re-rendering caused by object-level subscription in traditional solutions, achieving true local updates, and reducing a large number of unnecessary component re-renderings.

[0049] (4) By combining the status change log and time slicing module with bitmasking technology, the status change filtering query based on the field level can be realized, supporting log retrieval and time slicing functions accurate to the field level, which significantly shortens the problem location time. Attached Figure Description

[0050] Figure 1 This is a flowchart illustrating the architecture and execution process of a React component state penetration and broadcasting system based on binary bitmasks. Detailed Implementation

[0051] In the following description, numerous specific details are set forth in order to provide a more thorough understanding of the invention. However, it will be apparent to those skilled in the art that the invention can be practiced without one or more of these details. In other instances, certain technical features well-known in the art have not been described in order to avoid obscuring the invention.

[0052] React, as a mainstream front-end development framework, greatly improves development efficiency and code maintainability through its component-based approach. However, in complex application scenarios, state sharing and data communication between multiple components often become particularly complex, and the following objective problems need to be addressed:

[0053] Performance Issues: Traditional state management solutions incur significant performance overhead when passing state within deeply nested components, and subscription matching is inefficient. The Context API triggers numerous unnecessary re-renders when updating within deep component trees, leading to a significant performance degradation. In large applications, solutions like Redux require traversing the entire component tree for each state update to determine which components need updating, creating a performance bottleneck. Existing subscription matching techniques require checking component subscription conditions one by one, resulting in a time complexity of O(n), which is inefficient. Traditional props passing methods require passing through multiple intermediate components in deeply nested components, increasing rendering overhead.

[0054] Accuracy Issues: Existing solutions lack precise granular control over state subscriptions, leading to unnecessary component re-rendering. Current state management solutions typically only achieve coarse-grained subscriptions, preventing precise component control and only monitoring changes in specific state fields. When a part of a state object changes, all consumers of the object receive an update notification, resulting in unnecessary re-rendering. Existing technologies cannot achieve precise matching with O(1) time complexity through bitwise operations. In complex applications, it is difficult to accurately predict which components will re-render due to state changes.

[0055] State management complexity issues: Existing solutions require manual management of dependencies and subscription configurations, increasing development complexity. Developers need to manually configure component dependencies, which is error-prone and difficult to maintain. Solutions like Redux require defining multiple concepts such as Action Types, ActionCreators, and Reducers, increasing code complexity. Simple state updates require writing multiple files and functions, increasing development and maintenance costs.

[0056] Debugging and tracing issues: Existing solutions lack effective state change tracking and debugging mechanisms. Traditional state management solutions lack complete state change logs, making it difficult to trace the historical trajectory of state changes. In complex applications, multiple components may modify the same state simultaneously, resulting in unclear sources of state changes. State change tracking is not easily implemented, making it difficult to reproduce and debug the state at specific points in time. There is a lack of precise state filtering and querying capabilities based on bitmasks, making it difficult to understand the data flow between components.

[0057] To address these issues, this invention utilizes binary bitmasking technology to achieve precise subscription matching with O(1) time complexity, cross-level state penetration through global state management and component ID mapping, and precise state change tracking through bitmask logs.

[0058] This invention introduces binary bitmasking technology into the React state management field for the first time, achieving O(1) time complexity for state identification and querying through bit operations, solving the problem of low efficiency (O(n)) for state field identification in existing technologies. Bit operations have a computation time of 0.3-1 nanoseconds (within one CPU clock cycle). Traditional React's smallest unit of computation is the Object, and the computation time for medium-sized arrays and object traversal is 100-1000 nanoseconds. Therefore, using bit operations can increase the computation speed by 100-1000 times, which is why this application has a significant performance advantage over traditional React state management solutions. This optimization is particularly important in scenarios requiring frequent state updates and a large number of component subscriptions. For example, in the e-commerce shopping cart scenario, server memory has a limit (it may not be able to be expanded further). Using the solution of this invention can greatly reduce the server's memory pressure.

[0059] The technical solution of the present invention will be explained in detail below with reference to the accompanying drawings.

[0060] like Figure 1 As shown, this invention discloses a method for React component state penetration and broadcasting based on binary bitmasks, the specific steps of which are as follows:

[0061] Step S1: Define the State Bit-Mask Registry Module. This module implements: 1. Initializing field states: Predefine all state fields to be managed and their corresponding bitmasks, such as USER_NAME=1<<0, USER_AGE=1<<1, etc. 2. Defining a bidirectional mapping table: Define the `getBitMask()` method to retrieve the corresponding bitmask value based on the field name, and define the `getField()` method to retrieve the corresponding field name based on the bitmask value. 3. Defining the `combineMasks()` method to combine multiple field masks into a composite mask using OR operations. 4. Defining the `parseFields()` method to query whether a composite mask contains a specific field using AND operations.

[0062] Step S2: State Penetration Engine Module. This module, based on a global state management mechanism, directly locates and updates the state of the target component via its component ID, achieving cross-level state penetration and bypassing traditional props drilling. This module implements: 1. Receiving state update requests, such as `setState({userName:"John"})`. 2. Determining if a field value has truly changed. If it has, obtaining the bitmask of the changed field, combining it using an OR operation, and adding it to the global change mask. Then, it adds the changed field to the global change field array. 3. Recording change logs. 4. Precise broadcasting, only notifying components that have subscribed to the changed state bit.

[0063] Step S3: Precise Subscription Broadcasting Module. This module uses a bitmask matching algorithm to achieve precise subscription of specific state fields by components via AND operations. A component update is only triggered when the changed state bit intersects with the component's subscribed bitmask. This module implements: 1. When a component subscribes, a subscription mask is created based on the list of fields it follows. For example, if it follows userName and userAge, the mask is 0b11. 2. When the state changes, a change mask is generated. For example, if userName changes, the mask is 0b01. 3. Precise matching: An AND operation is performed on each subscriber: change mask & subscription mask. 4. Conditional notification: Subscribers are notified only when the result is non-zero, i.e., an intersection exists. 5. Avoiding re-rendering: Components without intersection will not receive update notifications, avoiding unnecessary re-rendering.

[0064] Step S4: State Change Log and Time Slice Module. This module records the bitmask markers, timestamps, and change details for all state changes, supporting state backtracking and debugging. This module implements: 1. When a state changes, it records the timestamp, change mask, list of changed fields, and the complete state before and after the change. 2. Log storage: It stores change records in a log queue in chronological order. 3. Quantity control: It maintains a fixed-size sliding window; when the limit is exceeded, the oldest log is deleted. 4. Time slicing: It finds the corresponding state based on the timestamp and restores it to a specified point in time. 5. Range query: It supports retrieving state change history by time range.

[0065] Step S5: Global Bit Mask Core State Manager and Subscription Field Manager. This module implements: 1. It is used for globally managing the current global state state, the registry example registry, the subscription mapping table subscribers, and the logging instance logger. All the logic for state management and component communication is implemented in this state manager. 2. When a component connects to the subscription field manager, it initializes the global state of this component.

[0066] As a preferred solution, Step S1 is specifically as follows:

[0067] Step S1.1: State Bit-Mask Registry Module

[0068] The State Bit-Mask Registry Module is responsible for allocating a unique binary bit identifier for each state field in the system through a shift operation (1<<n). It achieves efficient state tracking through bit operations. This module is the infrastructure of the entire system and provides underlying support for subsequent state penetration and precise subscription.

[0069] Step S1.1.1: Define and export the state bit mask enumeration. There are currently three components: UserInfoComponent [ 'userName', 'userAge', 'userEmail' ], ProductInfoComponent [ 'productName', 'productPrice', 'productStock' ], ShoppingCartComponent [ 'cartItems', 'cartTotal' ]. Now, a unique binary bit is allocated for each state field of these three components. The method is as follows:

[0070] export enum StateBitMask {

[0071] USER_NAME = 1<<0, the user name field corresponds to the 0th bit, and the binary is 0b00000001

[0072] USER_AGE = 1<<1, the user age field corresponds to the 1st bit, and the binary is 0b00000010

[0073] USER_EMAIL = 1<<2, the user email field corresponds to the 2nd bit, and the binary is 0b00000100

[0074] PRODUCT_NAME = 1<<3, the product name field corresponds to the 3rd character, which is 0b00001000 in binary.

[0075] PRODUCT_PRICE = 1<<4, the product price field corresponds to the 4th bit, which is 0b00010000 in binary.

[0076] PRODUCT_STOCK = 1<<5, the product inventory field corresponds to the 5th bit, which is 0b00100000 in binary.

[0077] CART_ITEMS = 1<<6, the 6th bit of the shopping cart item field, which is 0b01000000 in binary.

[0078] CART_TOTAL = 1<<7, the 7th bit of the shopping cart total field is represented by the binary value 0b10000000.

[0079] The status bitmask registry is shown in Table 1.

[0080] Table 1 Status Bitmask Registry

[0081]

[0082] Step S1.1.2: Define and export the global state class GlobalState. The method is: export interface GlobalState {…}; Define the following fields in the global state class GlobalState: Username, User Age, User Email, Product Name, Product Price, Product Stock, CartItems, and CartTotal.

[0083] Step S1.2: Status bitmask registry class

[0084] Define a StateBitMaskRegistry class to implement a bidirectional mapping between field names and bitmasks. The StateBitMaskRegistry class allows you to quickly look up the corresponding bitmask from a field name and vice versa. The methods are: class StateBitMaskRegistry {…};

[0085] Step S1.2.1: In the registry class StateBitMaskRegistry, define a mapping table from fields to binary bitmasks. The method is: private fieldToBitMap: Map<keyof GlobalState, number> = new Map();

[0086] Step S1.2.2: In the registry class StateBitMaskRegistry, define a mapping table from binary bitmasks to fields. `private bitToFieldMap: Map`<number, keyof GlobalState> = new Map();

[0087] Step S1.2.3: In the registry class StateBitMaskRegistry, define a method to register fields, adding the field and bitmask to the forward mapping table, and adding the bitmask and field to the reverse mapping table. The method is: private registerField(field: keyof GlobalState, bitMask: number) {this.fieldToBitMap.set(field, bitMask); this.bitToFieldMap.set(bitMask,field);}

[0088] Step S1.2.4: In the registry class StateBitMaskRegistry, define the registry initialization method initializeRegistry. The method is: private initializeRegistry() {

[0089] this.registerField('userName', StateBitMask.USER_NAME);

[0090] this.registerField('userAge', StateBitMask.USER_AGE);

[0091] this.registerField('userEmail', StateBitMask.USER_EMAIL);

[0092] this.registerField('productName', StateBitMask.PRODUCT_NAME);

[0093] this.registerField('productPrice', StateBitMask.PRODUCT_PRICE);

[0094] this.registerField('productStock', StateBitMask.PRODUCT_STOCK);

[0095] this.registerField('cartItems', StateBitMask.CART_ITEMS);

[0096] this.registerField('cartTotal', StateBitMask.CART_TOTAL);}

[0097] Step S1.2.5: In the constructor of the registry class StateBitMaskRegistry, call the registry initialization method initializeRegistry to initialize the registry. The method is: constructor() {this.initializeRegistry();}

[0098] Step S1.2.6: Define a method `getBitMask()` in the registry class `StateBitMaskRegistry` to map field names to bitmasks, used to quickly retrieve bitmasks based on field names. The method is: `getBitMask(field: keyofGlobalState): number { return this.fieldToBitMap.get(field) || 0;}`

[0099] Step S1.2.7: Define a `getField()` method in the registry class `StateBitMaskRegistry` to map field bitmasks to field names, used to quickly retrieve field names based on bitmasks. The method is: `getField(bitMask:number): keyof GlobalState | undefined { return this.bitToFieldMap.get(bitMask);}`

[0100] Step S1.3: Bitmask combination method

[0101] The `combineMasks()` method is defined to combine bitmasks of multiple state fields into a composite bitmask. This step implements a key function: combining multiple individual state field bitmasks into a composite bitmask. By using the OR operation (|) to combine multiple bitmasks, a component can subscribe to multiple state fields. For example, if a component needs to subscribe to USER_NAME, USER_AGE, and USER_EMAIL, it can obtain a composite mask using `combineMasks('USER_NAME', 'USER_AGE', 'USER_EMAIL')`. Bits 0, 1, and 2 of this mask are all set to 1, and their decimal values ​​are 1, 2, and 4 respectively. Therefore, the value of the composite mask is 1 + 2 + 4 = 7. This method allows the system to efficiently implement subscription relationships for any number and combination of state fields.

[0102] The method is: combineMasks(...fields: Array<keyof GlobalState> ): number {let combinedMask = 0; fields.forEach(field =>{ const fieldMask =this.getBitMask(field); combinedMask |= fieldMask;}); return combinedMask;}

[0103] Step S1.4: Composite bitmask lookup method

[0104] Define a composite bitmask lookup method `parseFields()` to parse a list of corresponding fields from a composite bitmask. This method implements precise lookup functionality for composite bitmasks, using an AND operation (&) to determine whether a composite bitmask contains a specific bitmask. For example, if `combinedMask` represents a component's subscription mask, `parseFields(combinedMask)` can parse out the fields that the component subscribes to.

[0105] The method is: parseFields(mask: number): Array<keyof GlobalState> { constfields: Array<keyof GlobalState> = []; let bit = 1; while (bit<= mask) { if((mask&bit) !== 0) { const field = this.getField(bit); if (field) {fields.push(field);}} bit<<= 1;} return fields;}}.

[0106] As a preferred option, step S2 is as follows:

[0107] Step S2.1: State Penetration Engine Module

[0108] The state penetration engine module is integrated into the React Fiber architecture. By directly accessing and modifying the memoizedState of Fiber nodes, it achieves cross-level state penetration, bypassing the traditional props drilling method. This solves the performance and complexity problems of existing technologies where state transmission needs to go through intermediate components layer by layer. This is an optimization solution that existing technologies have failed to achieve.

[0109] Step S2.1.1: Define the state penetration method `setState()`. The input parameters are a list of fields and the component ID. The method is `setState(updates: Partial ...`. <globalstate>, componentId?: string) {…};

[0110] Step S2.1.2: Create and save a copy of the state before the update in the `setState` method. The method is: `const prevState = { ...this.state};`

[0111] Step S2.1.3: Create a new state object in the `setState` method, containing the updated values. The method is: `const nextState = { ...this.state, ...updates};`

[0112] Step S2.1.4: Initialize the change mask. The method is: let changeMask = 0;

[0113] Step S2.1.5: Initialize the changed fields array. The method is: `const changedFields: string[] = [];`

[0114] Step S2.1.6: Iterate through all input fields. The method is: Object.keys(updates).forEach((key) =>{…}

[0115] Step S2.1.7: During iteration, convert the key to the key type of the global state. The method is: `const field = key as keyof GlobalState;`

[0116] Step S2.1.8: Determine whether the field value has actually changed, using the following method: if (prevState[field]!== nextState[field]) {…};

[0117] Step S2.1.0: If the field value has actually changed, obtain the bitmask corresponding to that field. The method is: `const bitMask = this.registry.getBitMask(field);`

[0118] Step S2.1.10: Use an OR operation to accumulate the changes into a bitmask. The method is: changeMask |= bitMask;

[0119] Step S2.1.11: Add the changed fields to the changed fields array. The method is: changedFields.push(field);

[0120] Step S2.1.12: Update the field state. The method is: this.state = nextState;

[0121] Step S2.2: Record the change log. The change log method `logger()` will be described in detail in step S4. The method is: `this.logger.log({ timestamp: Date.now(), changeMask, changedFields, prevState: updates, nextState: updates, componentId,});` The change log mainly records: the current timestamp, the changed bitmask, the list of changed fields, the state before the change, the state after the change, and the component ID that triggered the state change.

[0122] Step S2.3: Precise broadcasting, only notifying components that have subscribed to the changed state bit. The broadcasting method will be described in detail in step S3. The method is: this.broadcast(changeMask).

[0123] As a preferred option, step S3 is as follows:

[0124] Step S3.1: Precise Subscription Broadcasting Module.

[0125] The component subscription method allows components to subscribe to specific state bitmasks. When the subscribed state changes, a specified callback function is executed. The component subscription method stores the component ID, subscription code, and callback function in a subscribers map. When the state changes, only components that have subscribed to the relevant state bit combination will receive the notification. Using bitmask operations achieves O(1) time complexity for subscription matching, significantly improving efficiency compared to existing traversal comparison methods.

[0126] Step S3.1.1: Define the subscriber interface, including component ID, subscription mask, callback function, etc. The method is: interface Subscriber {componentId: string; subscriptionMask: number; callback: (state: GlobalState, changeMask: number) =>void;};

[0127] Step S3.2: Define the component subscription method. Input parameters are the component ID, the subscription state bitmask, and the callback function when a change occurs. The method is: `subscribe(componentId: string, subscriptionMask: number, callback: (state: GlobalState, changeMask: number) =>void, ) {…};`

[0128] Step S3.2.1: In the component subscription method `subscribe()`, add the subscriber information to the subscriber map table. The method is: `this.subscribers.set(componentId, { componentId, subscriptionMask, callback});`

[0129] Example of component subscription mapping table data: Component ID: UserInfoComponent, Subscription Mask: 7(0b0000000111), Subscription Fields: [userName, userAge, userEmail], Callback Function: [Function: bound callback].

[0130] Step S3.2.2: Define a method `getSubscriptionMaskByComponentId()` to retrieve the subscription mask based on the component ID. The method is: `getSubscriptionMaskByComponentId(componentId: string):number | null { const subscriber = this.subscribers.get(componentId); return subscriber ? subscriber.subscriptionMask : null;}`

[0131] Step S3.3: Precise Broadcast Algorithm

[0132] The precise broadcast algorithm uses bitmask AND operations to determine whether a component needs to be notified, and only notifies components that have subscribed to state change bits.

[0133] Step S3.3.1: Define the precise broadcast algorithm `broadcast()`, with the input parameter being a changing mask. The method is: `private broadcast(changeMask: number) {…};`

[0134] Step S3.3.2: Iterate through all subscribers in the broadcast algorithm. The method is: this.subscribers.forEach((subscriber) =>{…}

[0135] Step S3.3.3: Determine if the component's subscription status has changed by matching the bitmask (changeMask&subscriptionMask) !== 0. The method is: if ((changeMask&subscriber.subscriptionMask) !== 0) {…};

[0136] Step S3.3.4: If the component state changes, call the callback function to trigger a component update. The method is: subscriber.callback(this.state, changeMask).

[0137] As a preferred option, step S4 is as follows:

[0138] Step S4.1: State Change Log and Time Slice Module

[0139] The state change log and time slicing module records the bitmask markers, timestamps, and change details of all state changes, supporting state backtracking and debugging. Combining bitmasking technology, it enables field-level state change filtering queries, supporting log retrieval accurate to the field level—a fine-grained debugging capability not provided by existing technologies. This is the invention. Innovation Point 4 .

[0140] Step S4.1.1: Define a state change log class `StateChangeLogger`, responsible for recording and managing the state change history. The method is: `class StateChangeLogger {…};`

[0141] Step S4.1.2: Define a state change log array `logs` in the `StateChangeLogger` class. The method is: `private logs: StateChangeLogEntry[] = [];`

[0142] Step S4.1.3: Define the maximum number of log entries in the StateChangeLogger class. Exceeding this number will delete the oldest log entries. The method is: `private maxLogs: number = 100;`

[0143] Step S4.1.4: Define the change logging method `log()` in the `StateChangeLogger` class. The method is: `log(entry: StateChangeLogEntry) { this.logs.push(entry); if(this.logs.length>this.maxLogs) { this.logs.shift();}}`

[0144] Step S4.1.5: Define the method `getLogs()` in the `StateChangeLogger` class to retrieve the left and right logs. The method is: `getLogs(): StateChangeLogEntry[] { return [...this.logs];}`

[0145] Step S4.1.6: Define a method `getRecentLogs()` in the `StateChangeLogger` class to retrieve the n most recent log entries. The method is: `getRecentLogs(count: number): StateChangeLogEntry[]{ return this.logs.slice(-count);}`

[0146] Step S4.2: Define the time-slicing method getStateAtTime(). This retrieves a snapshot of the state at a specified time point, with the timestamp as the input parameter. The method is: getStateAtTime(timestamp: number): Partial <globalstate>| null {…};

[0147] Step S4.2.1: Define the log entry `log` retrieved based on the timestamp in the time-slicing method `getStateAtTime()`. The method is: `const log = this.logs.find((l) => l.timestamp === timestamp);`

[0148] Step S4.2.2: If the log is found, return the changed state; otherwise, return null. The method is: returnlog ? log.nextState : null.

[0149] As a preferred option, step S5 is as follows:

[0150] Step S5.1: Define the global bitmask core state manager and subscription field manager

[0151] Step S5.1.1: Define the BitMaskedStateManager, the core state manager. It is used to globally manage the current global state, the bitmasked registry instance, the subscribers table, and the logger instance. This is the core state manager of the entire system; all state management and component communication logic is implemented in this class. The method is: class BitMaskedStateManager {…}

[0152] Step S5.1.2: Define the current global state `state` in the state manager `BitMaskedStateManager`. The method is: `private state: GlobalState;`

[0153] Step S5.1.3: Define a global state bitmask registry instance, `registry`, in the state manager `BitMaskedStateManager`. The method is: `private registry: StateBitMaskRegistry;`

[0154] Step S5.1.4: Define a global subscriber map table `subscribers` in the state manager `BitMaskedStateManager`. The method is: `private subscribers: Map`.<string, Subscriber> = new Map();

[0155] Step S5.1.5: Define a global state change logger instance `logger` in the state manager `BitMaskedStateManager`. The method is: `private logger: StateChangeLogger;`

[0156] Step S5.1.6: Initialize the state manager in the constructor of the state manager BitMaskedStateManager. The method is: constructor(initialState: GlobalState) { this.state = initialState; this.registry = new StateBitMaskRegistry(); this.logger = new StateChangeLogger();}

[0157] Step S5.1.7: Define and export the method `getBitMaskedStateManager()` to retrieve the global bitmask state manager. The method is: `export function getBitMaskedStateManager(): BitMaskedStateManager { return globalStateManager;}`

[0158] Step S5.2: Define and export the subscription field manager `useStateFields`. The method is: `export function useStateFields( fields: Array ...`<keyof GlobalState> , componentId:string, ): [GlobalState, (updates: Partial <globalstate>=>void] {…};

[0159] Step S5.2.1: Obtain the global state manager instance `manager` in the `useStateFields` method. The method is: `const manager = getBitMaskedStateManager();`

[0160] Step S5.2.2: Obtain the registry instance (registry) with the state bitmask in the useStateFields method. The method is: const registry = manager.getRegistry();

[0161] Step S5.2.3: Define a state setting function with dependencies in the array [componentId, manager]. This function initializes the component's global state when the component connects to the subscription field manager. The method is: `const setState = useCallback( (updates: Partial ... )` <globalstate>) =>{ manager.setState(updates, componentId);}, [componentId, manager] ).

[0162] The system currently includes a main file (index), a user component (UserInfoComponent), a product component (ProductInfoComponent), a shopping cart component (ShoppingCartComponent), and a state change log component (StateChangeLogComponent). The main file initializes the global state. The user, product, and shopping cart components initialize their specified subscription fields using the `useStateFields` subscription field manager. The state change log component subscribes to all states and records changes. When user information changes or a user adds items to their shopping cart, the global bitmasked state manager (BitMaskedStateManager) enables component state penetration and precise broadcast notifications. For a more detailed understanding of the principles of this invention, please refer to the documentation.

[0163] Step 1: Initialize the global data initialState in the main file index.

[0164] Step 1.1: Initialize the global state. The method is as follows:

[0165] const initialState: GlobalState = {

[0166] userName: 'Zhang San',

[0167] userAge: 28,

[0168] userEmail: 'zhangsan@example.com',

[0169] productName: 'Advanced React Tutorial'

[0170] Product Price: 99.99

[0171] Product Stock: 50

[0172] cartItems: [],

[0173] cartTotal: 0,};

[0174] Step 1.2: Initialize the state manager outside the component, ensuring initialization is completed before any component is rendered. The method is: `initBitMaskedStateManager(initialState);`

[0175] Step 1.3: Import the UserInfoComponent, ProductInfoComponent, ShoppingCartComponent, and StateChangeLogComponent using the import function.

[0176] Step 2: Initialize data in the UserInfoComponent: specify the fields to subscribe to, get the state manager, and get the registry instance.

[0177] Step 2.1: Specify the subscribed fields in the UserInfoComponent.

[0178] Specify the subscribed fields in the UserInfoComponent. The method is as follows: `const [state, setState] = useStateFields( ['userName', 'userAge', 'userEmail'], 'UserInfoComponent' );`

[0179] Subscription fields: 'userName', 'userAge', 'userEmail'

[0180] Bitmask: USER_NAME(1) | USER_AGE(2) | USER_EMAIL(4) = 7

[0181] Binary code: 0b0000000111, Subscription mask: 7

[0182] Step 2.2: Obtain a state manager instance. The method is: `const manager = getBitMaskedStateManager();`

[0183] Step 2.3: Obtain the registry instance. The method is: `const registry = manager.getRegistry();`

[0184] Step 3: Initialize data in the ProductInfoComponent: specify the fields to subscribe to, get the state manager, and get the registry instance.

[0185] Step 3.1: Specify the subscribed fields in the ProductInfoComponent.

[0186] Specify the subscribed fields in the ProductInfoComponent. The method is as follows: `const [state, setState] = useStateFields( ['productName', 'productPrice', 'productStock', 'cartItems'], 'ProductInfoComponent', );`

[0187] Subscription fields: 'productName', 'productPrice', 'productStock'

[0188] Bitmask: PRODUCT_NAME(8) | PRODUCT_PRICE(16) | PRODUCT_STOCK(32) = 56

[0189] Binary code: 0b0000111000, Subscription mask: 56

[0190] Step 3.2: Obtain a state manager instance. The method is: `const manager = getBitMaskedStateManager();`

[0191] Step 3.3: Obtain the registry instance. The method is: `const registry = manager.getRegistry();`

[0192] Step 4: Initialize data in the ShoppingCartComponent: specify the subscribed fields, get the state manager, and get the registry instance.

[0193] Step 4.1: Specify the subscribed fields in the ShoppingCartComponent.

[0194] Specify the subscribed fields in the ShoppingCartComponent. The method is as follows: `const[state, setState] = useStateFields( ['cartItems', 'cartTotal', 'productStock'], 'ShoppingCartComponent', );`

[0195] Subscription fields: 'cartItems', 'cartTotal'

[0196] Bitmask: CART_ITEMS(64) | CART_TOTAL(128) = 192

[0197] Binary code: 0b0011000000, Subscription mask: 192

[0198] Step 4.2: Obtain a state manager instance. The method is: `const manager = getBitMaskedStateManager();`

[0199] Step 4.3: Obtain the registry instance. The method is: `const registry = manager.getRegistry();`

[0200] Step 5: Initialize data in the StateChangeLogComponent: Subscribe to all state bits, get the state manager, and get the registry instance.

[0201] Step 5.1: Subscribe to all state bits in the StateChangeLogComponent.

[0202] Subscribe to all state bits in the StateChangeLogComponent. The method is as follows: `const allStateMask = 0b1111111111; const [state, , logs] = useBitMaskedState(allStateMask, 'StateChangeLogComponent');`

[0203] Subscription fields: All status fields

[0204] Bitmask: The combination of all field masks = 1023

[0205] Binary code: 0b1111111111, Subscription mask: 1023

[0206] Step 5.2: Obtain a state manager instance. The method is: `const manager = getBitMaskedStateManager();`

[0207] Step 5.3: Obtain the registry instance. The method is: `const registry = manager.getRegistry();`

[0208] Step 6: Modify the user's name and age, and view the broadcast notification component and update component.

[0209] Step 6.1: Operation, username: Li Si, age: 20.

[0210] Step 6.2: Determine the changes that have occurred.

[0211] The userName field has changed; the 0th character has changed. Change mask: 1 (0b0000000001)

[0212] The userAge field has changed; the first digit has changed. Change mask: 2 (0b0000000010)

[0213] Step 6.3: Broadcast notification

[0214] Notification component: UserInfoComponent, component subscription mask: 7 (0b0000000111)

[0215] Notification component: StateChangeLogComponent, component subscription mask: 1023 (0b1111111111)

[0216] Step 6.4: Component Update

[0217] The UserInfoComponent calls the callback function in the subscription interface to update the username and age. The method is: `subscriber.callback(this.state, changeMask);`

[0218] The StateChangeLogComponent logs changes. The method is: this.logger.log({…});

[0219] Step 7: When the user has items in their shopping cart, modify the product information.

[0220] Step 7.1: Operation, product price: Price: 88, Inventory: 12.

[0221] Step 7.2: Determine the changes that have occurred.

[0222] The productPrice field has changed; change mask: 16 (0b0000010000)

[0223] The field "productStock" has changed. Change mask: 32 (0b0000100000)

[0224] Step 7.3: Broadcast notification

[0225] Notification component: ProductInfoComponent, component subscription mask: 120 (0b0001111000)

[0226] Notification component: ShoppingCartComponent, component subscription mask: 224 (0b0011100000)

[0227] Notification component: StateChangeLogComponent, component subscription mask: 1023 (0b1111111111)

[0228] Step 7.4: Component Update

[0229] The ProductInfoComponent calls the callback function in the subscription interface to update the product price and inventory. The method is: `subscriber.callback(this.state, changeMask);`

[0230] The ShoppingCartComponent calls the callback function in the subscription interface to update the product price. The method is: `subscriber.callback(this.state, changeMask);`

[0231] The StateChangeLogComponent logs changes. The method is: this.logger.log({…}).

[0232] The operating mechanisms of the above-disclosed embodiments can be implemented in hardware, software, firmware, or a combination of these implementation methods. Embodiments of this application can be implemented as computer programs or program code executable on a programmable system, which includes at least one processor, a storage system (including volatile and non-volatile memory and / or storage elements), at least one input device, and at least one output device.

[0233] Program code can be applied to input instructions to execute the functions described in this application and generate output information. The output information can be applied to one or more output devices in a known manner. For the purposes of this application, the processing system includes any system having a processor such as, for example, a Digital Signal Processor (DSP), a microcontroller, an Application Specific Integrated Circuit (ASIC), or a microprocessor.

[0234] The program code can be implemented using a high-level procedural language or an object-oriented programming language to communicate with the processing system. Assembly language or machine language can also be used when needed. In fact, the mechanisms described in this application are not limited to any particular programming language. In either case, the language can be a compiled language or an interpreted language.

[0235] In summary, the React component state penetration and broadcasting method and system based on binary bitmasks disclosed in this invention introduces binary bitmasking technology into the field of React state management for the first time, achieving state identification and querying with O(1) time complexity through bitwise operations. Cross-level state updates are achieved through global state management and component ID mapping, avoiding the performance loss of props being passed level by level in deep component trees. Furthermore, subscription matching with O(1) time complexity is achieved using bitmasking operations, significantly improving subscription matching efficiency. Combined with bitmasking technology, field-level state change filtering queries are implemented, supporting log retrieval accurate to the field level. Compared with existing technologies, this invention has significant advantages in state penetration capability, subscription accuracy, time complexity, and rendering performance, especially in large-scale React applications, real-time data applications, and performance-sensitive applications. This invention also has a complete fault handling mechanism and abnormal situation handling capability, ensuring stable system operation and effectively solving the problem of complex state management in React applications.

[0236] As described above, although the invention has been shown and described with reference to specific preferred embodiments, it should not be construed as limiting the invention itself. Various changes in form and detail may be made without departing from the spirit and scope of the invention as defined in the appended claims.< / globalstate> < / globalstate> < / globalstate> < / globalstate>

Claims

1. A method for state penetration and broadcasting of React components based on binary bitmasks, characterized in that, It includes the following steps: S1. Build a status bitmask registry, assign a unique binary bit identifier to each status field in the global status through shift operations, establish a two-way mapping relationship between the field names and the bitmasks, and output a list of status fields for components to select for subscription; S2. The component selects predetermined fields from the status field list to form a watch list, combines the bitmasks corresponding to the watched fields using the OR operation to generate the subscription mask for this component, and stores it in the subscriber mapping table; S3. When a status update request is triggered, compare the status copies before and after the update, identify the fields that have changed and obtain their bitmasks, and accumulate and generate a global change mask through the OR operation; S4. Perform an exact broadcast update, perform an AND operation on the global change mask and each subscription mask in the subscriber mapping table. If the operation result is non-zero, it is determined that there is an intersection and the callback function of the corresponding component is triggered for local update; S5. Record log entries containing the change mask, changed fields, and the complete status before and after the change in chronological order, and provide status backtracking queries based on timestamps.

2. The React component state penetration and broadcasting method based on binary bitmask according to claim 1, characterized in that, The output of the list of status fields for components to select for subscription specifically includes: Define a forward mapping table from fields to binary bitmasks; Register each predefined status field and its unique bitmask generated through the 1<<n operation into the forward mapping table through an initialization method; Extract all registered field names from the forward mapping table to generate the status field list.

3. The React component state penetration and broadcasting method based on binary bitmask according to claim 1, characterized in that, Step S2 specifically includes: The component passes in the component ID and the fields to be subscribed selected from the status field list through the subscription field manager interface; Call the bitmask combination method, traverse the fields to be subscribed and obtain the bitmasks of each field from the status bitmask registry, and perform the OR operation to generate a composite subscription mask; Package the component ID, the generated composite subscription mask, and the callback function used to trigger component updates into a subscriber object and store it in the subscription mapping table of the global status manager.

4. The React component state penetration and broadcasting method based on binary bitmask according to claim 1, characterized in that, Step S3 specifically includes: Receive a status update request containing the target field and the new value, and create a copy of the current global status as a comparison benchmark; Traverse the fields in the update request, determine whether the field value has changed substantially; if it has changed, retrieve the bitmask corresponding to this field from the status bitmask registry and merge it into the global change mask with an initial value of 0; Directly modify the value of the global status object to achieve status penetration that bypasses the layer-by-layer transmission of props.

5. The React component state penetration and broadcasting method based on binary bitmask according to claim 1, characterized in that, The specific determination logic of the exact broadcast update in step S4 is: Traverse all subscriber objects in the subscriber mapping table; Perform a bit operation on the subscriptionMask of each subscriber and the current changeMask, and the logical expression is as follows: (changeMask&subscriptionMask)!==0 When the above logical expression holds, it is determined that the status subscribed to by this component has changed, and the registered callback function of this component is executed; if it does not hold, the re-rendering of this component is not triggered.

6. The React component state penetration and broadcasting method based on binary bitmask according to claim 1, characterized in that, Step S5 specifically includes: After each state update, the current timestamp, global change mask, list of changed fields, copies of the state before and after the update, and the ID of the component that triggered the update are encapsulated into a log entry; Log entries are stored sequentially in a fixed-size sliding window queue. When the number of log entries exceeds the preset maximum value, the oldest log record is automatically deleted. The getStateAtTime method matches the corresponding log entry in the log queue based on the input timestamp and returns a snapshot of the state at the current time to achieve time slice backtracking.

7. A React component state penetration and broadcasting method based on binary bitmasks according to any one of claims 1 to 6, characterized in that, It is applied to React front-ends with requirements for state sharing and communication across multiple components and levels, specifically including: shopping cart state management in e-commerce platforms, cross-page synchronization of user information, real-time updates of product data, and complex form multi-module data linkage and multi-component state collaboration in large-scale back-end management systems.

8. A React component state penetration and broadcasting system based on binary bitmasks, characterized in that, include: The status bitmask registry module is used to predefine status fields and their corresponding unique binary bitmasks, maintain a bidirectional mapping table between field names and bitmasks, and provide an optional list of status fields to the outside world. The global bitmask core state manager is used to store the global state, maintain the subscriber mapping table, handle state penetration update logic, and schedule the broadcast process. The state penetration engine module, integrated into the React architecture, is used to generate a global change mask based on field changes and directly update the target state. The precise subscription broadcast module uses a bitwise AND matching algorithm to identify affected subscription components and trigger updates in O(1) time complexity. The State Change Log and Time Slicing module is used to persistently store the history of state changes and supports state retrieval and backtracking based on field level or time dimension.

9. A React component state penetration and broadcasting system based on binary bitmasks according to claim 8, characterized in that, It also includes a subscription field manager, which is a ReactHook interface used to receive binding fields selected by the component from the list of state fields and initialize the component's subscription configuration when the component is mounted.

10. A React component state penetration and broadcasting system based on binary bitmasks according to claim 8, characterized in that, The status bitmask registry module supports a composite bitmask query function, which uses bit operations to parse a list of all original status fields contained in a composite bitmask. The global bitmask core state manager initializes the global state, registry instance, and logger instance during construction, and provides a globally unique singleton access interface to the outside world.

Images