CN112241282A - Method and system for managing global state data based on act project - Google Patents
Method and system for managing global state data based on act project Download PDFInfo
- Publication number
- CN112241282A CN112241282A CN202011167627.8A CN202011167627A CN112241282A CN 112241282 A CN112241282 A CN 112241282A CN 202011167627 A CN202011167627 A CN 202011167627A CN 112241282 A CN112241282 A CN 112241282A
- Authority
- CN
- China
- Prior art keywords
- global
- module
- component
- shared data
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 27
- 230000006870 function Effects 0.000 claims abstract description 80
- 238000004806 packaging method and process Methods 0.000 claims abstract description 16
- 238000007726 management method Methods 0.000 claims description 21
- 230000005540 biological transmission Effects 0.000 claims description 10
- 238000013523 data management Methods 0.000 claims description 8
- 238000012546 transfer Methods 0.000 abstract description 6
- 239000010410 layer Substances 0.000 description 15
- 238000004891 communication Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000001914 filtration Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- DBGIVFWFUFKIQN-UHFFFAOYSA-N (+-)-Fenfluramine Chemical compound CCNC(C)CC1=CC=CC(C(F)(F)F)=C1 DBGIVFWFUFKIQN-UHFFFAOYSA-N 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 239000003638 chemical reducing agent Substances 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000008676 import Effects 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
Images
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 method and a system for managing global state data based on a act project, which comprises the following steps: defining global shared data modules and attribute field values corresponding to the global shared data modules; establishing a global state management module, and leading out a source component and a connector through the global state management module; nesting the outermost layer component of the project into a source head component, and initializing the source head component according to the global shared data module and the attribute field value corresponding to each global shared data; injecting shared data into the project through the source assembly and updating functions of the shared data; and packaging the component needing to acquire the global state data through the connector, and acquiring the shared data injected by the source component after the component is processed by the connector packaging. The invention transfers the logic of the update state to the interior of the component, does not separate the logic of the update state value, and only focuses on the management of data, thereby solving the problem of updating various asynchronous states.
Description
Technical Field
The invention relates to the technical field of data processing, in particular to a method and a system for managing global state data based on a react project.
Background
The React is a JavaScript library for constructing a user interface, the use of the React can be conveniently developed based on components (which can be understood as independent interface blocks and can be nested), and the interface display content of the components is obtained by using data (the data comprises two parts, namely internal state data of the components is called state, internal logic maintenance of the components is carried out, external incoming data is called props, and the props cannot be changed by the components). The compiling mode of the component frees a developer from the control logic of the interface, and the data updating interface is updated along with the data driving interface, so that the developer is more concentrated on the correct processing of the data, and the interface development efficiency is improved.
Since components can be nested, the data flow of items is stepped from outer to inner, and data transfer and maintenance becomes difficult to maintain when data transfer exceeds 3 levels. The third-party solution cited by the developer has the difficulties of difficult learning and difficult use.
The wrapping and nesting of the components, which are written in the form of labels when in use, such as < componentA > </componentA > represents the A component, such as < componentA > < componentB > </componentB > </componentA > represents the A component wraps the B component, and the B component can also be understood to be nested inside the A component.
The read createContext is the api native to the read, the createContext provides 2 components Provider and Provider, the Provider is a container component, packages the components needing shared data, any hierarchical component under the package can obtain the shared data provided by the Provider component, and the shared data is transmitted through the value attribute of the Provider. The descendant component wrapped by the Provider needs to execute a callback function inside by means of Provider wrapping when wanting to acquire shared data, and the parameter of the callback function is the shared data.
A key-value format object is a data structure mapped to value by key, for example, a data object obj01 is created, which contains 3 pieces of data, i.e., "name", "phone" and "whether to display", and can be written as let obj01 { "name": "Zhang San", "Phone": "15012345678", "isShow": false, the content can be accessed by the name of the key, for example, obj01[ "name" ] can obtain the content of the name, and the key-value format object is the very common object format in javascript.
The global state management open source solution redux provides a set of strict data transmission paths, provides various concepts and modules (store, action and reducer, predictive state management, data non-modifiable and pure functions) which are difficult to understand, strips the update logic out every time of updating, solves the problem of asynchronization by referring to a third-party middleware, and is extremely unfriendly to developers by an API (application programming interface). The operation of updating multiple groups of data simultaneously cannot be performed.
The global state management open source solution mobx uses an observer mode to observe data changes (commonly seen in concepts of observer state, Computed values, Reactiohs and Actiohs), is simple, transparent and scalable, and has a relatively simple API. However, the update logic is still separated in the update state, and the operation of updating multiple sets of data simultaneously cannot be performed.
Native API read hooks, which is an API provided by a new edition of read framework, need to write project components into functional components, are not complete solutions, need to organize general solutions by developers themselves, and use scenes are limited to functional components only.
The invention solves the problem that the global state data in the React 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, conveniently realizes the communication among any components, can simultaneously update a plurality of groups of state values of a plurality of modules, and also solves the problem that various asynchronous states are difficult to update.
Disclosure of Invention
Aiming at the defects in the prior art, the invention aims to provide a system and a method for managing global state data based on a react project.
The invention provides a global state data management system based on a react project, which comprises:
module M1: defining global shared data modules and attribute field values corresponding to the global shared data modules;
module M2: establishing a global state management module, and leading out a source component and a connector through the global state management module;
module M3: nesting the outermost layer component of the project into a source head component, and initializing internal state data of the source head component according to the global shared data module and the attribute field value corresponding to each global shared data; injecting shared data and a global state updating function into the project through the source component;
module M4: and packaging the component needing to acquire the global state data through the connector, and acquiring the shared data injected by the source component after the component is processed by the connector packaging.
Preferably, said module M1 comprises: splitting global shared data according to a service module, establishing a plurality of different global shared data modules according to actual requirements of projects, and storing the data by each global shared data module in a key-value format; each globally shared data module defines a corresponding attribute field value, each attribute field value being a state value that is globally shared.
Preferably, said module M3 comprises:
module M3.1: a plurality of different global shared data modules and corresponding attribute field values and source components are led into the outmost layer of the project, data of all the global shared data modules and corresponding attribute field values are transmitted into the source components in a parameter transmission mode, and the received data of all the global shared data modules and corresponding attribute field values are initialized into internal state data of the source components inside the source components;
module M3.2: and injecting the internal state data of the source component and the global state updating function into the project component wrapped by the source component through the native api of the read context.
Preferably, said module M4 comprises:
module M4.1: the method comprises the steps that a connector is led into a component needing to display shared data in a project, the connector wraps the component needing to display the shared data, and the component obtains the shared data injected by a source component after being packaged by the connector;
module M4.2: the global state updating function is transmitted through the connector, the global state updating function is obtained inside the component, and the global shared data module value needing to be updated is transmitted into the component through the global state updating function;
step M4.3: and data is transmitted to the source assembly from the updated assembly, the source assembly updates the internal state of the source assembly, the internal state is injected into the item assembly of the package, and parameters received by the assembly calling the connector function in the item assembly are changed.
Preferably, the global state update function includes: when the component calls a nonexistent global shared data module or a global shared data module attribute field value, the global state updating function finds the illegal attribute through circular traversal and discards the illegal attribute; and after the incoming global shared data module is abandoned, ensuring that the structure of the incoming module object is not polluted, and then combining the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
The invention provides a method for managing global state data based on a act project, which comprises the following steps:
step M1: defining global shared data modules and attribute field values corresponding to the global shared data modules;
step M2: establishing a global state management module, and leading out a source component and a connector through the global state management module;
step M3: nesting the outermost layer component of the project into a source head component, and initializing the source head component according to the global shared data module and the attribute field value corresponding to each global shared data; injecting shared data into the project through the source assembly and updating functions of the shared data;
step M4: and packaging the component needing to acquire the global state data through the connector, and acquiring the shared data injected by the source component after the component is processed by the connector packaging.
Preferably, the step M1 includes: splitting global shared data according to a service module, establishing a plurality of different global shared data modules according to actual requirements of projects, and storing the data by each global shared data module in a key-value format; each globally shared data module defines a corresponding attribute field value, each attribute field value being a state value that is globally shared.
Preferably, the step M3 includes:
step M3.1: a plurality of different global shared data modules and source components are led into the outermost layer of the project, data of all the global shared data modules are transmitted into the source components in a parameter transmission mode, and the received data of all the global shared data modules are initialized to internal state data of the source components inside the source components;
step M3.2: and injecting the internal state data of the source component and the global state updating function into the project component wrapped by the source component through the native api of the read context.
Preferably, said module M4 comprises:
step M4.1: the method comprises the steps that a connector is led into a component needing to display shared data in a project, the connector wraps the component needing to display the shared data, and the component obtains the shared data injected by a source component after being packaged by the connector;
step M4.2: the global state updating function is transmitted through the connector, the global state updating function is obtained inside the component, and the global shared data module value needing to be updated is transmitted into the component through the global state updating function;
step M4.3: and data is transmitted to the source assembly from the updated assembly, the source assembly updates the internal state of the source assembly, the internal state is injected into the item assembly of the package, and parameters received by the assembly calling the connector function in the item assembly are changed.
Preferably, the global state update function includes: when the component calls a nonexistent global shared data module or a global shared data module attribute field value, the global state updating function finds the illegal attribute through circular traversal and discards the illegal attribute; and after the incoming global shared data module is abandoned, ensuring that the structure of the incoming module object is not polluted, and then combining 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 the global data sharing by maintaining the internal state of the outermost layer component and injecting the state data into the project, realizes the communication between any components in the act 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 a multi-state module;
2. the invention transfers the logic of the update state to the interior of the component, does not separate the logic of the update state value, and only focuses on the management of data, thereby solving the problem of updating various asynchronous states.
Drawings
Other features, objects and advantages of the invention will become more apparent upon reading of the detailed description of non-limiting embodiments with reference to the following drawings:
FIG. 1 is a diagram of project internal components showing shared data;
FIG. 2 is a diagram illustrating the updating of global status by the components inside the project.
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 invention, but are not intended to limit the invention in any way. It should be noted that it would be obvious to those skilled in the art that various changes and modifications can be made without departing from the spirit of the invention. All falling within the scope of the present invention.
Example 1
The invention provides a global state data management system based on a react project, which comprises: as shown in the figures 1-2 of the drawings,
module M1: defining global shared data modules and attribute field values corresponding to the global shared data modules;
module M2: establishing a global state management module, and leading out a source component and a connector through the global state management module;
module M3: nesting the outermost layer component of the project into a source head component, and initializing internal state data of the source head component according to the global shared data module and the attribute field value corresponding to each global shared data; injecting shared data and a global state updating function into the project through the source component;
module M4: and packaging the component needing to acquire the global state data through the connector, and acquiring the shared data injected by the source component after the component is processed by the connector packaging.
Specifically, the module M1 includes: splitting global shared data according to a service module, establishing a plurality of different global shared data modules according to actual requirements of projects, and storing the data in a key-va/ue format by each global shared data module; each globally shared data module defines a corresponding attribute field value, each attribute field value being a state value that is globally shared.
Specifically, the module M3 includes:
module M3.1: a plurality of different global shared data modules and corresponding attribute field values and source components are led into the outmost layer of the project, data of all the global shared data modules and corresponding attribute field values are transmitted into the source components in a parameter transmission mode, and the received data of all the global shared data modules and corresponding attribute field values are initialized into internal state data of the source components inside the source components;
module M3.2: and injecting the internal state data of the source component and the global state updating function into the project component wrapped by the source component through the native api of the read context.
Specifically, the module M4 includes:
module M4.1: the method comprises the steps that a connector is led into a component needing to display shared data in a project, the connector wraps the component needing to display the shared data, and the component obtains the shared data injected by a source component after being packaged by the connector;
module M4.2: the global state updating function is transmitted through the connector, the global state updating function is obtained inside the component, and the global shared data module value needing to be updated is transmitted into the component through the global state updating function;
step M4.3: and data is transmitted to the source assembly from the updated assembly, the source assembly updates the internal state of the source assembly, the internal state is injected into the item assembly of the package, and parameters received by the assembly calling the connector function in the item assembly are changed.
Specifically, the global state update function includes: when the component calls a nonexistent global shared data module or a global shared data module attribute field value, the global state updating function finds the illegal attribute through circular traversal and discards the illegal attribute; and after the incoming global shared data module is abandoned, ensuring that the structure of the incoming module object is not polluted, and then combining the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
The invention provides a method for managing global state data based on a act project, which comprises the following steps:
step M1: defining global shared data modules and attribute field values corresponding to the global shared data modules;
step M2: establishing a global state management module, and leading out a source component and a connector through the global state management module;
step M3: nesting the outermost layer component of the project into a source head component, and initializing the source head component according to the global shared data module and the attribute field value corresponding to each global shared data; injecting shared data into the project through the source assembly and updating functions of the shared data;
step M4: and packaging the component needing to acquire the global state data through the connector, and acquiring the shared data injected by the source component after the component is processed by the connector packaging.
Specifically, the step M1 includes: splitting global shared data according to a service module, establishing a plurality of different global shared data modules according to actual requirements of projects, and storing the data by each global shared data module in a key-value format; each globally shared data module defines a corresponding attribute field value, each attribute field value being a state value that is globally shared.
Specifically, the step M3 includes:
step M3.1: a plurality of different global shared data modules and source components are led into the outermost layer of the project, data of all the global shared data modules are transmitted into the source components in a parameter transmission mode, and the received data of all the global shared data modules are initialized to internal state data of the source components inside the source components;
step M3.2: and injecting the internal state data of the source component and the global state updating function into the project component wrapped by the source component through the native api of the read context.
Specifically, the module M4 includes:
step M4.1: the method comprises the steps that a connector is led into a component needing to display shared data in a project, the connector wraps the component needing to display the shared data, and the component obtains the shared data injected by a source component after being packaged by the connector;
step M4.2: the global state updating function is transmitted through the connector, the global state updating function is obtained inside the component, and the global shared data module value needing to be updated is transmitted into the component through the global state updating function;
step M4.3: and data is transmitted to the source assembly from the updated assembly, the source assembly updates the internal state of the source assembly, the internal state is injected into the item assembly of the package, and parameters received by the assembly calling the connector function in the item assembly are changed.
Specifically, the global state update function includes: when the component calls a nonexistent global shared data module or a global shared data module attribute field value, the global state updating function finds the illegal attribute through circular traversal and discards the illegal attribute; and after the incoming global shared data module is abandoned, ensuring that the structure of the incoming module object is not polluted, and then combining 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 user nicknames (nicknames), user avatars (avatars), user gender (gender), order quantity (orderNum), order price totals (orderTotal). The data needs to be simultaneously displayed in a plurality of components of the project, the nesting relation among the plurality of components is complex, and the problem of passing values by using parent-child components is difficult to solve.
Step 1 establishing a global shared data module
In this embodiment, we define 2 shared data modules. The module is a User information module object (User module), the internal fields of the module comprise 3 fields which are respectively a nickName (nickName) of a User, a head portrait (avatar) of the User, a gender (gender) of the User, the content of the User module object is { nickName: "nickName01", avatar: "http:// www.avatar.com/myavatar. png', and the module is an Order module object (Order module), the internal fields of the module comprise 2 fields which are respectively the Order quantity (Order Num), the Order price total (Order Total), and the content of the Order module object is { Order Num:10, Order Total:100}.
Step 2, establishing a global state management module
Step 3 initialization of global state data
And importing a User information module object and an Order module object at the outmost layer of the project, importing a source assembly, wrapping an entry assembly of the project by the source assembly, and transmitting an external parameter User module object and an Order module object into the source assembly. The inside of the source assembly initializes the User module object data and the Order module object data to the internal state of the source assembly, and injects the function of the internal state data and the updating state data (the function internal this points to be bound as the source assembly) into the item assembly wrapped by the source assembly through the native api of the read context.
Step 4, displaying shared data by internal components of project
Schematic view-project internal component show shared data schematic view 01
Step 4.1 Single component display sharing data
In a component (defined as an internal component a of a project) which needs to show shared data in the project, a connector function of a 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 connector internally wraps the component a with a layer of component and transmits data injected by a source component in [ embodiment step 3] through a single-layer parent-child component, all data of a user module and an order module can be conveniently obtained in the new component a through this.
Step 4.2 Multi-component display sharing data
Other components inside the project repeat the step of component A, all data of the user module and the order module can be obtained, and values of the modules can be used arbitrarily when the interface is rendered. Therefore, the value of the global state can be conveniently acquired in any component in the project.
Step 5, updating the global state of the internal components of the project;
schematic view see, project internal component update Global State schematic-02
Step 5.1 the component executes the global state update function internally
Through step 4, the global state data is successfully acquired inside the component A. Now the nickname value of the user module needs to be updated inside the a-component because of the service requirements. In [ embodiment step 3], the source component injects not only internal state data but also a function for updating state data into the project internal component, and through the transmission of the connector, the inside of the a component can obtain a global state update function in a way of this.
Step 5.2 transfer of data before and after execution of Global State update function
And data is transmitted from the component A 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 received by the component calling the connector function in the item component are changed, and the part of the display interface related to the transmitted parameters is changed. Namely, the component A executes a global state updating function, completes the transmission of the new state value of the component A to other components using the connector, and updates the interfaces of the components in real time.
Step 5.3 updating Multi-Module status data inside the Components
In step 5.1, the component a updates only the single status of the nickName (nickName) value, and if there are 4 statuses of nickName (nickName), "user avatar", "order quantity (orderNum)", "order price total (orderTotal)" to be updated, we can also execute this, procedure, update globle state ({ user:, { nickName: "newNickname", avatar "}) in the component a, and as can be known from step 2.3, we can complete the data update as long as the module name and the corresponding attribute name of the module are correctly filled in the parameters. The updating data is only related to the data format and whether the corresponding attribute exists or not, so that the attribute values corresponding to the modules can be conveniently updated, no matter the attribute values are single attribute values of a single module or multiple state values of multiple state modules, and the problem of asynchronous and global states can be conveniently solved by the design.
Step 5.4 updating asynchronous task and logic lowering inside the component
Suppose that the current a component needs to update the global state to be "user avatar" (avatar), but the acquisition of the value of "user avatar" is an asynchronous process, and we need to call the global state update function to update the state after obtaining the value of "user avatar" through certain logic processing in the a component. The logic for acquiring the new state value of the user head portrait is placed in the component A, the logic is placed in the component A, the integrity of the logic of the component A is not damaged, how the state value of the user head portrait is acquired and updated in the component A can be clearly known, and the development consistency is ensured. The global state update function is only concerned with data and is independent of the asynchronous task and the internal logic of the component.
Example 3
Example 3 is a modification of example 1 and/or example 2
The React project is developed based on components, independent components are convenient to abstract and assemble, however, communication among the components is greatly inconvenient due to the fact that the components are nested layer by layer, and a third party solution scheme quoted by a developer is difficult to learn and use and has the difficulty that the logic of the components and state updating logic are hard to peel off. The application provides a brand-new overall state data management scheme, communication between any components in a React project can be conveniently realized, multiple groups of state values can be updated simultaneously, and multiple groups of state values of multiple state modules can be updated simultaneously. The logic of the update state is transferred to the interior of the component, the logic of the update state value is not separated, the scheme only focuses on the management of data, and therefore the problem of updating various asynchronous states is solved.
Step 1 definition of globally shared data modules
The global shared data is split according to the business module, a plurality of different module objects are established according to the actual requirement of the project, such as a user information module object, a shopping cart module object, an order module object and the like, data are stored in a key-value object format under each module object, such as a user information module object, which has a nickName and 2 attribute values of a head portrait and can be written as { nickName: "xx", avatar: "xxxx", 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 value corresponding to the module need to be explicitly defined.
Step 2 definition of Global State management Module
A module is created that exports two objects.
One export object is the source component, which the system defines as the source component, which wraps the entire project and then injects the shared data internally to the project and updates the functions of the shared data (external components inject shared data into the wrapped components, internal components can get the injected data in real time through a specific wrapper, which is the native api implemented by the real createContext).
Another export object is a function, the function is used for packaging a component needing to acquire global state data, the component is processed by the function packaging to obtain a new component (the processing scheme is called as a high-order component), the new component can conveniently acquire the shared data injected by the source component, and the export function is defined as a connector by the system.
Step 2.1 initialization of internal state data of source component
When the project is initialized, different data modules defined in the step 1 are imported into the outermost layer of the project (the import module is the native grammar of the javascript language), the data of each module is imported into a source component in a parameter transmission mode, the source component receives external parameters, module objects are combined into larger object data according to module names and attributes, and the combined object data is initialized to be in an internal state (the internal state of the component is the original definition of the act, and the component realizes the control of an interface by maintaining the change of the internal state).
Step 2.2 definition of Global State update function (updateGloblestate)
The internal state of the component can be updated through a setState method (the setState method is api realized in a real internal mode), but the internal state of the source component cannot be updated through the internal component wrapped by 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 Provider mechanism provided by a read createContext, so that the internal component can obtain the state of the source component and the global state update function after being wrapped through a connector. The function is defined in the source component, the parameter is the module object to be updated, the structure of the function is similar to the object structure of the internal state of the source component, and can be single or multiple module objects, and the attribute value in each module object can be single or multiple without return value. The number of modules of the transmitted parameters and the number of attributes under the modules determine the corresponding content of updating the internal state of the source assembly, if the single-module single attribute is transmitted, the single-module single attribute is updated by the source assembly, and if the multi-module multi-attribute is transmitted, the multi-module multi-attribute is updated by the source assembly. The flexible parameter structure determines the diversity of global state updates.
Step 2.3 internal implementation of Global State update function
Step 2.3.1 parameter filtration
When other components call the method to transfer the module name which does not exist or the attribute which does not exist in the module object, the program finds the illegal attribute through circular traversal and discards the illegal attribute, because the module name which does not exist or the module attribute can pollute the internal state data structure of the original source component, and the program only reserves the module name which exists in the internal state and the attribute which exists under the module object. The parameter filtering effectively prevents the user from transmitting the parameters in a disorderly mode or incorrectly.
Step 2.3.2 parameter Merge
After the incoming module object is subjected to parameter filtering, the structure of the incoming module object is ensured not to be polluted, then the incoming module object and the original state module object are merged (the incoming module object covers the original state module object) to obtain a new module object to be updated, and at the moment, a setState method is used for transmitting a new module object value (a contact internal api can partially or completely update the internal state of the component), namely, the internal state of the source component can be updated. The purpose of merging the incoming module object and the original state module object is to ensure that the module object is a complete and new object when being updated every time, the incoming module object can only transmit partial attribute fields needing to be updated, and the function interior can be automatically completed when other attribute fields are merged. The purpose of this design is that other components can easily update a single state value or multiple sets of state values in an actual scenario.
Those skilled in the art will appreciate that, in addition to implementing the systems, apparatus, and various modules thereof provided by the present invention in purely computer readable program code, the same procedures can be implemented entirely by logically programming method steps such that the systems, apparatus, and various modules thereof are provided in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Therefore, the system, the device and the modules thereof provided by the present invention can be considered as a hardware component, and the modules included in the system, the device and the modules thereof for implementing various programs can also be considered as structures in the hardware component; modules for performing various functions may also be considered to be both software programs for performing the methods and structures within hardware components.
The foregoing description of specific embodiments of the present invention has been presented. It is to be understood that the present invention is not limited to the specific embodiments described above, and that various changes or modifications may be made by one skilled in the art within the scope of the appended claims without departing from the spirit of the invention. The embodiments and features of the embodiments of the present application may be combined with each other arbitrarily without conflict.
Claims (10)
1. A act-based item global state data management system, comprising:
module M1: defining global shared data modules and attribute field values corresponding to the global shared data modules;
module M2: establishing a global state management module, and leading out a source component and a connector through the global state management module;
module M3: nesting the outermost layer component of the project into a source head component, and initializing internal state data of the source head component according to the global shared data module and the attribute field value corresponding to each global shared data; injecting shared data and a global state updating function into the project through the source component;
module M4: and packaging the component needing to acquire the global state data through the connector, and acquiring the shared data injected by the source component after the component is processed by the connector packaging.
2. The act item based global state data management system of claim 1, wherein the module M1 comprises: splitting global shared data according to a service module, establishing a plurality of different global shared data modules according to actual requirements of projects, and storing the data by each global shared data module in a key-value format; each globally shared data module defines a corresponding attribute field value, each attribute field value being a state value that is globally shared.
3. The act item based global state data management system of claim 1, wherein the module M3 comprises:
module M3.1: a plurality of different global shared data modules and corresponding attribute field values and source components are led into the outmost layer of the project, data of all the global shared data modules and corresponding attribute field values are transmitted into the source components in a parameter transmission mode, and the received data of all the global shared data modules and corresponding attribute field values are initialized into internal state data of the source components inside the source components;
module M3.2: and injecting the internal state data of the source component and the global state updating function into the project component wrapped by the source component through the native api of the read context.
4. The act item based global state data management system of claim 1, wherein the module M4 comprises:
module M4.1: the method comprises the steps that a connector is led into a component needing to display shared data in a project, the connector wraps the component needing to display the shared data, and the component obtains the shared data injected by a source component after being packaged by the connector;
module M4.2: the global state updating function is transmitted through the connector, the global state updating function is obtained inside the component, and the global shared data module value needing to be updated is transmitted into the component through the global state updating function;
step M4.3: and data is transmitted to the source assembly from the updated assembly, the source assembly updates the internal state of the source assembly, the internal state is injected into the item assembly of the package, and parameters received by the assembly calling the connector function in the item assembly are changed.
5. The act item based global state data management system of claim 3, wherein the global state update function comprises: when the component calls a nonexistent global shared data module or a global shared data module attribute field value, the global state updating function finds the illegal attribute through circular traversal and discards the illegal attribute; and after the incoming global shared data module is abandoned, ensuring that the structure of the incoming module object is not polluted, and then combining the incoming global shared data module with the original state module to obtain a new global shared data module to be updated.
6. A method for managing global state data based on a act project is characterized by comprising the following steps:
step M1: defining global shared data modules and attribute field values corresponding to the global shared data modules;
step M2: establishing a global state management module, and leading out a source component and a connector through the global state management module;
step M3: nesting the outermost layer component of the project into a source head component, and initializing the source head component according to the global shared data module and the attribute field value corresponding to each global shared data; injecting shared data into the project through the source assembly and updating functions of the shared data;
step M4: and packaging the component needing to acquire the global state data through the connector, and acquiring the shared data injected by the source component after the component is processed by the connector packaging.
7. The method for managing global state data according to act project of claim 6, wherein said step M1 includes: splitting global shared data according to a service module, establishing a plurality of different global shared data modules according to actual requirements of projects, and storing the data by each global shared data module in a key-value format; each globally shared data module defines a corresponding attribute field value, each attribute field value being a state value that is globally shared.
8. The method for managing global state data according to act project of claim 6, wherein said step M3 includes:
step M3.1: a plurality of different global shared data modules and source components are led into the outermost layer of the project, data of all the global shared data modules are transmitted into the source components in a parameter transmission mode, and the received data of all the global shared data modules are initialized to internal state data of the source components inside the source components;
step M3.2: and injecting the internal state data of the source component and the global state updating function into the project component wrapped by the source component through the native api of the read context.
9. The method for managing global state data based on act items according to claim 6, wherein the module M4 comprises:
step M4.1: the method comprises the steps that a connector is led into a component needing to display shared data in a project, the connector wraps the component needing to display the shared data, and the component obtains the shared data injected by a source component after being packaged by the connector;
step M4.2: the global state updating function is transmitted through the connector, the global state updating function is obtained inside the component, and the global shared data module value needing to be updated is transmitted into the component through the global state updating function;
step M4.3: and data is transmitted to the source assembly from the updated assembly, the source assembly updates the internal state of the source assembly, the internal state is injected into the item assembly of the package, and parameters received by the assembly calling the connector function in the item assembly are changed.
10. The method for managing global state data based on act items according to claim 8, wherein the global state update function comprises: when the component calls a nonexistent global shared data module or a global shared data module attribute field value, the global state updating function finds the illegal attribute through circular traversal and discards the illegal attribute; and after the incoming global shared data module is abandoned, ensuring that the structure of the incoming module object is not polluted, and then combining 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 true CN112241282A (en) | 2021-01-19 |
| CN112241282B 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) |
Cited By (5)
| 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 |
| CN114567623A (en) * | 2022-02-20 | 2022-05-31 | 中国银联股份有限公司 | Page display method and device |
| CN114625436A (en) * | 2022-03-04 | 2022-06-14 | 中国—东盟信息港股份有限公司 | Front-end application containerization remote module loading method |
| CN114675923A (en) * | 2022-04-13 | 2022-06-28 | 上海微盟企业发展有限公司 | Configuration type operation interface setting method, device and medium |
| CN117520019A (en) * | 2024-01-05 | 2024-02-06 | 杭州玳数科技有限公司 | Component communication method and device |
Citations (11)
| 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 |
| US20150365284A1 (en) * | 2014-06-13 | 2015-12-17 | Bull Sas | Methods and systems of managing an interconnection network |
| CN107908398A (en) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | Method based on React technique constructions web applications |
| US20180189735A1 (en) * | 2016-12-30 | 2018-07-05 | Dropbox, Inc. | Managing projects in a content management system |
| CN109032587A (en) * | 2018-07-19 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | A kind of data stream management frame, method, terminal device and storage medium |
| US20190324729A1 (en) * | 2018-04-24 | 2019-10-24 | Microsoft Technology Licensing, Llc | Web Application Development Using a Web Component Framework |
| 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 |
| US20200249921A1 (en) * | 2019-01-31 | 2020-08-06 | Salesforce.Com, Inc. | Structured development for web application frameworks |
| CN111694837A (en) * | 2020-04-08 | 2020-09-22 | 北京瑞策科技有限公司 | Shared data storage method and device based on service data block chain |
| US20200327817A1 (en) * | 2019-04-09 | 2020-10-15 | 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 (11)
| 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 |
| US20150365284A1 (en) * | 2014-06-13 | 2015-12-17 | Bull Sas | Methods and systems of managing an interconnection network |
| US20180189735A1 (en) * | 2016-12-30 | 2018-07-05 | Dropbox, Inc. | Managing projects in a content management system |
| CN107908398A (en) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | Method based on React technique constructions web applications |
| US20190324729A1 (en) * | 2018-04-24 | 2019-10-24 | Microsoft Technology Licensing, Llc | Web Application Development Using a Web Component Framework |
| CN109032587A (en) * | 2018-07-19 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | A kind of data stream management frame, method, terminal device and storage medium |
| US20200249921A1 (en) * | 2019-01-31 | 2020-08-06 | Salesforce.Com, Inc. | Structured development for web application frameworks |
| US20200327817A1 (en) * | 2019-04-09 | 2020-10-15 | Jiveworld, SPC | System and method for dual mode presentation of content in a target language to improve listening fluency in the target language |
| 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 |
Non-Patent Citations (3)
| Title |
|---|
| LOMON6: "React-redux中的connect函数和provider的用法", pages 1 - 9, Retrieved from the Internet <URL:《https://blog.csdn.net/qq_43952245/article/details/103264581》> * |
| YESMECK: "mini-store", pages 1 - 6, Retrieved from the Internet <URL:《https://github.com/yesmeck/mini-store/tree/765c18d65ca61a6675add46edd9218078866f34a 1/4》> * |
| 宝爷_174C: "搭建一套好用的react项目架构", pages 1 - 15, Retrieved from the Internet <URL:《https://www.jianshu.com/p/3d8131bc6f60》> * |
Cited By (8)
| 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 |
| CN114567623A (en) * | 2022-02-20 | 2022-05-31 | 中国银联股份有限公司 | Page display method and device |
| CN114567623B (en) * | 2022-02-20 | 2023-09-08 | 中国银联股份有限公司 | Page display method and device |
| CN114625436A (en) * | 2022-03-04 | 2022-06-14 | 中国—东盟信息港股份有限公司 | Front-end application containerization remote module loading method |
| CN114625436B (en) * | 2022-03-04 | 2024-06-04 | 中国—东盟信息港股份有限公司 | Remote module loading method for front-end application containerization |
| CN114675923A (en) * | 2022-04-13 | 2022-06-28 | 上海微盟企业发展有限公司 | Configuration type operation interface setting method, device and medium |
| CN117520019A (en) * | 2024-01-05 | 2024-02-06 | 杭州玳数科技有限公司 | Component communication method and device |
| CN117520019B (en) * | 2024-01-05 | 2024-04-09 | 杭州玳数科技有限公司 | Component communication method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112241282B (en) | 2024-02-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112241282A (en) | Method and system for managing global state data based on act project | |
| CN108027722A (en) | The dynamically renewal application in compiling and deployment | |
| CN101697139B (en) | Method, device and registry for remote procedure call | |
| CN102622444B (en) | XML (extensible markup language) message processing method and XML message processing device | |
| CN110489323B (en) | Visual RPC API debugging method, device, medium and equipment | |
| CN105847332A (en) | Desktop virtualization method, client device and server-side device | |
| US20210034342A1 (en) | Code-independent graph technology | |
| CN112166429A (en) | System and method with reduced complexity in integration of exposed information models with applications | |
| US20100174991A1 (en) | Maintaining data coherency within related multi-perspective user interfaces via session-less queries | |
| CN103034540A (en) | Distributed information system, device and coordinating method thereof | |
| CN103034541A (en) | Distributing type information system and equipment and method thereof | |
| CN111158690A (en) | Desktop application framework, construction method, desktop application running method and storage medium | |
| CN113986424A (en) | Page display method and device | |
| CN105045789A (en) | Game server database buffer memory method and system | |
| CN109614094B (en) | Drawing method of GPU glCallList view model based on UML | |
| CN115809056B (en) | Component multiplexing implementation method and device, terminal equipment and readable storage medium | |
| CN110673827A (en) | Resource calling method and device based on android system and electronic equipment | |
| CN109491687B (en) | Hot updating method and device of application software, terminal and readable medium | |
| CN111324347A (en) | Component construction method, device and system, page generation method, equipment and medium | |
| CN110955415A (en) | Method for adapting projection multi-platform service | |
| CN112083914B (en) | Method and system for realizing object model embedded operation system soft bus | |
| CN110837367B (en) | User interface processing method and device and electronic equipment | |
| Nagy et al. | Simplifying Application Development with Kotlin Multiplatform Mobile | |
| CN112631638A (en) | Terminal application updating method and device, storage medium and electronic equipment | |
| CN110417978A (en) | Menu configuration method, device, equipment and storage medium |
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 |