Data updating method of component, computer program product and data updating system

Abstract

The invention provides a data updating method of a component, a computer program product and a data updating system. The method comprises the steps that a UI interface component is obtained, and the component comprises one or more of an icon, a button, a navigation bar and a selection box; obtaining source data, the source data being used for rendering the component; subscription information is obtained, and the subscription information is information of a predefined component having an association relationship with at least part of the source data; subscribing the component and the corresponding source data according to the subscription information; and under the condition that the source data is updated, rendering the subscribed component by adopting the updated source data. The method solves the problems that in the prior art, data updating needs to be transmitted layer by layer between all layers of components, and the maintenance cost of codes is high.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of component rendering, in particular to a component data updating method, a component data updating device, a computer program product and a data updating system. BACKGROUND

[0002] The ArkTS language has data driving capability and provides a series of decorators for state management of data and transmission of data between components.

[0003] The ArkTS UI is data driven, and a relatively complex page needs to be split into multiple layers of nested components. When data changes need to be notified to each component for updating and rendering, data needs to be transmitted between multiple components. The state manager of the ArkTS framework only supports single-layer driving. When data is multi-layer nested, changing only an object in a layer will not drive all associated components to refresh. Partial data updates cannot directly affect all components that need to be updated, so it is necessary to explicitly transmit data change notifications between layers of components, which increases the complexity of the code and results in high maintenance costs. SUMMARY

[0004] The main purpose of the present application is to provide a component data updating method, a component data updating device, a computer program product and a data updating system to at least solve the problem that data updating needs to be transmitted between layers of components in the prior art, and the maintenance cost of the code is high.

[0005] In order to achieve the above-mentioned purpose, according to one aspect of the present application, a component data updating method is provided, comprising: acquiring a component of a UI interface, wherein the component comprises one or more of an icon, a button, a navigation bar and a selection box; acquiring source data, wherein the source data is used to render the component; acquiring subscription information, wherein the subscription information is information that the component is associated with at least part of the source data in advance; subscribing the component to the corresponding source data according to the subscription information; and rendering the subscribed component using the updated source data in the case of updating the source data.

[0006] Optionally, after the source data is acquired, the method further comprises: in a case where the source data is a basic data type, storing the source data of the basic data type to a first storage area, wherein the basic data type comprises a variable; in a case where the source data is a composite data type, storing the source data of the composite data type to a second storage area, wherein the composite data type comprises a class object; in a case where the source data is an array data type, storing the source data of the array data type to a third storage area, wherein the array data type comprises an array.

[0007] Optionally, subscribing the component to the corresponding source data according to the subscription information comprises: in a case where the subscription information represents an association relationship between the component and the source data of the basic data type, subscribing the component to the corresponding source data in the first storage area according to the subscription information; in a case where the subscription information represents an association relationship between the component and the source data of the composite data type, subscribing the component to the corresponding source data in the second storage area according to the subscription information; in a case where the subscription information represents an association relationship between the component and the source data of the array data type, subscribing the component to the corresponding source data in the third storage area according to the subscription information.

[0008] Optionally, in a case where the source data is updated, rendering the subscribed component by using the updated source data comprises: in a case where the source data is the basic data type and the source data is updated, extracting an updated variable in the source data to obtain a source data variable; extracting a variable corresponding to the source data variable in the first storage area to obtain a region data variable; assigning a value of the source data variable to the region data variable; and rendering the subscribed component by using the value of the region data variable.

[0009] Optionally, in a case where the source data is updated, rendering the subscribed component by using the updated source data comprises: in a case where the source data is the composite data type and the source data is updated, extracting an updated class object in the source data to obtain a source data object; extracting a class object corresponding to the source data object in the second storage area to obtain a region data object; determining attribute information of the source data object as attribute information of the region data object; and rendering the subscribed component by using the attribute information of the region data object.

[0010] Optionally, in the case of the source data update, the subscribed component is rendered by using the updated source data, comprising: in the case of the source data being the array data type and the source data update, extracting the updated array in the source data to obtain a source data array; extracting an array corresponding to the source data array in the third storage area to obtain a region data array; emptying the region data array and determining the source data array as the region data array; and rendering the subscribed component by using the region data array.

[0011] Optionally, the component is subscribed to the corresponding source data according to the subscription information, comprising: deploying a decorator, wherein the decorator is one of a State decorator, a Prop decorator, a Link decorator, and an Observed decorator; and subscribing the component to the corresponding source data by using the decorator according to the subscription information.

[0012] According to another aspect of the present application, a component data updating apparatus is provided, comprising: a first obtaining unit configured to obtain a component of a UI interface, wherein the component comprises one or more of an icon, a button, a navigation bar, and a selection box; a second obtaining unit configured to obtain source data, wherein the source data is used to render the component; a third obtaining unit configured to obtain subscription information, wherein the subscription information is information that the component is associated with at least part of the source data in advance; a subscribing unit configured to subscribe the component to the corresponding source data according to the subscription information; and a rendering unit configured to render the subscribed component by using the updated source data in the case of the source data update.

[0013] According to still another aspect of the present application, a computer program product is provided, comprising a computer program, which, when executed by a processor, implements the steps of any of the component data updating methods.

[0014] According to yet another aspect of the present application, a data updating system is provided, comprising one or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, and the one or more programs comprise a program for executing any of the component data updating methods.

[0015] The technical solution of the application predefines the relationship between the components and the source data, each component no longer needs to understand the parent-child relationship of the data structure, only needs to know which source data it needs, subscribes the component and the corresponding source data, and when the source data is updated, the component can immediately perceive and render due to the subscription of the component to the source data, and no longer depends on the parent-child relationship between the components to transmit data, so that the data related to the component can be directly transmitted to the component when the data is updated, and the data does not need to be transmitted between layers, thereby saving the process of transmitting data between layers of components and reducing the maintenance cost of the code. BRIEF DESCRIPTION OF DRAWINGS

[0016] The drawings constituting a part of the specification of the application are used to provide further understanding of the application, the illustrative embodiments of the application and the description thereof are used to explain the application, and do not constitute improper limitation on the application. In the drawings:

[0017] Figure 1 A hardware structure block diagram of a mobile terminal for performing a data updating method of a component is shown according to an embodiment of the application;

[0018] Figure 2 A flowchart of a data updating method of a component is shown according to an embodiment of the application;

[0019] Figure 3 A schematic diagram of data flow is shown;

[0020] Figure 4 A schematic diagram of data rendering of the present solution is shown;

[0021] Figure 5 A structure block diagram of a data updating device of a component is shown according to an embodiment of the application.

[0022] Among the above drawings, the following reference signs are included:

[0023] 102, processor; 104, memory; 106, transmission device; 108, input and output device. DETAILED DESCRIPTION

[0024] It should be noted that the embodiments in the application and the features in the embodiments can be combined with each other without conflict. The application will be described in detail below with reference to the drawings and in combination with the embodiments.

[0025] In order to enable those skilled in the art to better understand the present invention, the following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of this application.

[0026] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described here. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0027] For ease of description, some nouns or terms involved in the embodiments of the present application are explained below:

[0028] ArkTS: A programming language.

[0029] Component: A UI component.

[0030] As introduced in the background technology, in the prior art, data updates need to be passed layer by layer between components at each layer, and the code maintenance cost is high. To solve the above problems, the embodiments of the present application provide a component data update method, a component data update device, a computer program product and a data update system.

[0031] The technical solutions in the embodiments of the present invention will be described clearly and completely below with reference to the accompanying drawings in the embodiments of the present invention.

[0032] The method embodiments provided in the embodiments of the present application can be executed in a mobile terminal, a computer terminal or a similar computing device. Taking running on a mobile terminal as an example, Figure 1 FIG. 1 is a hardware structure diagram of a mobile terminal according to a method for updating data of a component in an embodiment of the present invention. Figure 1 As shown, the mobile terminal may include one or more ( Figure 1The mobile terminal can further include a transmission device 106 for communication function and an input / output device 108. Those skilled in the art can understand that, Figure 1 The structure shown is only schematic and does not limit the structure of the mobile terminal. For example, the mobile terminal can include more or less components than those shown, or have a different configuration or arrangement of the components. Figure 1 The mobile terminal can include more or less components than those shown, or have a different configuration or arrangement of the components. Figure 1 The mobile terminal can include more or less components than those shown, or have a different configuration or arrangement of the components.

[0033] The memory 104 is used for storing computer programs, such as software programs of application software and modules, for example, the computer program corresponding to the device information display method in the embodiment of the present application. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, that is, implements the method described above. The memory 104 can include a high-speed random access memory, and can further include a non-volatile memory, such as one or more magnetic storage devices, flash memories, or other non-volatile solid-state memories. In some examples, the memory 104 can further include a memory remotely arranged with respect to the processor 102, and these remote memories can be connected to the mobile terminal through a network. Examples of the network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and a combination thereof. The transmission device 106 is used for receiving or sending data via a network. The specific examples of the network can include a wireless network provided by a communication provider of the mobile terminal. In one example, the transmission device 106 includes a network adapter (NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission device 106 can be a radio frequency (RF) module, which is used for communicating with the Internet in a wireless manner.

[0034] In the embodiment, a data updating method for a component of a mobile terminal, a computer terminal or a similar computing device is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0035] Figure 2 FIG. 1 is a flowchart of a data updating method for a component according to an embodiment of the present application. As shown in Figure 2 the method includes the following steps:

[0036] In step S201, components of the UI interface are acquired, wherein the components include one or more of icons, buttons, navigation bars, and selection boxes.

[0037] Specifically, when developing an application based on ArkTS, the constituent elements of the UI interface are first determined, including but not limited to icons, buttons, navigation bars, or selection boxes. These elements are built through the ArkTS framework and are represented in the code in the form of components, such as <button>、 <navigationbar>etc.

[0038] In step S202, source data is acquired, wherein the source data is used for rendering the component;

[0039] Specifically, the source data can come from server-side API calls, such as product details, user information, etc. These data are dynamic and change over time or operation. Acquiring source data means initiating an HTTP request or other network call to obtain the latest data when the UI component is initialized.

[0040] In step S203, subscription information is acquired, wherein the subscription information is information that defines a relationship between the component and at least part of the source data;

[0041] Specifically, the decorator here plays the role of subscription. The developer declares the data items that need to be subscribed to within the component. This subscription information tells the system which data is of interest to the component, so that when the data changes, it knows which components need to be notified. The subscription mechanism ensures that the component only focuses on the data related to its rendering logic.

[0042] In step S204, the component is subscribed to the corresponding source data according to the subscription information;

[0043] Specifically, by subscribing to the data, the component does not need to explicitly request data or perform additional update logic. This achieves automatic synchronization of data and components, simplifying the complexity of data flow.

[0044] In step S205, when the source data is updated, the subscribed component is rendered using the updated source data.

[0045] Specifically, when the source data changes, such as an update to the product information on the server side, the data area (central data manager) will monitor this change and notify all UI components that have subscribed to the corresponding data to refresh through the data trigger.

[0046] Through this embodiment, the relationship between the component and the source data is predefined. Each component no longer needs to understand the data structure of parent-child relationships, but only needs to know which source data it needs. The component is subscribed to the corresponding source data. When the source data is updated, the component can immediately perceive and render because the component has subscribed to the source data, and no longer relies on the parent-child relationship between components to pass data. In this way, when the data is updated, the data related to the component can be directly transmitted to the component. The data does not need to be transmitted between layers, saving the process of transmitting data between components and reducing the maintenance cost of the code.

[0047] Specifically, in the existing scheme, when the multi-layer component nesting scene rendering refresh provided by the current framework is refreshed, the existing scheme mainly uses the above syntax sugar of the framework to perceive the data source change at the page root node, and according to the component nesting relationship, the @Prop is transmitted to the corresponding child component to drive the child component to refresh. When the child component needs to be perceived by the upper layer, the @Link is used for interaction. In addition, when the class transmission is involved, the @Observed needs to be used. The above state manager scheme only supports single-layer driving. When the data required by the child component is more, the parent component needs to peel off layer by layer and transmit to the child component respectively. Otherwise, when the parent component changes the data, the child component cannot perceive the change. This is very difficult for the component split of complex pages, and the data and logic handled by the root node are very complex. How to make the complex data structure be able to be deconstructed according to the required components by the central data manager, and realize the automatic driving of related components with one modification of data is the purpose of the present application.

[0048] Specifically, the present application provides a subscription method, which can parse complex interface data according to the needs of UI components, and uniformly store and distribute the data required by each component through the central data manager. Each component subscribes to the required data through @State decoration, and actively performs UI rendering when the data changes, without the need to notify each data change or layer-by-layer data transmission between parent and child components, which is easy to manage and maintain the data state. The present application mainly solves the problem of layer-by-layer value transmission of multi-layer component nesting, and achieves the driving of related component rendering and refreshing by only changing the data source when rendering the page of large data interface.

[0049] Specifically, when multiple pages, multiple components and the same complex data interface are associated, and the UI drawing and data return are not in series, the component can complete data driving by subscribing to the required data, decoupling the data processing and UI rendering modules, without the root component layer-by-layer distributing and transmitting for the child component; the data parser deconstructs and parses the data source according to the component rendering, and puts the parsed data source into the data address subscribed by the component according to the data deconstruction agreed by both parties, so as to achieve the purpose of driving the UI node to refresh.

[0050] Specifically, when the UI component subscribes to the source data, the data parser deconstructs and converts the data according to the data cutting rules, and then stores the data in the sub-data area. The data trigger continuously monitors the data area, and once a data change is detected, it immediately transmits the update information to all components that have subscribed to the data. After receiving the update notification, the component automatically renders with the latest data without the need for manual reloading or re-requesting data. This process is executed in parallel in a multi-threaded environment, further improving efficiency. Thus, through automated data processing and update notification, as well as the automatic refreshing mechanism of the component, the tight coupling of data and UI is achieved, while maintaining the decoupling of data flow and UI logic, achieving the technical effects of improving response speed, simplifying development process, and enhancing code maintainability.

[0051] In the specific implementation process, after obtaining the source data, the above method further includes the following steps: in the case that the source data is a basic data type, storing the source data of the basic data type into a first storage area, wherein the basic data type includes a variable; in the case that the source data is a composite data type, storing the source data of the composite data type into a second storage area, wherein the composite data type includes a class object; in the case that the source data is an array data type, storing the source data of the array data type into a third storage area, wherein the array data type includes an array.

[0052] In this scheme, after the source data is successfully obtained, the type of the data is automatically determined, whether it is a basic data type, a composite data type (such as a class object), or an array data type, and then the data is stored in the corresponding type of storage area. In this way, different data types can be stored, simplifying the storage process of complex data structures, and subsequent data can be subscribed according to the data type required by the component.

[0053] Specifically, if the source data is a basic data type (such as a string, a number, etc.), it is stored in the first storage area, which is usually a simple data storage structure that can quickly access and update data. For example, when the server returns the source data as the user's age (number type), it is stored in the first storage area, and components related to age can directly subscribe to the data in this area. The data of the basic data type is usually small in size and high in update frequency, and separate storage can avoid cross-access with other types of data, reducing the complexity of data processing, so that the latest state can be quickly obtained during UI update, achieving the effect of improving response speed.

[0054] Specifically, if the source data is a composite data type, such as a class object composed of multiple properties and methods, it will be stored in the second storage area. This area is more suitable for storing complex structured data, and through the @Observed decoration, it can ensure that any changes to the properties of the class object can be monitored in a timely manner. Composite data type objects may contain multiple properties and levels, and the storage area decorated with @Observed can ensure that all associated components are updated synchronously when the internal state of the object changes, avoiding the situation of inconsistent UI state caused by local data updates.

[0055] Specifically, for array data types in the source data, such as a list of products, it will be stored in the third storage area, usually an array implemented using ObservedArray, which can automatically notify the subscribed components when the array length changes or the content changes. Since array type data may be frequently updated, such as adding or deleting products in user operations, using ObservedArray can automatically track these changes and only notify the components related to the changes to refresh, avoiding unnecessary global UI redraw, thereby improving the performance and efficiency of the system.

[0056] Specifically, as shown in Figure 3 A singleton hub data area can be created and stored globally in the App. ObservedArray is created and decorated with @Observed to observe subsequent nested multi-level data changes. The data area is cut, and the cut data area is assigned an id as a pointer to identify the sub-data area. The sub-area is divided into three categories: basic type, class class, and array array. The basic type can be directly assigned; the data unit is class level, and the pointer type is defined as the corresponding class category; the data unit is array level, and the pointer type is customized as ObservedArray <t>.

[0057] In particular, the data cutting rule: data cutting is completed before rendering, to render the data required by the component as a unit, such as: component A needs data x (list), y (class), z (basic data), then x, y, z are used as pointers of corresponding data, and the data is initialized respectively, x = new ObservedArray <t>(); y = new DtataClass(); z: number = 0.

[0058] Specifically, ObservedArray is a dynamically monitorable array. If the length of the array or an item in the array changes, the change can be observed and the corresponding component A is automatically refreshed.

[0059] Specifically, data trigger is a mechanism or component that is mainly used to monitor data changes in the data area and automatically trigger the re-rendering of UI components related to the data when detecting data changes. It is located between data changes and UI updates, acting as a bridge to ensure that data changes can be reflected on the user interface in a timely and accurate manner. When the data in the data area changes, whether the change is the addition, deletion or modification of data, or the state switching of data type, the data trigger will capture these changes and send signals or notifications to prompt the components that depend on these data to re-evaluate their state and trigger the rendering process.

[0060] Specifically, data parser is a component responsible for processing and converting raw data to adapt it to the specific data format and structure required by UI components. Its main task is to transform complex or irregular data sources into a form that components can directly use. It receives raw data from data sources such as API interfaces, database queries, etc. According to the needs of UI components, the parser will decompose the data into basic types, classes, arrays, etc. If the original data format does not match, the parser will also be responsible for converting the data to the correct type or format for component subscription and use. Finally, the parser will distribute the processed data to the corresponding sub-data area, which is associated with the subscription relationship established by the UI component through the @State decorator.

[0061] In a specific application, when developing an e-commerce application, the source data may contain multiple parts such as product information, user information and shopping cart product list. Product information and user information as complex data types, such as classProduct{...} and class User{...}, will be stored in the second storage area; while the shopping cart product list as an array data type, such as ObservedArray <product>, will be stored in the third storage area.

[0062] When the commodity information or user information changes, all UI components that depend on these data (such as the commodity detail page, the personal profile page) can be automatically refreshed to display the latest information through the class object update in the second storage area.

[0063] The ObservedArray of the shopping cart commodity list automatically notifies the shopping cart page to update when commodities are added or deleted, eliminating the need to manually add or delete commodity items in the page, simplifying the developer's workflow, and ensuring the real-time nature and accuracy of the UI.

[0064] For example, assuming that the length threshold of the array is 10, when the length of the shopping cart commodity list exceeds 10, the storage strategy is automatically adjusted to store the excess items in the cache and retain only the first 10 commodities in the first storage area, which ensures the efficient operation of the ObservedArray and reduces the load on the UI components, optimizing the performance of the UI.

[0065] In some embodiments, according to the above subscription information, the above component is subscribed to the corresponding source data, which can be achieved by the following steps: in the case where the subscription information represents an association relationship between the component and the source data of the basic data type, according to the subscription information, the component is subscribed to the corresponding source data in the first storage area; in the case where the subscription information represents an association relationship between the component and the source data of the composite data type, according to the subscription information, the component is subscribed to the corresponding source data in the second storage area; in the case where the subscription information represents an association relationship between the component and the source data of the array data type, according to the subscription information, the component is subscribed to the corresponding source data in the third storage area.

[0066] In this scheme, according to the data type and the subscription requirements of the component, the subscription relationship between the component and the data in different storage areas is established, and each component only subscribes to the data it needs, so that the component can accurately receive the data change notification it is interested in, reducing unnecessary data transmission.

[0067] Specifically, if the component subscribes to the basic data type (such as age, price, etc.), the component will directly subscribe to these data stored in the first storage area. This can be declared in the component code through the @State decorator.

[0068] Specifically, for composite data types (such as user information, product details, etc. class objects), components will subscribe to these objects in the second storage area. Updates to composite data types may involve multiple properties, and all property changes can be detected through @Observed decorated class objects, and subscribed components can be notified for updates.

[0069] Specifically, the update of array data types (such as product lists, user shopping carts, etc.) such as the addition or deletion of products can be achieved by subscribing to ObservedArray in the third storage area. Once the array content or length changes, the subscribed component will automatically update the UI display.

[0070] Specifically, data asynchronous requests are made before UI rendering, and once the data is returned, it is destructured. The hierarchy of the destructed data corresponds to the sub-area pointers described above. That is, before the UI component is ready to render, data is usually obtained from the outside (such as a web service). This is because data is often dynamically generated or obtained during application runtime, for example, pulling the latest information from a database or remote server.

[0071] Specifically, in general, the data source for component rendering is dynamically obtained, and the data http request takes a long time, so it needs to be obtained asynchronously. Since network data acquisition operations such as HTTP requests may take a long time, synchronous requests will cause the application's UI interface to become unresponsive during data processing, affecting user experience. Therefore, asynchronous requests can ensure the smoothness of the UI and the responsiveness of the application, so that users can still interact with the interface during the data waiting process.

[0072] Specifically, the composition of the data source does not correspond one-to-one with the needs of the UI component, so the returned data source needs to be parsed and structured. The format of the data source often does not match the data format required by the UI component. For example, the JSON format data returned by the server may contain additional meta-information, or the data structure is too complex and not suitable for direct rendering. Therefore, the data source must be destructed and converted to meet the specific needs of the UI component.

[0073] Specifically, the principle of the structure is consistent with the above requirements, and the parsed data is assigned to the initialized pointer. For example, if the data source contains the required data of the X array, the corresponding array Array in the data source is traversed to convert each item to T type and push it to the X dynamic list. The "principle of structure" refers to the above-mentioned data cutting rule, that is, the data is cut into basic types, classes, and arrays according to the requirements of the components. This means that the developer needs to understand which UI components need what kind of data type and format when deconstructing the data. After completing the data deconstruction, the next step is to place the parsed data in the correct data area. For example, if a component needs to use the array X in the data source, each item of the X array extracted from the data source should be converted to the T type that the component can understand and use, and then pushed into the sub-data area or dynamic list corresponding to the X array. This process ensures that the component can correctly subscribe and receive data, while maintaining the clarity and consistency of the data structure.

[0074] Specifically, each UI component (such as component 1, component 2, component 3) declares the data it needs to subscribe to through the @State decorator when initializing. For example, component 1 may need to subscribe to data1: basic type data, component 2 to subscribe to data2: type data, and component 3 to subscribe to data3: array type data. These data subscriptions constitute the communication bridge between the component and the central data manager.

[0075] Specifically, after the asynchronous data request is completed, the original data is cut and allocated to different sub-data areas, such as sub-data area id1, sub-data area id2, and sub-data area id3. This process follows specific rules, such as direct assignment of basic data, use of Object.assign() for class data, and use of ObservedArray for dynamic monitoring of array data. Each sub-data area is assigned an ID as an identifier for component data subscription. The component establishes a subscription relationship with a specific data area through the ID, ensuring that it can receive the required data changes.

[0076] Specifically, after receiving the original data, the data parser deconstructs and converts it according to the requirements of the components. The data parser will parse the data into the correct format according to the type of the data (basic type, class, array) and the requirements of the components, and then store it in the corresponding sub-data area.

[0077] Specifically, once the data in the sub-data area changes, the data trigger will immediately perceive these changes. Automatic trigger refresh: the data trigger automatically triggers the UI component it subscribes to refresh according to the changed data. This means that the component does not need to actively query data changes, but is automatically notified and updated by the system.

[0078] Specifically, when the component receives a notification of data changes, it re-renders the UI interface to ensure that the user interface display matches the latest data state. Due to the subscription relationship between the data area and the component, once the data in the data area is updated, the component bound to it will automatically refresh its visual representation without additional code to explicitly control the component update process.

[0079] In a specific application, in an e-commerce application, user information (composite data type), product price (basic data type), and shopping cart (array data type) all need to be displayed in the UI interface. The user information component subscribes to the class object of the second storage area, the product price component subscribes to the number type data of the first storage area, and the shopping cart component subscribes to the ObservedArray of the third storage area.

[0080] When the product price is updated from the server, the change is automatically detected without human intervention, and all UI components subscribed to the price data are directly notified to update. If a user adds a product to the shopping cart, the ObservedArray detects changes in array length or content, and automatically notifies the shopping cart UI component to refresh and display the latest product list without the component explicitly querying the shopping cart state or data source.

[0081] For example, assume a component subscribes to the shopping cart array, when the number of products in the shopping cart reaches 50, it will automatically adopt a batch loading strategy, displaying only the first 30 products, and the remaining products are stored in the cache of the third storage area, until the user scrolls the page or has a specific operation. This strategy optimizes UI performance, avoids interface lag caused by loading large amounts of data, and improves user experience.

[0082] Specifically, the priority and frequency of data updates are dynamically adjusted according to user behavior and preferences, where user behavior data includes one or more of product detail browsing times, article click frequency, and preference for news categories, and preference settings include one or more of user-set update frequency and real-time requirement level. Based on user behavior data and preference settings, the data update strategy is adjusted to improve user experience and system resource utilization efficiency.

[0083] Wherein, the higher the product detail browsing times, the higher the priority and the higher the update frequency, the higher the article click frequency, the higher the priority and the higher the update frequency, the priority of the news category that the user pays attention to is higher than the priority of the news category that the user does not pay attention to, and the refresh frequency of the news category that the user pays attention to is higher than the refresh frequency of the news category that the user does not pay attention to. The higher the user-set update frequency, the higher the data update frequency, the higher the real-time requirement level, the higher the priority, and the higher the update frequency.

[0084] During the interaction between the user and the application, the user's behavior data is continuously collected and analyzed. Based on the collected user behavior data, the user's preferences are analyzed, such as which type of product information the user prefers to view, or which news categories the user accesses more frequently. According to the user's preferences and real-time needs, the priority and frequency of data updates are dynamically adjusted. For example, for those product details that the user frequently views, the update frequency will be set to be higher to ensure that the user can always see the latest information. Through personalized adjustment of data update strategies, unnecessary data processing and network requests are reduced, and resource allocation is optimized. At the same time, since the data can be updated more timely to the areas that the user cares about, the user experience is significantly improved.

[0085] Through personalized data update strategies, intelligent management of data updates can be carried out according to the specific needs and behavior patterns of users. This means that resources will be more effectively allocated to the content that users are most interested in, while the update frequency of data that users are not interested in or use infrequently will be reduced, reducing unnecessary data processing and network requests and saving system resources.

[0086] For example, in an e-commerce application, by tracking the user's behavior data, it is found that user A spends an average of 30 minutes per day browsing mobile accessory products in the past week, while user B views clothing products no more than once a week. Based on this information, the update strategy for product information is dynamically adjusted: for user A, the update frequency of mobile accessory product information is set to be updated every 4 hours (specific value) to ensure that user A can timely obtain the latest product dynamics; while for user B, considering its low attention to clothing products, the update frequency is reduced to once a week, reducing unnecessary data processing and network requests, and also saving system resources.

[0087] Specifically, a graphical user interface (GUI) is constructed to allow developers to configure the subscription relationship and update rules of UI components and data in a drag-and-drop or graphical selection manner without writing additional code or deeply understanding the underlying data flow logic, thereby reducing the development threshold, improving development efficiency, and reducing configuration errors caused by manual coding.

[0088] The developer is provided with an intuitive graphical configuration interface listing all available data sources and UI components. The developer can easily establish a subscription relationship between the data source and the UI component by dragging the data source icon onto the UI component icon or through graphical selection. Once the configuration is complete, the corresponding subscription code is automatically generated in the background, including data source reference, update frequency, and other details, without the need for the developer to manually write code. Since the entire process does not require the developer to delve into code details, it reduces configuration errors that may occur due to manual coding. At the same time, the intuitive graphical interface greatly shortens the configuration time and improves development efficiency.

[0089] With the visualization tool, the developer can intuitively see the association between the UI component and the data, and complete the data subscription configuration through simple drag-and-drop operations or graphical interface selection, avoiding the complexity and risk of errors in traditional methods that require deep code levels.

[0090] Suppose in the development of a mobile shopping application, the developer needs to configure the data subscription of the product list component and the product detail component. By using the visualization data subscription configuration tool of the present application, the developer can see all available data sources on the graphical interface, such as product basic information, inventory status, user reviews, etc. Simply drag the "product basic information" data source to the product list component and set the automatic update frequency to every 5 minutes (specific value). Then, drag the "product detail" data source to the product detail component and set the update frequency to update once every time the detail page is opened. This process not only significantly simplifies data subscription configuration, but also ensures configuration accuracy, as the tool automatically handles complex code generation, avoiding errors that may occur in manual coding.

[0091] In the specific implementation process, in the case of updating the source data, the subscribed component is rendered using the updated source data, which can be achieved by the following steps: in the case of updating the source data, extracting the updated variable in the source data to obtain a source data variable; extracting the variable in the first storage area corresponding to the source data variable to obtain a region data variable; assigning the value of the source data variable to the region data variable; and rendering the subscribed component using the value of the region data variable.

[0092] In this scheme, when it is detected that the source data has changed and the source data is of a basic data type, the data in the first storage area is automatically updated, and the automatic rendering of the UI component is triggered. Since the subscription mechanism is used, the component is no longer rendered using layer-by-layer transmission, further saving the process of layer-by-layer data transmission between components and further reducing the maintenance cost of the code.

[0093] Specifically, when the user age field age in the source data is changed from 25 to 26, the change is automatically identified, the updated variable age = 26 is extracted, and the variable is marked as a source data variable. According to the subscription relationship, a variable copy related to the user age is found in the first storage area, and the variable is marked as a regional data variable, which should be a local copy or reference of age. The value of the source data variable age = 26 is updated to the variable copy in the first storage area, ensuring that the local storage is consistent with the source data. Once the local variable age is updated, all UI components that subscribe to the age variable (such as the profile page and member service page) will automatically use the new value for rendering.

[0094] Thanks to the automatic subscription and update mechanism, developers only need to focus on the design and logic of the UI, without worrying about the change notification of the underlying data. This not only speeds up the response time of the UI, but also reduces errors and redundancies in the code.

[0095] When the basic data type field in the source data is updated, the data trigger detects the change and automatically updates the data to the first storage area. Because the UI component has subscribed to this storage area through @State, any change in the data in the storage area will immediately trigger the update logic of the component, triggering the automatic refresh of the UI. This process is fully automated, eliminating the manual synchronization and update of the UI after data changes in traditional methods, improving the overall performance and user experience of the system.

[0096] In some embodiments, in the case of the above source data update, the subscribed component is rendered using the updated source data, which can be achieved by the following steps: in the case of the above source data being of the above composite data type and the above source data being updated, extracting the updated class object in the above source data to obtain a source data object; extracting the class object corresponding to the source data object in the above second storage area to obtain a regional data object; determining the attribute information of the source data object as the attribute information of the regional data object; and rendering the subscribed component using the attribute information of the regional data object.

[0097] In this scheme, when a change in the source data is detected, and the source data is of the composite data type, the data in the second storage area is automatically updated, and the automatic rendering of the UI component is triggered. Since the subscription mechanism is used, the component is no longer rendered using layer-by-layer transmission, further saving the process of layer-by-layer data transmission between components, and further reducing the maintenance cost of the code.

[0098] Specifically, taking user information as an example, if the Profile class object of a user in the source data is updated, such as the user's avatar or address information, the system will first extract these updated information and mark it as a source data object. According to the subscription information of the component, the system will find the class object copy associated with the source data object in the second storage area, which is called the area data object, which stores the information of the source data object locally. The latest attribute value of the extracted source data object (such as the updated avatar URL or address) is synchronized to the area data object to ensure that the attribute information of the two is completely consistent. Once the attribute information of the source data object is synchronized to the area data object, all UI components subscribed to this object will automatically use the updated attribute information for rendering, such as displaying the new user avatar or address information.

[0099] Composite data types usually have more complex states, such as user details, multi-dimensional attributes of goods, etc. Using the above method to automatically synchronize attribute information avoids the omission or errors that may occur during manual updates, ensures real-time synchronization of UI components and data states, and improves user experience and system stability.

[0100] When the composite data type field in the source data is updated, the data trigger will monitor the change and then extract the new class object attribute and synchronize it to the corresponding object in the second storage area. Because the UI component subscribes to the object in the second storage area through @State, any change in attribute information will automatically trigger the update logic of the component and trigger the automatic refresh of the UI. The automation and accuracy of this process significantly reduces the complexity of data state management, while improving the sensitivity of UI components to data changes, thereby enhancing the overall performance and user experience of the system.

[0101] In the specific implementation process, in the case of the above source data update, the subscribed component is rendered using the updated source data, which can be achieved by the following steps: in the case of the above source data update, extracting the updated array in the above source data to obtain a source data array; extracting the array corresponding to the above source data array in the above third storage area to obtain an area data array; emptying the above area data array and determining the above source data array as the above area data array; and rendering the subscribed component using the above area data array.

[0102] In this scheme, when it is detected that the source data has changed and the source data of the array data type has changed, the data in the third storage area is automatically updated, and the automatic rendering of the UI component is triggered. Since the subscription mechanism is used, the component is no longer rendered using layer-by-layer transmission, further saving the process of layer-by-layer data transmission between components and further reducing the maintenance cost of the code.

[0103] Specifically, for example, if the product list in the source data has changed (new products have been added or old products have been removed), the system will automatically detect and extract the updated product list as the source data array. In the third storage area, the array corresponding to the product list will be found, which is called the regional data array, which stores the data subscribed by the UI components. To avoid confusion between old and new data, the contents of the regional data array are first emptied, and then the latest data in the source data array is overwritten to ensure that the regional data array is completely consistent with the source data array. Once the regional data array is updated, all UI components subscribed to the array data will automatically use this array for rendering to display the latest product list.

[0104] Array data types often contain a large amount of data, and changes in data may involve changes in array length or replacement of array elements. Using the empty and update strategy avoids data redundancy and confusion, ensuring that UI components only use accurate data for rendering, improving the reliability and performance of the user interface.

[0105] When the array data type field in the source data is updated, the data trigger detects this change, first empties the ObservedArray in the third storage area, and then fills in the latest data. Because the UI component subscribes to the ObservedArray of this storage area through @State, any change in array data will automatically trigger the update logic of the component, triggering the automatic refresh of the UI component. The automation and precision control of this process significantly reduces the error rate of data updates, while improving the response speed of UI components to data changes, enhancing the overall performance and user experience of the system.

[0106] Specifically, after deconstruction, the data required by each component is placed in the corresponding sub-area. If it is class-level data, it is assigned by Object.assign(). If it is array-level data, the original ObservedArray array needs to be emptied and then added or deleted. The purpose is not to change the id pointing to the original data area.

[0107] Specifically, the initialized x, y, z are the pointer ids of each sub-area. The parsed data needs to empty the data area first before filling the data area, but the pointer id needs to be preserved to ensure the accuracy and integrity of the data rendered by the UI each time. Class-level data is overwritten by Object.assign(y, origin), which overwrites the old data of class y with origin. Array-level data cannot guarantee the consistency of the length of new and old arrays, so directly overwriting may have the risk of data pollution. Therefore, the data area can be emptied by directly setting the length to zero, and then the new data is placed in it.

[0108] In some embodiments, according to the above subscription information, the above component is subscribed to the corresponding source data, which can be implemented by the following steps: deploying a decorator, wherein the decorator is one of State decorator, Prop decorator, Link decorator, Observed decorator; according to the subscription information, the above component is subscribed to the corresponding source data by using the above decorator.

[0109] In this scheme, when the component can correctly establish the source data subscription relationship, a series of decorators, including @State, @Prop, @Link, @Observed, etc., are used to automate this process. The deployment of these decorators is based on the subscription information, which ensures that the subscription mechanism of data-driven UI update can run efficiently.

[0110] Specifically, the @State state decorator, the variable decorated by the state decorator, the change of the state variable value will cause the rendering update of the UI. The variable decorated by @Prop can establish a one-way synchronization relationship with the parent component, and the data modification of the parent component can synchronously drive the data change and UI rendering of the child component. The variable decorated by @Link can establish a two-way synchronization relationship with the parent component, and the data modification of the parent component can synchronously drive the data change and UI rendering of the child component, and the data modification of the child component can also synchronously drive the UI re-drawing of the parent component. The class decorated by @Observed needs to be decorated by @Observed to observe the multi-layer nested scenario.

[0111] Specifically, create a UI page component, use @State to decorate and declare the dynamic data variables required for UI component rendering. Point the variable to the divided sub-data area id and subscribe to the global storage data area.

[0112] Specifically, the @State state decorator, the variable decorated by the state decorator, the change of the state variable value will cause the rendering update of the UI, the principle is that each data change will monitor and compare the data, and update the UI rendering tree node of the data difference part.

[0113] Specifically, the UI rendering is in the component layer, and the data initialization method for UI rendering is: @State data1=A, when the content of A data area changes, the component Component bound with data1 will be re-rendered.

[0114] Specifically, page jump and UI rendering can be multi-threaded parallel execution with data processing, data processing is responsible for placing the parsed data in the data area, and UI rendering directly draws the subscribed data. Data request does not need to be notified, as long as the data area data changes can drive the UI to re-draw and render.

[0115] Specifically, according to the specific relationship between the component and the data, a suitable data decorator will be selected for deployment. For example, if the component needs to respond to updates of basic data types, the system will deploy the @State decorator; if the component needs to synchronize data with the parent component, the @Prop or @Link decorator will be used; and for multi-layer nested data structures, the @Observed decorator will ensure that data changes can be tracked correctly.

[0116] Once the decorator is determined, the component will automatically establish a subscription relationship with the source data. For example, if a component ProductList subscribes to product list data, the @State decorator will be automatically added in the code to associate the component with the source data source ProductListData, ensuring that when the product list data changes, the ProductList component can automatically perceive and update.

[0117] In order for those skilled in the art to more clearly understand the technical solutions of the present application, the implementation process of the data update method of the component will be described in detail below in conjunction with specific embodiments.

[0118] This embodiment relates to a specific component data update method, as shown in Figure 4 The method comprises the following steps:

[0119] Creating a central data area, at the application level, creating a global data area that can be accessed by all components, used to store and manage all data that UI components may need.

[0120] The data area is designed as a singleton mode, ensuring that there is only one instance of the data area throughout the application lifecycle, which helps to ensure data consistency and reduce resource consumption.

[0121] Data query is divided into asynchronous request and returned data:

[0122] Asynchronous request: UI components initiate data query requests to remote data sources (such as servers) before rendering;

[0123] Return data: the server returns data to the client.

[0124] Create an observable array, in order to better monitor the changes of array type data, create an ObservedArray decorated with @Observed, which is a special data structure that can automatically notify all related components when the array content changes.

[0125] Data deconstruction, according to the actual needs of UI components, the returned source data is deconstructed, which is divided into basic types, class and array, etc. Various forms are one-to-one corresponding to the ID of the sub-data area.

[0126] Query data input to data parser, the data obtained from the server query is input to the data parser, and the parser is responsible for converting the data into a format that the UI component can subscribe and use.

[0127] The data parser further analyzes and converts the query data according to the data subscription requirements of the component, to ensure the accurate matching of the data and the component requirements.

[0128] Sub-data area and component subscription, through the data parser, the data is placed in the sub-data area corresponding to the UI component requirements, and the component subscribes to the corresponding sub-data area ID through the @State decorator, forming a data subscription relationship.

[0129] Component rendering area, under the condition of data update of component subscription, the rendering area where the component is located will automatically regenerate the UI, without manually triggering the update.

[0130] Subscription & data notification, when the central data manager detects that the data in the data area has changed, it automatically notifies all UI components that subscribe to the corresponding data area, triggering the automatic refresh of these components.

[0131] Notification rendering, the notified component will re-render its UI interface according to the updated data, to ensure that the view is consistent with the latest data state.

[0132] The embodiment of the application also provides a component data updating device. It should be noted that the component data updating device of the embodiment of the application can be used to execute the component data updating method provided by the embodiment of the application. The device is used to realize the above-mentioned embodiments and preferred embodiments, and details are not repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware, or a combination of software and hardware is also possible and is conceived.

[0133] The component data updating device provided by the embodiment of the application is introduced below.

[0134] Figure 5 is a structural block diagram of a component data updating device according to the embodiment of the application. As Figure 5 shown, the device includes:

[0135] The first obtaining unit 10 is configured to obtain components of a UI interface, wherein the components include one or more of an icon, a button, a navigation bar, and a selection box.

[0136] The second obtaining unit 20 is configured to obtain source data, wherein the source data is used to render the components.

[0137] The third obtaining unit 30 is configured to obtain subscription information, wherein the subscription information is information that predefines an association between the components and at least part of the source data.

[0138] The subscription unit 40 is configured to subscribe the components to the corresponding source data according to the subscription information.

[0139] The rendering unit 50 is configured to render the subscribed components by using updated source data in a case where the source data is updated.

[0140] According to the embodiment, the association between the components and the source data is predefined, each component no longer needs to understand the data structure of the parent-child relationship, and only needs to know which source data is needed. The components are subscribed to the corresponding source data, and the components can perceive and render immediately when the source data is updated, without relying on the parent-child relationship between the components to transmit data. Thus, the data related to the components can be directly transmitted to the components when the data is updated, and the data does not need to be transmitted layer by layer between layers, thereby saving the process of transmitting data layer by layer between the components and reducing the maintenance cost of the code.

[0141] In a specific implementation process, the apparatus further includes a first storage unit, a second storage unit, and a third storage unit. The first storage unit is configured to store the source data of a basic data type to a first storage area in a case where the source data is of the basic data type after the source data is obtained, wherein the basic data type includes a variable. The second storage unit is configured to store the source data of a composite data type to a second storage area in a case where the source data is of the composite data type, wherein the composite data type includes a class object. The third storage unit is configured to store the source data of an array data type to a third storage area in a case where the source data is of the array data type, wherein the array data type includes an array.

[0142] In the scheme, after the source data is successfully obtained, the type of the data is automatically determined to be a basic data type, a composite data type (such as a class object), or an array data type, and then the data is stored in a storage area of the corresponding type. Thus, the data of different types can be stored, the storage process of a complex data structure is simplified, and the data can be subscribed to specifically according to the data type required by the components subsequently.

[0143] In some embodiments, the subscription unit comprises a first subscription module, a second subscription module and a third subscription module, the first subscription module is configured to, in the case that the subscription information represents that the component is associated with the source data of the basic data type, subscribe the component to the corresponding source data in the first storage area according to the subscription information; the second subscription module is configured to, in the case that the subscription information represents that the component is associated with the source data of the composite data type, subscribe the component to the corresponding source data in the second storage area according to the subscription information; and the third subscription module is configured to, in the case that the subscription information represents that the component is associated with the source data of the array data type, subscribe the component to the corresponding source data in the third storage area according to the subscription information.

[0144] In this scheme, according to the data type and the subscription requirement of the component, the subscription relationship between the component and the data in different storage areas is established, and each component only subscribes to the required data, so that the component can accurately receive the data change notification concerned, and unnecessary data transmission is reduced.

[0145] In the specific implementation process, the rendering unit comprises a first extraction module, a second extraction module, an assignment module and a first rendering module, the first extraction module is configured to, in the case that the source data is of the basic data type and the source data is updated, extract the updated variable in the source data to obtain a source data variable; the second extraction module is configured to extract the variable corresponding to the source data variable in the first storage area to obtain a region data variable; the assignment module is configured to assign the value of the source data variable to the region data variable; and the first rendering module is configured to render the subscribed component by using the value of the region data variable.

[0146] In this scheme, when it is detected that the source data is changed and the changed source data is of the basic data type, the data in the first storage area is automatically updated, and the automatic rendering of the UI component is triggered. Since the subscription mechanism is adopted, the component is no longer rendered by using layer-by-layer transmission, and the process of layer-by-layer data transmission between components is further saved, and the maintenance cost of the code is further reduced.

[0147] In some embodiments, the rendering unit comprises a third extraction module, a fourth extraction module, a first determination module and a second rendering module, the third extraction module is configured to extract an updated class object in the source data to obtain a source data object when the source data is of the composite data type and the source data is updated; the fourth extraction module is configured to extract a class object corresponding to the source data object in the second storage area to obtain a region data object; the first determination module is configured to determine the attribute information of the source data object as the attribute information of the region data object; and the second rendering module is configured to render the subscribed component using the attribute information of the region data object.

[0148] In this scheme, when it is detected that the source data is changed and the source data is of the composite data type, the data in the second storage area is automatically updated, and the automatic rendering of the UI component is triggered. Since the subscription mechanism is used, the component is no longer rendered by layer-by-layer transmission, the process of layer-by-layer transmission of data between components is further saved, and the maintenance cost of the code is further reduced.

[0149] In the specific implementation process, the rendering unit comprises a fifth extraction module, a sixth extraction module, a second determination module and a third rendering module, the fifth extraction module is configured to extract an updated array in the source data to obtain a source data array when the source data is of the array data type and the source data is updated; the sixth extraction module is configured to extract an array corresponding to the source data array in the third storage area to obtain a region data array; the second determination module is configured to empty the region data array and determine the source data array as the region data array; and the third rendering module is configured to render the subscribed component using the region data array.

[0150] In this scheme, when it is detected that the source data is changed and the source data is of the array data type, the data in the third storage area is automatically updated, and the automatic rendering of the UI component is triggered. Since the subscription mechanism is used, the component is no longer rendered by layer-by-layer transmission, the process of layer-by-layer transmission of data between components is further saved, and the maintenance cost of the code is further reduced.

[0151] In some embodiments, the subscription unit comprises a deployment module and a fourth subscription module, the deployment module is configured to deploy a decorator, wherein the decorator is one of a State decorator, a Prop decorator, a Link decorator and an Observed decorator; and the fourth subscription module is configured to subscribe the component to the corresponding source data using the decorator according to the subscription information.

[0152] In this solution, a series of decorators, including @State, @Prop, @Link, @Observed, etc., are used to automate the process when ensuring that components can correctly establish a subscription relationship with source data. The deployment of these decorators is based on subscription information, ensuring that the subscription mechanism of data-driven UI updates can operate efficiently.

[0153] The data updating apparatus of the component includes a processor and a memory, the first obtaining unit, the second obtaining unit, the third obtaining unit, the subscription unit and the rendering unit are stored in the memory as program units, and the corresponding functions are realized by executing the program units stored in the memory by the processor. The modules are located in the same processor; or, the modules are located in different processors in any combination.

[0154] The processor includes a core, and the core calls the corresponding program unit from the memory. One or more cores can be set, and the problem of high code maintenance cost caused by layer-by-layer transmission of data updates between components in the prior art can be solved by adjusting the core parameters.

[0155] The memory can include non-permanent memory in a computer readable medium, random access memory (RAM) and / or non-volatile memory such as read-only memory (ROM) or flash memory (flash RAM), and the memory includes at least one memory chip.

[0156] The embodiment of the application provides a computer readable storage medium, and the computer readable storage medium includes a stored program, wherein the computer readable storage medium controls a device to execute the data updating method of the component when the program runs.

[0157] The embodiment of the application provides a processor, and the processor is used to run a program, wherein the processor executes the data updating method of the component when the program runs.

[0158] The embodiment of the application provides a device, and the device includes a processor, a memory and a program stored in the memory and executable on the processor, and the processor executes the program to realize at least the data updating method of the component. The device herein can be a server, a PC, a PAD, a mobile phone or the like.

[0159] A computer program product includes a non-volatile computer readable storage medium, and the non-volatile computer readable storage medium stores a computer program, and the computer program is executed by a processor to realize the steps of the data updating method of the component in various embodiments of the application.

[0160] The application also provides a data updating system, comprising one or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, and the one or more programs comprise a data updating method for executing any one of the above components.

[0161] Obviously, those skilled in the art should understand that the modules or steps of the application described above can be realized by general computing devices, which can be centralized on a single computing device or distributed on a network composed of multiple computing devices, and can be realized by program codes executable by the computing devices, so that they can be stored in storage devices and executed by the computing devices, and in some cases, the steps shown or described can be executed in different order, or they can be respectively manufactured into individual integrated circuit modules, or multiple modules or steps among them can be manufactured into a single integrated circuit module. Therefore, the application is not limited to any specific combination of hardware and software.

[0162] Those skilled in the art should understand that the embodiments of the application can be provided as a method, a system, or a computer program product. Therefore, the application can adopt a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the application can adopt a computer program product implemented on one or more computer usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer usable program codes.

[0163] The application is described with reference to flowcharts and / or block diagrams according to the methods, devices (systems), and computer program products of the embodiments of the application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, and the combination of the flows and / or blocks in the flowcharts and / or block diagrams can be realized by computer program instructions. These computer program instructions can be provided to a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to produce a machine, so that the instructions executed by the computer or other programmable data processing devices produce a device that implements the functions specified in the flowcharts and / or block diagrams. Figure 1 The functions specified in one flow or multiple flows and / or blocks Figure 1 The devices that realize the functions specified in one block or multiple blocks.

[0164] These computer program instructions can also be stored in a computer readable memory that can guide the computer or other programmable data processing devices to work in a specific way, so that the instructions stored in the computer readable memory produce a manufactured product including instruction devices that implement the functions specified in the flowcharts and / or block diagrams. Figure 1 The functions specified in one flow or multiple flows and / or blocks Figure 1 the function(s) specified in the block or blocks.

[0165] These computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the operations specified in the flowchart block or blocks. Figure 1 one or more flowcharts and / or blocks Figure 1 the function(s) specified in the block or blocks.

[0166] In one typical configuration, the computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0167] The memory can include non-persistent memory and / or volatile memory, such as random access memory (RAM) about which the processor can execute instructions. The memory can also include non-volatile memory, such as read only memory (ROM), electrically programmable read only memory (EPROM), electrically erasable programmable read only memory (EEPROM), flash memory, or other memory technologies, CD-ROM, digital versatile disc (DVD), or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transitory medium that can be used to store information for access by a computing device. In no case does the disclosure rely on any

[0168] Computer readable media includes permanent and non-permanent, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory (ROM), electrically programmable read only memory (EEPROM), flash memory or other memory technologies, compact disc read only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette, magnetic disk storage or other magnetic storage devices, or any other non-transitory medium that can be used to store information accessible by a computing device. According to the definition herein, computer readable media does not include transitory media such as modulated data signals and carrier waves.

[0169] It should also be noted that the terms "comprising," "including," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements in the list, but can also include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without limitation, an element preceded by "comprises... a" does not, without more constraints, foreclose the existence of additional identical elements in the process, method, article, or apparatus that comprises the element.

[0170] From the above description, it can be seen that the above-mentioned embodiments of the present application achieve the following technical effects:

[0171] 1) The data updating method of the component of the present application defines the relationship between the component and the source data in advance. Each component no longer needs to understand the data structure of the parent-child relationship, but only needs to know which source data it needs. The component and the corresponding source data are subscribed, and when the source data is updated, the component can immediately perceive and render because the component subscribes to the source data, and no longer depends on the parent-child relationship between components to transmit data. In this way, when the data is updated, the data related to the component can be directly transmitted to the component, and the data does not need to be transmitted layer by layer between layers, saving the process of transmitting data layer by layer between components and reducing the maintenance cost of the code.

[0172] 2) The data updating device of the component of the present application defines the relationship between the component and the source data in advance. Each component no longer needs to understand the data structure of the parent-child relationship, but only needs to know which source data it needs. The component and the corresponding source data are subscribed, and when the source data is updated, the component can immediately perceive and render because the component subscribes to the source data, and no longer depends on the parent-child relationship between components to transmit data. In this way, when the data is updated, the data related to the component can be directly transmitted to the component, and the data does not need to be transmitted layer by layer between layers, saving the process of transmitting data layer by layer between components and reducing the maintenance cost of the code.

[0173] The above only describes the preferred embodiments of the present application and is not intended to limit the present application. For those skilled in the art, the present application can have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principles of the present application shall be included within the protection scope of the present application.< / product> < / t> < / t> < / navigationbar> < / button>

Claims

1. A component data update method, characterized in that: include: Obtain components of the UI interface, wherein the components include one or more of icons, buttons, navigation bars, and selection boxes; Obtaining source data, wherein the source data is used to render the component; Acquiring subscription information, wherein the subscription information is predefined information that indicates an association between the component and at least part of the source data; Subscribing the component to the corresponding source data according to the subscription information; When the source data is updated, the updated source data is used to render the subscribed component.

2. The method according to claim 1, characterized in that After obtaining the source data, the method further includes: In a case where the source data is of a basic data type, storing the source data of the basic data type in a first storage area, wherein the basic data type includes a variable; In a case where the source data is of a composite data type, storing the source data of the composite data type in a second storage area, wherein the composite data type includes a class object; In a case where the source data is of an array data type, the source data of the array data type is stored in a third storage area, wherein the array data type includes an array.

3. The method according to claim 2, characterized in that Subscribing the component to the corresponding source data according to the subscription information includes: In a case where the subscription information indicates that the component is associated with the source data of the basic data type, subscribing the component to the corresponding source data in the first storage area according to the subscription information; In a case where the subscription information indicates that the component has an association relationship with the source data of the composite data type, subscribing the component to the corresponding source data in the second storage area according to the subscription information; In a case where the subscription information indicates that the component is associated with the source data of the array data type, the component is subscribed to the corresponding source data in the third storage area according to the subscription information.

4. The method according to claim 2, characterized in that When the source data is updated, rendering the subscribed component using the updated source data includes: When the source data is of the basic data type and the source data is updated, extracting the updated variables in the source data to obtain source data variables; Extracting variables corresponding to the source data variables in the first storage area to obtain regional data variables; Assigning the value of the source data variable to the region data variable; The subscribed components are rendered using the value of the region data variable.

5. The method according to claim 2, characterized in that When the source data is updated, rendering the subscribed component using the updated source data includes: When the source data is of the composite data type and the source data is updated, extracting the updated class object from the source data to obtain the source data object; Extracting the class object corresponding to the source data object in the second storage area to obtain a regional data object; Determining the attribute information of the source data object as the attribute information of the region data object; The subscribed component is rendered using the attribute information of the region data object.

6. The method according to claim 2, characterized in that When the source data is updated, rendering the subscribed component using the updated source data includes: When the source data is of the array data type and the source data is updated, extracting the updated array from the source data to obtain a source data array; Extracting an array corresponding to the source data array in the third storage area to obtain a regional data array; Clearing the regional data array and determining the source data array as the regional data array; Renders the subscribed component using the region data array.

7. The method according to any one of claims 1 to 6, characterized in that Subscribing the component to the corresponding source data according to the subscription information includes: Deploy a decorator, where the decorator is one of the State decorator, Prop decorator, Link decorator, and Observed decorator; According to the subscription information, the decorator is used to subscribe the component to the corresponding source data.

8. A data updating device for a component, characterized in that: include: A first acquisition unit is configured to acquire a component of a UI interface, wherein the component includes one or more of an icon, a button, a navigation bar, and a selection box; A second acquiring unit is configured to acquire source data, wherein the source data is used to render the component; a third acquiring unit, configured to acquire subscription information, wherein the subscription information is predefined information on an association between the component and at least part of the source data; A subscription unit, configured to subscribe the component to the corresponding source data according to the subscription information; The rendering unit is configured to render the subscribed component using the updated source data when the source data is updated.

9. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the component data updating method according to any one of claims 1 to 7 are implemented.

10. A data updating system, characterized in that: include: One or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and are configured to be executed by the one or more processors, and the one or more programs include a data update method for executing the component described in any one of claims 1 to 7.

Images