CN112241282B - Global state data management method and system based on reaction project - Google Patents
Global state data management method and system based on reaction project Download PDFInfo
- Publication number
- CN112241282B CN112241282B CN202011167627.8A CN202011167627A CN112241282B CN 112241282 B CN112241282 B CN 112241282B CN 202011167627 A CN202011167627 A CN 202011167627A CN 112241282 B CN112241282 B CN 112241282B
- Authority
- CN
- China
- Prior art keywords
- module
- global
- shared data
- component
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 21
- 238000000034 method Methods 0.000 title claims abstract description 18
- 238000013523 data management Methods 0.000 title claims abstract description 14
- 238000007726 management method Methods 0.000 claims abstract description 24
- 238000004806 packaging method and process Methods 0.000 claims abstract description 8
- 230000005540 biological transmission Effects 0.000 claims description 7
- 125000004122 cyclic group Chemical group 0.000 claims description 7
- 230000006870 function Effects 0.000 description 67
- 239000010410 layer Substances 0.000 description 11
- 238000012546 transfer Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 238000001914 filtration Methods 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000003638 chemical reducing agent Substances 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 239000002356 single layer Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Security & Cryptography (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention provides a global state data management method and system based on a reaction project, comprising the following steps: defining a global shared data module and attribute field values corresponding to each global shared data module; establishing a global state management module, and exporting a source component and a connector through the global state management module; embedding the outermost component of the project into a source component, and initializing the source component according to the global shared data module and attribute field values corresponding to each global shared data; injecting shared data into the project through the source component and updating a function of the shared data; and packaging the components needing to acquire global state data through the connector, and acquiring shared data injected by the source components after the components are packaged through the connector. The invention puts the logic of the update state into the component without separating the logic of the update state value, and the invention only focuses on the management of data, thereby solving the problem of various asynchronous state updates.
Description
Technical Field
The invention relates to the technical field of data processing, in particular to a global state data management method and system based on a reaction item.
Background
React is a JavaScript library for building a user interface, and can be conveniently developed based on a component (which can be understood as an independent interface block and can be nested) by using React, wherein the interface display content of the component is obtained by using rendering functions (render) in the component to data (the data comprises two parts, namely, the internal state data of the component is called state and can be maintained through logic in the component, and the data transmitted from outside is called tips and the component itself cannot change tips). The writing mode of the assembly releases the developer from the control logic of the interface, and the data updating interface is updated by the data driving interface, so that the developer is more focused on the correct processing of the data, and the interface development efficiency is improved.
Because components can nest, the data flow of an item steps from the outer layer to the inner layer, and when data transfer exceeds 3 layers, data transfer and maintenance becomes difficult to maintain. The third party solution cited by the developer has the dilemma of difficult learning and difficult use.
The package and nesting of the components are written in the form of labels when the components are used, wherein < componentA > </componentA > means that the components A, such as < componentA > < componentB > </componentB > </componentA >, means that the components A wrap the components B, and can also be understood that the components B are nested inside the components A.
React createContext is the api of the reaction, the createContext provides 2 components, provider and Consumer, provider is a container component, package needs the component of shared data, any level component under its package can obtain the shared data provided by Provider component, this shared data is passed in through the value attribute of Provider. The offspring component wrapped by Provider must execute a callback function internally through the Consumer wrapper in order to obtain the shared data, and the parameter of the callback function is the shared data.
The key-value format object is a data structure mapped to the value through the key, for example, a data object obj01 is established, which contains "name", "phone" and "whether 3 pieces of data are displayed", and can be written as a let obj 01= { "name": "Zhang san", "phone": "15012345678", "isShow": false }, the content can be accessed through the name of the key, for example, the content of the obj01[ "name" ] can be obtained, and the key-value format object is a very common object format in javascript.
The global state management open source solution, reduce, provides a set of strict data transmission paths, proposes various unintelligible concepts and modules (store, action, reducer, predictive state management, data non-modifiable, pure functions), each update needs to strip out the update logic, and the problem of asynchronism is solved only by referring to a third party middleware, so that the API is extremely unfriendly to a developer. The operation of updating multiple groups of data simultaneously cannot be performed.
The global state management open source solution mobx uses observer mode to observe the change of data (commonly seen in concepts of underservable states, calculated values, reactions, actions), is simple, transparent and scalable, and has simple API usage. However, the update logic is still separated during the update state, and the operation of updating multiple groups of data at the same time cannot be performed.
The technology is an API provided by a new version of the reaction framework, project components are required to be written into functional components, the technology is not a complete solution, a general solution is required to be self-organized by a developer, and only the functional components are used in a scene.
The invention solves the problem that the global state data in the reaction project is difficult to communicate and manage among the multi-layer nested components, provides a brand-new simple and easy-to-use state management method, is convenient to realize the communication among any component, can update a plurality of groups of state values at the same time, can update a plurality of groups of state values of a plurality of modules at the same time, and also solves the problem that various asynchronous states are difficult to update.
Disclosure of Invention
In view of the defects in the prior art, the invention aims to provide a global state data management system and method based on a reaction project.
According to the invention, the global state data management system based on the reaction project comprises:
module M1: defining a global shared data module and attribute field values corresponding to each global shared data module;
module M2: establishing a global state management module, and exporting a source component and a connector through the global state management module;
module M3: embedding the outermost component of the project into a source component, and initializing internal state data of the source component according to the global shared data module and attribute field values corresponding to each global shared data; injecting shared data and a global state updating function into the project through a source component;
module M4: and packaging the components needing to acquire global state data through the connector, and acquiring shared data injected by the source components after the components are packaged through the connector.
Preferably, the module M1 comprises: splitting global shared data according to service modules, and establishing a plurality of different global shared data modules according to project actual requirements, wherein each global shared data module stores data in a key-value format; each global shared data module defines a corresponding attribute field value, each attribute field value being a globally shared state value.
Preferably, the module M3 comprises:
module M3.1: importing a plurality of different global shared data modules, corresponding attribute field values and source components at the outermost layer of the project, transmitting the data of each global shared data module and the corresponding attribute field values into the source components in a parameter transmission mode, and initializing the received data of each global shared data module and the corresponding attribute field values into internal state data of the source components by the source components;
module M3.2: and injecting the internal state data and the global state updating function of the source assembly into the project assembly wrapped by the source assembly through the native api of the compact context.
Preferably, the module M4 comprises:
module M4.1: importing a connector into a component which needs to display shared data in the project, wrapping the component which needs to display the shared data by the connector, and acquiring the shared data injected by the source component after the component is packaged by the connector;
module M4.2: the global state updating function is transmitted through the connector, the global state updating function is acquired in the assembly, and the global shared data module value needing to be updated is transmitted into the assembly through the global state updating function;
step M4.3: the data is transmitted from the updated component to the source component, the source component updates its own internal state, the internal state is injected into the item component of the package, and the parameters accepted by the component calling the connector function in the item component are changed.
Preferably, the global state update function includes: when a component calls a global shared data module which does not exist or a global shared data module attribute field value, the global state updating function finds illegal attributes through cyclic traversal and discards the illegal attributes; after discarding the incoming global shared data module, ensuring that the object structure of the incoming module is not polluted, and then merging the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
The global state data management method based on the reaction item provided by the invention comprises the following steps:
step M1: defining a global shared data module and attribute field values corresponding to each global shared data module;
step M2: establishing a global state management module, and exporting a source component and a connector through the global state management module;
step M3: embedding the outermost component of the project into a source component, and initializing the source component according to the global shared data module and attribute field values corresponding to each global shared data; injecting shared data into the project through the source component and updating a function of the shared data;
step M4: and packaging the components needing to acquire global state data through the connector, and acquiring shared data injected by the source components after the components are packaged through the connector.
Preferably, the step M1 includes: splitting global shared data according to service modules, and establishing a plurality of different global shared data modules according to project actual requirements, wherein each global shared data module stores data in a key-value format; each global shared data module defines a corresponding attribute field value, each attribute field value being a globally shared state value.
Preferably, the step M3 includes:
step M3.1: importing a plurality of different global shared data modules and source components at the outermost layer of the project, transmitting the data of each global shared data module into the source component in a parameter transmission mode, and initializing the received data of each global shared data module into internal state data of the source component by the interior of the source component;
step M3.2: and injecting the internal state data and the global state updating function of the source assembly into the project assembly wrapped by the source assembly through the native api of the compact context.
Preferably, the module M4 comprises:
step M4.1: importing a connector into a component which needs to display shared data in the project, wrapping the component which needs to display the shared data by the connector, and acquiring the shared data injected by the source component after the component is packaged by the connector;
step M4.2: the global state updating function is transmitted through the connector, the global state updating function is acquired in the assembly, and the global shared data module value needing to be updated is transmitted into the assembly through the global state updating function;
step M4.3: the data is transmitted from the updated component to the source component, the source component updates its own internal state, the internal state is injected into the item component of the package, and the parameters accepted by the component calling the connector function in the item component are changed.
Preferably, the global state update function includes: when a component calls a global shared data module which does not exist or a global shared data module attribute field value, the global state updating function finds illegal attributes through cyclic traversal and discards the illegal attributes; after discarding the incoming global shared data module, ensuring that the object structure of the incoming module is not polluted, and then merging the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
Compared with the prior art, the invention has the following beneficial effects:
1. the invention realizes global data sharing by maintaining the internal state of the outermost component and injecting the state data into the project, realizes communication between any component in the reaction project by updating the global state function, simultaneously updates a plurality of groups of state values, and simultaneously updates a plurality of groups of state values of the multi-state module;
2. the invention puts the logic of the update state into the component without separating the logic of the update state value, and the invention only focuses on the management of data, thereby solving the problem of various asynchronous state updates.
Drawings
Other features, objects and advantages of the present invention will become more apparent upon reading of the detailed description of non-limiting embodiments, given with reference to the accompanying drawings in which:
FIG. 1 is a schematic diagram showing shared data for internal components of an item;
FIG. 2 is a diagram illustrating the global status of the project internal components.
Detailed Description
The present invention will be described in detail with reference to specific examples. The following examples will assist those skilled in the art in further understanding the present invention, but are not intended to limit the invention in any way. It should be noted that variations and modifications could be made by those skilled in the art without departing from the inventive concept. These are all within the scope of the present invention.
Example 1
According to the invention, the global state data management system based on the reaction project comprises: as shown in figures 1-2 of the drawings,
module M1: defining a global shared data module and attribute field values corresponding to each global shared data module;
module M2: establishing a global state management module, and exporting a source component and a connector through the global state management module;
module M3: embedding the outermost component of the project into a source component, and initializing internal state data of the source component according to the global shared data module and attribute field values corresponding to each global shared data; injecting shared data and a global state updating function into the project through a source component;
module M4: and packaging the components needing to acquire global state data through the connector, and acquiring shared data injected by the source components after the components are packaged through the connector.
Specifically, the module M1 includes: splitting global shared data according to service modules, and establishing a plurality of different global shared data modules according to project actual requirements, wherein each global shared data module stores data in a key-value format; each global shared data module defines a corresponding attribute field value, each attribute field value being a globally shared state value.
Specifically, the module M3 includes:
module M3.1: importing a plurality of different global shared data modules, corresponding attribute field values and source components at the outermost layer of the project, transmitting the data of each global shared data module and the corresponding attribute field values into the source components in a parameter transmission mode, and initializing the received data of each global shared data module and the corresponding attribute field values into internal state data of the source components by the source components;
module M3.2: and injecting the internal state data and the global state updating function of the source assembly into the project assembly wrapped by the source assembly through the native api of the compact context.
Specifically, the module M4 includes:
module M4.1: importing a connector into a component which needs to display shared data in the project, wrapping the component which needs to display the shared data by the connector, and acquiring the shared data injected by the source component after the component is packaged by the connector;
module M4.2: the global state updating function is transmitted through the connector, the global state updating function is acquired in the assembly, and the global shared data module value needing to be updated is transmitted into the assembly through the global state updating function;
step M4.3: the data is transmitted from the updated component to the source component, the source component updates its own internal state, the internal state is injected into the item component of the package, and the parameters accepted by the component calling the connector function in the item component are changed.
Specifically, the global state update function includes: when a component calls a global shared data module which does not exist or a global shared data module attribute field value, the global state updating function finds illegal attributes through cyclic traversal and discards the illegal attributes; after discarding the incoming global shared data module, ensuring that the object structure of the incoming module is not polluted, and then merging the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
The global state data management method based on the reaction item provided by the invention comprises the following steps:
step M1: defining a global shared data module and attribute field values corresponding to each global shared data module;
step M2: establishing a global state management module, and exporting a source component and a connector through the global state management module;
step M3: embedding the outermost component of the project into a source component, and initializing the source component according to the global shared data module and attribute field values corresponding to each global shared data; injecting shared data into the project through the source component and updating a function of the shared data;
step M4: and packaging the components needing to acquire global state data through the connector, and acquiring shared data injected by the source components after the components are packaged through the connector.
Specifically, the step M1 includes: splitting global shared data according to service modules, and establishing a plurality of different global shared data modules according to project actual requirements, wherein each global shared data module stores data in a key-value format; each global shared data module defines a corresponding attribute field value, each attribute field value being a globally shared state value.
Specifically, the step M3 includes:
step M3.1: importing a plurality of different global shared data modules and source components at the outermost layer of the project, transmitting the data of each global shared data module into the source component in a parameter transmission mode, and initializing the received data of each global shared data module into internal state data of the source component by the interior of the source component;
step M3.2: and injecting the internal state data and the global state updating function of the source assembly into the project assembly wrapped by the source assembly through the native api of the compact context.
Specifically, the module M4 includes:
step M4.1: importing a connector into a component which needs to display shared data in the project, wrapping the component which needs to display the shared data by the connector, and acquiring the shared data injected by the source component after the component is packaged by the connector;
step M4.2: the global state updating function is transmitted through the connector, the global state updating function is acquired in the assembly, and the global shared data module value needing to be updated is transmitted into the assembly through the global state updating function;
step M4.3: the data is transmitted from the updated component to the source component, the source component updates its own internal state, the internal state is injected into the item component of the package, and the parameters accepted by the component calling the connector function in the item component are changed.
Specifically, the global state update function includes: when a component calls a global shared data module which does not exist or a global shared data module attribute field value, the global state updating function finds illegal attributes through cyclic traversal and discards the illegal attributes; after discarding the incoming global shared data module, ensuring that the object structure of the incoming module is not polluted, and then merging the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
Example 2
Example 2 is a modification of example 1
There are now a user nickName (nickName), user avatar (avatar), user gender (gender), order quantity (orderNum), order price total (orderTotal). These data need to be presented in multiple components of the project at the same time, and the nesting relationship between the multiple components is complex, which is difficult to solve by transferring values from parent-child components.
Step 1, building a global shared data module
In this embodiment, we define 2 shared data modules. The first module is a User information module object (User module), the internal fields comprise 3 fields, namely a User nickName (nickName), a User head portrait (avatar), a User gender (gender), the User module object content is { nickName: "nickName01", avatar: "http:// www.avatar.com/myavatar. Png" }, the second module is an Order module object (Order module), the internal fields comprise 2 fields, namely Order number (orderNum), order price total (orderTotal), and the Order module object content is { orderNum:10, orderTotal:100}.
Step 2, building a global state management module
Step 3 initialization of Global State data
And at the outermost layer of the project, importing a User information module object and an Order module object, importing a source component, wrapping an entry component of the project by using the source component, and transmitting external parameters of the User module object and the Order module object to the source component. The internal of the source component initializes the User module object data and the Order module object data into the internal state of the source component, and injects the functions of the internal state data and the updated state data (the function internal this is bound as the source component) into the wrapped project component through the native api of the real context.
Step 4 project internal component exhibition shared data
As shown in fig. 1;
step 4.1 Single component presentation sharing data
In the component needing to display shared data in the project (defined as a component A in the project herein), the connector function of the global state management module is imported, the component A is used as a parameter of the connector function, and the connector function is executed to obtain a new component A, because the component A is wrapped by the connector inside and the data injected by the source component in the step 3 of the embodiment is transmitted by the single-layer male-female component, the new component A can conveniently acquire all data of the user module and the order module in the way of this is. Tips. User and this is. Tips. Order, and the values of these modules can be used arbitrarily when rendering the interface.
Step 4.2 Multi-component presentation sharing data
And repeating the step of the component A by other components in the project, and acquiring all data of the user module and the order module, or optionally using values of the modules when rendering the interface. Therefore, the method and the device can conveniently acquire the value of the global state in any component in the project.
Step 5, the internal components of the project update the global state;
as shown in fig. 2;
step 5.1 internal execution of the Global State update function by the component
By [ step 4], we have successfully obtained global state data inside the a-component. Now the nickname value of the user module needs to be updated inside the a-component because of the traffic requirements. In [ embodiment step 3] the source component not only injects internal state data into the project internal component, but also injects a function for updating the state data, through the transfer of the connector, the inside of the a component can acquire the global state update function by the way of this is. Tips. Update globalstate, and the module value to be updated is input, for example, the nickName value is. Tips. Update globalstate ({ User { nickName: "newNickname" }) so that the function is executed inside the a component, but the internal tis of the function points to or is bound with the source component, so that the result of the function execution is the value of the internal state User module object of the source component.
Step 5.2 transfer of data before and after execution of the Global State update function
The data is transmitted from the A component to the source component, the source component updates the internal state of the source component, the internal state is injected into the item component of the package, the parameters accepted by the component calling the connector function in the item component are changed, and the part of the display interface related to the input parameters is also changed. That is, component a performs a global state update function, completes transferring its new state value to other components using connectors, and updates their interfaces in real time.
Step 5.3 updating the multimode block data internally of the component
In the [ step 5.1], the A component updates only a single state of a nickName (nickName), "nickName", "user head (avatar)", "order number (orderNum)", "order price total" (4 states, and similarly, if the "nickName (nickName)," avatar: "order: { orderNum:" newOrderNum }, "newOrderNum", "orderTotal:" is to be updated, the A component can execute this step 2.3, and the data update can be completed by just filling in the parameters with the correct module name and the corresponding attribute name of the module. The update data is only related to the data format and whether the corresponding attribute exists or not, so that the attribute value corresponding to each module can be conveniently updated, whether the attribute value is a single-module single attribute value or a multi-state module multi-group state value, and the problem of asynchronous more global state can be conveniently solved by the design.
Step 5.4 internal update asynchronous task and logic drop-off of component
Assuming that the global state of the component A needs to be updated at present to be "user head portrait" (avatar), but the acquisition of the value of the user head portrait "is an asynchronous process, we need to call the global state updating function to update the state after a certain logic processing is performed in the component A to obtain the value of the user head portrait". The logic for acquiring the new state value of the user head portrait is carried out in the A component, the logic is put down in the A component, the integrity of the logic of the A component is not damaged, the state value of the user head portrait can be clearly known how the state value of the user head portrait is acquired in the A component and updated, and the development consistency is ensured. The global state update function only concerns data, independent of asynchronous tasks and component internal logic.
Example 3
Example 3 is a modification of example 1 and/or example 2
The act project is developed based on components, the independent components are convenient for abstraction and assembly, but the layer-by-layer nesting of the components brings great inconvenience to the communication between the components, and the third party solution quoted by a developer has the dilemma of difficult learning and use and hard stripping of the logic and the state updating logic of the components. The application provides a brand-new global state data management scheme, which can conveniently realize communication among any components in a reaction project, can update a plurality of groups of state values at the same time, and can update a plurality of groups of state values of a multi-state module at the same time. The logic of the update state is put down to the inside of the component, the logic of the update state value is not separated, and the scheme only focuses on the management of data, thereby solving the problem of various asynchronous state updates.
Step 1 definition of Global shared data Module
The global shared data is split according to the service module, a plurality of different module objects, such as a user information module object, a shopping cart module object, an order module object and the like, are established according to the actual requirements of the project, the data is stored under each module object in a key-value object format, such as the user information module object, which has nickName and head portrait 2 attribute values, and the attribute values can be written as { nickName: "xx", avatar: "xx" }, and the like, and the value corresponding to each attribute defined herein is a state value to be globally shared. Before the project runs, the global state module and the attribute field values corresponding to the module need to be well defined.
Step 2 definition of Global State management Module
A module is built that exports two objects.
One export object is a source component that wraps the entire project and then injects shared data into the project and updates the function of the shared data (the external component injects shared data into the wrapped component, the internal component can obtain the injected data in real time through a specific wrapper, this function is the native api implemented by React createContext), which the component defines as the source component.
The other derived object is a function, the function is used for packaging components needing to acquire global state data, the components acquire a new component (the processing scheme is called as a high-order component here) after the components are packaged and processed by the function, the new component can conveniently acquire shared data injected by a source component, and the derived function defines the system as a connector.
Step 2.1 initialization of internal State data of Source Components
When the project is initialized, different data modules defined in the step 1 are imported into the outermost layer of the project (the importing module is the native grammar of the javascript language), the data of each module is imported into the source component in a parameter transferring mode, the source component receives external parameters, each module object is merged into larger object data by taking the module name as an attribute, the merged object data is initialized into an internal state (the internal state of the component is the native definition of the reaction), and the component realizes the control of the interface by maintaining the change of the internal state).
Step 2.2 definition of Global State update function (updateGlobal State)
The internal state of the component can be updated through a setState method (the setState method is api realized in the reaction), but the internal component wrapped by the source component cannot update the internal state of the source component, a function is defined to update the internal state, and the global state update function and the internal state of the source component are injected into the internal component through a Provider and Consumer mechanism provided by React createContext, so that the internal component can obtain the state of the source component and the global state update function after being wrapped by a connector. The function is defined inside the source component, the parameter is a module object to be updated, the structure of the parameter is an object structure similar to the internal state of the source component, the parameter can be a single or a plurality of module objects, the attribute value in each module object can be a single or a plurality of module objects, and no return value exists. The number of modules of the incoming parameters and the number of attributes under the modules determine the corresponding content of the source assembly for updating the internal state, if the single module attribute is incoming, the source assembly updates the single module attribute, and if the multiple modules and attributes are incoming, the source assembly updates the multiple modules and attributes. The flexible parameter structure determines the diversity of global state updates.
Step 2.3 internal implementation of the Global State update function
Step 2.3.1 parameter filtration
When other components call the method to transfer the non-stored module name or the non-stored attribute in the module object, the program finds the illegal attribute through cyclic traversal and discards the illegal attribute, because the non-stored module name or the non-stored module attribute pollutes the original internal state data structure of the source component, and the program only keeps the module name with the internal state and the attribute stored under the module object. The parameter filtering effectively prevents the user from transmitting parameters randomly or the parameters are incorrectly transmitted.
Step 2.3.2 parameter merger
After the incoming module object is subjected to parameter filtering, the incoming module object structure is guaranteed not to be polluted, then the incoming module object and the original state module object are combined (the incoming module object covers the original state module object) to obtain a new module object to be updated, at the moment, a setState method is used for introducing a new module object value into (a compact internal api can be used for updating the internal state of the component partially or completely), and the internal state of the source component can be updated. The purpose of merging the incoming module object with the original state module object is to ensure that each time the module object is updated is a complete and brand new object, and the incoming module object can only transmit part of attribute fields which need to be updated, and the function can be automatically completed when other attribute fields are merged. The design purpose is that other components can update single state value or multiple groups of state values conveniently in the actual scene.
Those skilled in the art will appreciate that the systems, apparatus, and their respective modules provided herein may be implemented entirely by logic programming of method steps such that the systems, apparatus, and their respective modules are implemented as logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers, etc., in addition to the systems, apparatus, and their respective modules being implemented as pure computer readable program code. Therefore, the system, the apparatus, and the respective modules thereof provided by the present invention may be regarded as one hardware component, and the modules included therein for implementing various programs may also be regarded as structures within the hardware component; modules for implementing various functions may also be regarded as being either software programs for implementing the methods or structures within hardware components.
The foregoing describes specific embodiments of the present invention. It is to be understood that the invention is not limited to the particular embodiments described above, and that various changes or modifications may be made by those skilled in the art within the scope of the appended claims without affecting the spirit of the invention. The embodiments of the present application and features in the embodiments may be combined with each other arbitrarily without conflict.
Claims (6)
1. A global state data management system based on a reaction project, comprising:
module M1: defining a global shared data module and attribute field values corresponding to each global shared data module;
module M2: establishing a global state management module, and exporting a source component and a connector through the global state management module;
module M3: embedding the outermost component of the project into a source component, and initializing internal state data of the source component according to the global shared data module and attribute field values corresponding to each global shared data; injecting shared data and a global state updating function into the project through a source component;
module M4: packaging a component needing to acquire global state data through a connector, and acquiring shared data injected by a source component after the component is packaged through the connector;
the module M3 includes:
module M3.1: importing a plurality of different global shared data modules, corresponding attribute field values and source components at the outermost layer of the project, transmitting the data of each global shared data module and the corresponding attribute field values into the source components in a parameter transmission mode, and initializing the received data of each global shared data module and the corresponding attribute field values into internal state data of the source components by the source components;
module M3.2: injecting the internal state data and the global state updating function of the source assembly into the project assembly wrapped by the source assembly through the native api of the compact context;
the module M4 includes:
module M4.1: importing a connector into a component which needs to display shared data in the project, wrapping the component which needs to display the shared data by the connector, and acquiring the shared data injected by the source component after the component is packaged by the connector;
module M4.2: the global state updating function is transmitted through the connector, the global state updating function is acquired in the assembly, and the global shared data module value needing to be updated is transmitted into the assembly through the global state updating function; the global state updating function is defined in the source assembly, the parameters are module objects to be updated, and the module names and the attribute names corresponding to the modules are correctly filled in the parameters, so that the data updating can be completed;
step M4.3: the data is transmitted from the updated component to the source component, the source component updates its own internal state, the internal state is injected into the item component of the package, and the parameters accepted by the component calling the connector function in the item component are changed.
2. The reaction project-based global state data management system according to claim 1, wherein the module M1 comprises: splitting global shared data according to service modules, and establishing a plurality of different global shared data modules according to project actual requirements, wherein each global shared data module stores data in a key-value format; each global shared data module defines a corresponding attribute field value, each attribute field value being a globally shared state value.
3. The reaction project-based global state data management system of claim 1, wherein the global state update function comprises: when a component calls a global shared data module which does not exist or a global shared data module attribute field value, the global state updating function finds illegal attributes through cyclic traversal and discards the illegal attributes; after discarding the incoming global shared data module, ensuring that the object structure of the incoming module is not polluted, and then merging the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
4. A global state data management method based on a reaction project, comprising:
step M1: defining a global shared data module and attribute field values corresponding to each global shared data module;
step M2: establishing a global state management module, and exporting a source component and a connector through the global state management module;
step M3: embedding the outermost component of the project into a source component, and initializing the source component according to the global shared data module and attribute field values corresponding to each global shared data; injecting shared data into the project through the source component and updating a function of the shared data;
step M4: packaging a component needing to acquire global state data through a connector, and acquiring shared data injected by a source component after the component is packaged through the connector;
the step M3 includes:
step M3.1: importing a plurality of different global shared data modules and source components at the outermost layer of the project, transmitting the data of each global shared data module into the source component in a parameter transmission mode, and initializing the received data of each global shared data module into internal state data of the source component by the interior of the source component;
step M3.2: injecting the internal state data and the global state updating function of the source assembly into the project assembly wrapped by the source assembly through the native api of the compact context;
the step M4 includes:
step M4.1: importing a connector into a component which needs to display shared data in the project, wrapping the component which needs to display the shared data by the connector, and acquiring the shared data injected by the source component after the component is packaged by the connector;
step M4.2: the global state updating function is transmitted through the connector, the global state updating function is acquired in the assembly, and the global shared data module value needing to be updated is transmitted into the assembly through the global state updating function; the global state updating function is defined in the source assembly, the parameters are module objects to be updated, and the module names and the attribute names corresponding to the modules are correctly filled in the parameters, so that the data updating can be completed;
step M4.3: the data is transmitted from the updated component to the source component, the source component updates its own internal state, the internal state is injected into the item component of the package, and the parameters accepted by the component calling the connector function in the item component are changed.
5. The method of claim 4, wherein the step M1 comprises: splitting global shared data according to service modules, and establishing a plurality of different global shared data modules according to project actual requirements, wherein each global shared data module stores data in a key-value format; each global shared data module defines a corresponding attribute field value, each attribute field value being a globally shared state value.
6. The method of claim 4, wherein the global state update function comprises: when a component calls a global shared data module which does not exist or a global shared data module attribute field value, the global state updating function finds illegal attributes through cyclic traversal and discards the illegal attributes; after discarding the incoming global shared data module, ensuring that the object structure of the incoming module is not polluted, and then merging the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011167627.8A CN112241282B (en) | 2020-10-27 | 2020-10-27 | Global state data management method and system based on reaction project |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011167627.8A CN112241282B (en) | 2020-10-27 | 2020-10-27 | Global state data management method and system based on reaction project |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112241282A CN112241282A (en) | 2021-01-19 |
| CN112241282B true CN112241282B (en) | 2024-02-23 |
Family
ID=74170079
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011167627.8A Active CN112241282B (en) | 2020-10-27 | 2020-10-27 | Global state data management method and system based on reaction project |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112241282B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113076099A (en) * | 2021-03-22 | 2021-07-06 | 深圳市金蚁云数字科技有限公司 | Page generation method, device, equipment and computer storage medium |
| CN113590419A (en) * | 2021-07-23 | 2021-11-02 | 北京沃东天骏信息技术有限公司 | Function management method and device |
| CN114567623B (en) * | 2022-02-20 | 2023-09-08 | 中国银联股份有限公司 | Page display method and device |
| CN114625436B (en) * | 2022-03-04 | 2024-06-04 | 中国—东盟信息港股份有限公司 | Remote module loading method for front-end application containerization |
| CN114675923B (en) * | 2022-04-13 | 2024-09-27 | 上海微盟企业发展有限公司 | Configuration type operation interface setting method, device and medium |
| CN117520019B (en) * | 2024-01-05 | 2024-04-09 | 杭州玳数科技有限公司 | Component communication method and device |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2238973A1 (en) * | 1996-01-19 | 1997-07-24 | Object Technology Licensing Corp. | An object oriented programming based global registry system, method, and article of manufacture |
| CN107908398A (en) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | Method based on React technique constructions web applications |
| CN109032587A (en) * | 2018-07-19 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | A kind of data stream management frame, method, terminal device and storage medium |
| CN110781010A (en) * | 2019-09-24 | 2020-02-11 | 贝壳技术有限公司 | Method, device, equipment and medium for transmitting data between page components |
| CN111078220A (en) * | 2019-12-19 | 2020-04-28 | 浪潮云信息技术有限公司 | Method and system for implementing front-end state change management |
| CN111694837A (en) * | 2020-04-08 | 2020-09-22 | 北京瑞策科技有限公司 | Shared data storage method and device based on service data block chain |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| FR3022420B1 (en) * | 2014-06-13 | 2018-03-23 | Bull Sas | METHODS AND SYSTEMS FOR MANAGING AN INTERCONNECTION NETWORK |
| US10402786B2 (en) * | 2016-12-30 | 2019-09-03 | Dropbox, Inc. | Managing projects in a content management system |
| US20190324729A1 (en) * | 2018-04-24 | 2019-10-24 | Microsoft Technology Licensing, Llc | Web Application Development Using a Web Component Framework |
| US10977011B2 (en) * | 2019-01-31 | 2021-04-13 | Salesforce.Com, Inc. | Structured development for web application frameworks |
| EP3953839A4 (en) * | 2019-04-09 | 2022-12-14 | Jiveworld, Spc | System and method for dual mode presentation of content in a target language to improve listening fluency in the target language |
-
2020
- 2020-10-27 CN CN202011167627.8A patent/CN112241282B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2238973A1 (en) * | 1996-01-19 | 1997-07-24 | Object Technology Licensing Corp. | An object oriented programming based global registry system, method, and article of manufacture |
| CN107908398A (en) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | Method based on React technique constructions web applications |
| CN109032587A (en) * | 2018-07-19 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | A kind of data stream management frame, method, terminal device and storage medium |
| CN110781010A (en) * | 2019-09-24 | 2020-02-11 | 贝壳技术有限公司 | Method, device, equipment and medium for transmitting data between page components |
| CN111078220A (en) * | 2019-12-19 | 2020-04-28 | 浪潮云信息技术有限公司 | Method and system for implementing front-end state change management |
| CN111694837A (en) * | 2020-04-08 | 2020-09-22 | 北京瑞策科技有限公司 | Shared data storage method and device based on service data block chain |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112241282A (en) | 2021-01-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112241282B (en) | Global state data management method and system based on reaction project | |
| US11409949B2 (en) | Mobile device resource provisioning system and method | |
| CN111158818B (en) | Page rendering method and device | |
| Hagino | Practical Node-RED Programming: Learn powerful visual programming techniques and best practices for the web and IoT | |
| CN105072461A (en) | Data processing method and device | |
| CN111324347B (en) | Component construction method, device and system, page generation method, device and medium | |
| CN109491687B (en) | Hot updating method and device of application software, terminal and readable medium | |
| CN104378393A (en) | Resource sharing method and corresponding device | |
| CN115562763A (en) | Data distribution service calling method, system, electronic equipment and readable storage medium | |
| CN110673827A (en) | Resource calling method and device based on android system and electronic equipment | |
| CN114757159A (en) | Packaging development method and system of multifunctional data table component | |
| CN110837367B (en) | User interface processing method and device and electronic equipment | |
| CN112631638A (en) | Terminal application updating method and device, storage medium and electronic equipment | |
| CN101261580A (en) | System and method for processing data | |
| CN114217874B (en) | Applet generation method, device, apparatus, readable storage medium and product | |
| CN116028735A (en) | Page rendering method and device | |
| Krasimir | React in patterns | |
| CN117348768A (en) | Interactive play generation method, device, equipment and storage medium | |
| CN115934212A (en) | Interface calling method and system for vehicle-mounted application, electronic equipment and storage medium | |
| CN116627419A (en) | Front-end service packaging method and related equipment | |
| CN118626078A (en) | Automatic test page modeling method and device, storage medium and electronic equipment | |
| CN117389567A (en) | Multi-terminal application development method, device, medium and equipment | |
| CN117806668A (en) | Micro-service upgrading method and device, electronic equipment and storage medium | |
| CN116795339A (en) | Service interface generation method, device, equipment and storage medium | |
| CN117742688A (en) | Content generation method, device, medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |