CN116719541A - 一种组件更新方法、装置及电子设备 - Google Patents
一种组件更新方法、装置及电子设备 Download PDFInfo
- Publication number
- CN116719541A CN116719541A CN202310509785.4A CN202310509785A CN116719541A CN 116719541 A CN116719541 A CN 116719541A CN 202310509785 A CN202310509785 A CN 202310509785A CN 116719541 A CN116719541 A CN 116719541A
- Authority
- CN
- China
- Prior art keywords
- component
- node
- target
- target node
- tree structure
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 61
- 238000004458 analytical method Methods 0.000 claims abstract description 12
- 230000006870 function Effects 0.000 claims description 47
- 238000004891 communication Methods 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 11
- 238000005516 engineering process Methods 0.000 abstract description 2
- 238000013507 mapping Methods 0.000 description 14
- 238000009877 rendering Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 12
- 230000004048 modification Effects 0.000 description 7
- 238000012986 modification Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 230000003068 static effect Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L69/00—Network arrangements, protocols or services independent of the application payload and not provided for in the other groups of this subclass
- H04L69/22—Parsing or analysis of headers
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/901—Indexing; Data structures therefor; Storage structures
- G06F16/9027—Trees
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/903—Querying
-
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- Software Systems (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Data Mining & Analysis (AREA)
- Signal Processing (AREA)
- Computer Networks & Wireless Communication (AREA)
- Computational Linguistics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明实施例提供的一种组件更新方法、装置及电子设备，应用于信息技术领域，接收目标组件的更新请求；对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。通过本发明实施例的方案，在进行节点更新时，只需要获取并对目标组件的更新请求进行解析，就可以得到目标节点的位置信息，从而根据该位置信息进行在树形结构中进行目标节点的查找和更新，不但可以简化操作程序还可以提高更新效率。
Description
技术领域
本发明涉及信息技术领域，特别是涉及一种组件更新方法、装置及电子设备。
背景技术
React是常见的现代前端框架。在使用React框架开发的业务中，交互引起的组件布局变化，通常需要采用单向数据流配合其他方式如回调方法来实现。对于组件结构复杂，频繁动态布局的页面，如爱奇艺PC客户端的视频播放器，页面元素或其布局会经常变化。
然后，针对这些结构组件，在进行页面元素或其布局的变化时，由于业务代码往往较为分散，如同一个业务的代码可能分散在多个模块中，从而导致更新繁琐。
发明内容
本发明实施例的目的在于提供一种组件更新方法、装置及电子设备，以解决现有技术中组件更新繁琐的问题。具体技术方案如下：
在本发明实施的第一方面，首先提供了一种组件更新方法，所述方法包括：
接收目标组件的更新请求，其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新；
对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；
根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。
在一种可能的实施方式中，在所述接收目标组件更新请求之前，所述方法还包括：
根据所述预设节点的属性信息，确定预先创建的目标类组件或函数组件，并根据所述目标类组件或函数组件构建所述树形结构，其中，所述属性信息用于进行目标类组件或函数组件的识别。
在一种可能的实施方式中，所述根据所述类组件或者函数组件构建所述树形结构，包括：
根据确定的渲染的类组件或函数组件，将节点的属性信息中isRefreshable值为true的结构的目标类组件或函数组件添加至RefreshableComp组件中，得到所述树形结构。
在一种可能的实施方式中，所述根据解析得到的信息对所述树形结构进行查找，确定所述目标节点的位置，包括：
识别所述目标节点的父节点的层级；
根据识别到的父节点的层级对所述树形结构进行查找，确定所述目标节点的位置。
在一种可能的实施方式中，所述根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新，包括：
对于增删的节点，在所述树形结构中向上查找距离所述目标节点的父节点最近的RefreshableComp组件并进行更新；
对于更新属性的节点，在所述树形结构中向上查找距离所述目标节点最近的RefreshableComp组件并进行更新。
在本发明实施例的第二方面，提供了一种组件更新装置，所述装置包括：
请求接收模块，用于接收目标组件的更新请求，其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新；
请求解析模块，用于对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；
节点更新模块，用于根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。
在一种可能的实施方式中，所述装置还包括：
结构创建模块，用于根据所述预设节点的属性信息，确定预先创建的目标类组件或函数组件，并根据所述目标类组件或函数组件构建所述树形结构，其中，所述属性信息用于进行目标类组件或函数组件的识别。
在一种可能的实施方式中，所述结构创建模块，具体用于根据确定的渲染的类组件或函数组件，将节点的属性信息中isRefreshable值为true的结构的目标类组件或函数组件添加至RefreshableComp组件中，得到所述树形结构。
在一种可能的实施方式中，所述请求解析模块，包括：
层级识别子模块，用于识别所述目标节点的父节点的层级；
结构查找子模块，用于根据识别到的父节点的层级对所述树形结构进行查找，确定所述目标节点的位置。
在一种可能的实施方式中，所述节点更新模块，具体用于对于增删的节点，在所述树形结构中向上查找距离所述目标节点的父节点最近的RefreshableComp组件并进行更新；对于更新属性的节点，在所述树形结构中向上查找距离所述目标节点最近的RefreshableComp组件并进行更新。
在本发明实施的又一方面，还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；
存储器，用于存放计算机程序；
处理器，用于执行存储器上所存放的程序时，实现上述任一组件更新方法。
在本发明实施的又一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一组件更新方法。
在本发明实施的又一方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一组件更新方法。
本发明实施例提供的一种组件更新方法、装置及电子设备，接收目标组件的更新请求，其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新；对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。通过本发明实施例的方案，在进行节点更新时，只需要获取并对目标组件的更新请求进行解析，就可以得到目标节点的位置信息，从而根据该位置信息进行在树形结构中进行目标节点的查找和更新，不但可以简化操作程序还可以提高更新效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。
图1为本发明实施例中组件更新方法的一种流程示意图；
图2为本发明实施例中Node数据结构的一种结构示意图；
图3为本发明实施例中组件更新方法的一种应用实例图；
图4为本发明实施例中获取目标节点位置的一种结构示意图；
图5为本发明实施例中组件更新方法的第一种示意图；
图6为本发明实施例中组件更新方法的第二种示意图；
图7为本发明实施例中组件更新方法的第三种示意图；
图8为本发明实施例中组件更新方法的第四种示意图；
图9为本发明实施例中组件更新方法的第五种示意图；
图10为本发明实施例中组件更新方法的第六种示意图；
图11为本发明实施例中组件更新方法的另一种应用实例图；
图12为本发明实施例中组件更新装置的一种结构示意图；
图13为本发明实施例中电子设备的一种结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。
首先，对本发明实施例中可能使用到的专业术语进行解释：
Node：预设的节点数据结构，可级联成树形结构；
NodeProps：预设的节点更新数据结构；
node：表示节点数据；
nodeProps：Node数据结构中的属性，存储该节点的渲染数据；
RefreshableComp:高阶函数返回的包装组件，以此实现可以独立刷新的小单元；
addNode：增加一个节点；
removeNode：删除一个节点；
refreshNode：修改节点组件属性；
batchUpdateComponentsArray：批量更新一组节点；
batchUpdateComponentsTree：更新组件树的一个片段；
其中，本申请实施例中，addNode、removeNode、refreshNode、batchUpdateComponentsArray、batchUpdateComponentsTree均是本申请实施例提供的方案的API。
在本发明实施的第一方面，首先提供了一种组件更新方法，参见图1，所述方法包括：
步骤S11，接收目标组件的更新请求。
其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新。具体的，本申请实施例中，更新请求中可以包括节点的NodeProps，节点的NodeProps中包括目标节点的信息和目标组件实例，目标节点信息可以包括目标节点的位置信息。
步骤S12，对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置。
其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息。本申请实施例中在进行节点的更新时首先要查找目标节点在树形结构中的位置。由于更新请求中可以包括节点的NodeProps，节点的NodeProps中包括目标节点的信息和目标组件实例，目标节点信息包括目标节点的位置信息，因此，可以对更新请求进行解析，确定该更新请求中的目标节点的位置信息，从而进行节点的更新。
步骤S13，根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。
在本申请实施例中，根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新的关键是找到目标组件实例，本申请中目标组件实例是在初次渲染的时候，就由方案内部保存了，之后的更新，只需要父节点层级和目标节点层级，便可找到目标组件实例，进行更新。而目标渲染组件函数是初次渲染，也就是生成React组件树时，用于构造React元素的。从而通过本发明实施例的方法，在进行节点更新时，只需要识别目标节点对应的目标组件实例，并对目标组件实例进行更新即可，不但可以简化操作程序还可以提高更新效率。
一个例子中，当本申请实施例的方法应用于某个元素的样式背景色的改动时，可以通过构造结果获取接口API获取用户发送的针对元素的样式背景色对应的组件的更新请求，然后对该更新请求进行解析，确定更新的数据和该元素的样式背景色对应的节点在组件树中的位置，然后根据更新数据对该节点进行更新。
可见，通过本发明实施例的方法，在进行节点更新时，只需要获取并对目标组件的更新请求进行解析，就可以得到目标节点的位置信息，从而根据该位置信息进行在树形结构中进行目标节点的查找和更新，不但可以简化操作程序还可以提高更新效率。
在一种可能的实施方式中，在所述接收目标组件更新请求之前，所述方法还包括：根据所述预设节点的属性信息，确定预先创建的目标类组件或函数组件，并根据所述目标类组件或函数组件构建所述树形结构，其中，所述属性信息用于进行目标类组件或函数组件的识别。在一种可能的实施方式中，所述根据所述类组件或者函数组件构建所述树形结构，包括：根据确定的渲染的类组件或函数组件，将节点的属性信息中isRefreshable值为true的结构的目标类组件或函数组件添加至RefreshableComp组件中，得到所述树形结构。其中，本发明实施例中目标节点通过预设数据结构Node表示，预设数据结构中的NodeProps中包括目标节点更新的相关信息，如，目标节点的信息和目标组件实例。具体的，Node中存在NodeProps字段，NodeProps中存在type字段，该字段标识了目标渲染的类组件或者函数组件，通过目标渲染的类组件或者函数组件可以碱性树形结构的创建。
本申请实施例中的Node数据结构可以参见图2。每个节点node都会使用Node数据结构表示，id在同一层级的节点中是唯一的。subs是这个节点的子节点数组，tag用于给节点加标识，用于业务需求，比如业务可能需要取出tag为”abc”的所有节点，让其隐藏等等。NodeProps中的type可以标识对应的类组件或函数组件，比如div,React Native中的View，也可以是自定义的组件。defaultElement是节点的静态元素部分，在创建节点后不会更新。props是组件的属性。isRefreshable标识节点是否后续可以作为一个单元独立刷新，是减少不必要节点刷新的一种方法。在添加节点的时候，调用方构造出node数据结构，通过构造结果获取接口API传入，之后节点对应的组件要更新属性，调用方通过本方案提供的API传入节点id，以及节点的NodeProps属性中的props结构，其中该构造结果获取接口API还可以获取组件树，并将将获取到的组件树添加到React组件中。
一个例子中，本申请实施例中可以创建展示模块，通过展示模块将预先生成的组件树展示给用户，以使用户根据展示的组件树进行操作指令的输入。参见图3，当通过创建并通过展示模块获取Dom组件树来实现本申请实施例的方案时，可以通过展示模块获取React元素树API，取到元素树之后，按照需求插入到展示模块已有的组件层级中，之后要增删修改节点，只需引入本发明实施例的方案，调用相关API，传入所需数据，本发明实施例的方案内部会解析数据，完成组件重新渲染更新，具体的，可以通过Dom数据更新API获取关联模块A中的数据，或者通过通过Dom数据更新API获取关联模块B中的数据。从而通过本发明实施例的方案，可以将React组件树中的动态部分独立出来，任意模块要修改该动态部分只需与本方案交互即可，代码清晰好维护。具体的包括：定义统一抽象的数据结构，所托管的动态组件树的每一个单节点用其来表示，该数据结构可级联成树形结构；将此树形结构解析，并映射成业务组件树展示出来；如要动态改变组件布局，只需按照本方案提供的命令，指定要修改的节点，并传递修改后的数据即可。从而在只需要修改部分节点时，只需要获取该部分节点的信息就可以完成对该部分节点的修改，而不需要对整个组件进行更新，提高修改的效率。
在一种可能的实施方式中，所述根据解析得到的信息对所述树形结构进行查找，确定所述目标节点的位置，参见图4，包括：
步骤S41，识别所述目标节点的父节点的层级；
步骤S42，根据识别到的父节点的层级对所述树形结构进行查找，确定所述目标节点的位置。
本申请实施例中，对所述目标节点进行更新可以对node节点的子节点进行增删操作，或者对nodeProps中的props进行更新。如果是增删节点，需指定要操作的父节点的层级，并传入增加的子节点的Node结构或者要删除的节点id，如果是修改节点属性，需指定要操作的节点的父层级和节点id，以及修改后的属性值，或者要合并进来的属性值。因此，在根据解析得到的信息对所述树形结构进行查找，确定所述目标节点的位置，需要根据识别到的父节点的层级对所述树形结构进行查找，确定所述目标节点的位置。一个例子中，当本申请实施例的方法应用于某个元素的样式背景色的改动时，对该更新请求进行解析，确定更新的数据和该元素的样式背景色对应的节点在组件树中的位置，然后根据该节点在组件树中的位置首先确定待修改的节点的父节点的位置，然后对该父节点进行查找，从而确定待修改的节点的位置，并对该待修改的节点进行更新。
具体的，本申请实施例中，步骤S12对所述更新请求进行解析时，节点数据解析成组件的过程是逐层进行的，每一层解析时，都要带入上一层的层级id，每个组件实例存入instanceMap时，会以其所有父层级以及自己的id所组成的字符串作为key。获取typeComponent就是组件类型映射，根据type的数据类型确定是静态映射或者动态映射。获取wrapTypeComponent就是取到RefreshableComp组件，type不同，对应着不同的RefreshableComp组件，RefreshableComp组件会存储在一个map中，取RefreshableComp组件时，先以type为key去该map中取，如取不到，则初始化一个并放在map中，之后的逻辑便可直接从map中取用。其中，通过node的nodeProps中的type值，确定目标渲染的类组件或者函数组件，然后根据确定结果，构造目标渲染类型的类组件或者函数组件的React元素；或，将node的nodeProps中的type值设置为目标key值；根据目标key值，构造目标渲染类型的类组件或者函数组件的React元素。本申请实施例中，在根据解析得到的信息对所述树形结构进行查找之前，首先要进行更新请求的解析，参见图5，在解析时，需要读取cid(内容标识符)，具体的cid＝parentId+id，然后获取typeComponent；判断inRefreshable是否为true；若是，则获取wrapTypeComponent，构造wrapTypeComponent对应的React Element，然后获取React Element渲染出的组件实例instance，若否，则构造wrapTypeComponent对应的ReactElement，然后直接获取React Element渲染出的组件实例instance；然后将instance推入instanceMap，使用cid作为key值，从而解析subs，解析完成后还可以将parentId反馈至读取cid的步骤，以进行cid的计算，其中，node的数据结构可以参见图2。针对图5中获取typeInstance的具体过程可以参见图6，在获取typeInstance时，可以在获取nodeProps，然后判断type(类型)是否为String(字符串)；若是，则以type为key(符号)，从componentMap获取渲染组件，然后判断是否获取到component，若获取到则返回component对应的ReactElement，若未获取到则返回null(空指针)；若否，则判断type是否为Function类型，若是则返回type对应的ReactElement，否则返回null。参见图7，在获取wrapTypeInstance时，可以以type为key，从wrapTypeMap获取wrapType；然后判断是否取到wrapType，若取到则直接返回wrapType对应的TypeComponent；若未取到，则初始化wrapType之后，返回wrapType对应的TypeComponent。
可见，通过本申请实施例的方法，可以识别所述目标节点的父节点的层级，然后根据识别到的父节点的层级对所述树形结构进行查找，确定所述目标节点的位置，从而根据该目标节点的位置进行目标节点的查找和更新。
在一种可能的实施方式中，所述根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新，包括：对于增删的节点，在所述树形结构中向上查找距离所述目标节点的父节点最近的RefreshableComp组件并进行更新；对于更新属性的节点，在所述树形结构中向上查找距离所述目标节点最近的RefreshableComp组件并进行更新。
本申请实施例中对目标节点进行更新，可以包括增删的节点和更新属性，具体的，可以包括增加节点、删除节点、修改节点和修改节点对应组件属性。本申请实施例中，节点数据解析器是指增加/删除/批量修改等节点数据解析接口，数据解析更新的过程中，会收集所有要更新的节点路径(refreshpath)以及该路径下要更新的节点(updateChildrenPath),refreshpath合并主要用于批量更新节点时，对更新路径去重，减少多余更新。之后对于每个更新路径，会从instanceMap中找到节点对应的组件实例，开始刷新，React刷新某个组件时，默认会逐层刷新其下所有子组件，本方案中由于RefreshableComp的存在，刷新单元会按照其划分，因此只会刷新refreshpath指定的节点对应的组件实例，以及updateChildrenPath中对应的子组件实例，以提高页面刷新效率。参见图8，在通过本申请实施例的方法进行节点的更新时，需要首先进行节点数据的解析，具体可以通过节点数据解析器进行解析，然后根据解析得到的节点位置信息，遍历收集各个节点的refreshpath和updateChildrenpath，然后进行refreshpath合并，然后遍历各refreshpath从instanceMap中找到instance，最后刷新instance。参见图9，在收集refreshpath和updateChildrenpath时，若增加节点则要获取目标节点的父节点的层级和要增加的node数据，然后获取节点所在父node，然后在父节点subs中增加node数据，再在updateChildrenPath增加子节点path，然后设定refreshpath＝父节点path，返回refreshpath，updateChildrenPath；若删除节点时，则需要获取父节点层级和要删除的node id，然后获取节点所在父node，再在父节点subs中删除node数据，最后设定refreshpath＝父节点path，返回refreshpath，updateChildrenPath；在修改节点时，需要获取父节点层级，节点id，修改内容，tag/visible等，然后获取节点所在父node，再根据id获取node，修改node.tag，node.props，visible等，最后设定refreshpath＝父节点path，返回refreshpath，updateChildrenPath；在修改节点对应组件属性时，需要获取父节点层级，节点id，修改的节点组件props，然后获取节点所在父node，再根据id获取子node，修改node.props.props，最后设定refreshpath＝父节点path，返回refreshpath，updateChildrenPath。参见图10，在进行instance刷新时，可以获取节点然后判断是否为RefreshableComp；若是，则判断是否为refreshpath或在updateChildrenPath中，若否则结束，若是则渲染该节点实现更新；若不是refreshpath，则直接渲染该节点。在渲染该节点之后还可以遍历子节点。
为了说明本申请实施例的方法，以下结合具体实施例进行说明，参见图11，包括：
1、创建组件对应的树形结构，并对创建的树形结构进行管理。树形数据存储管理具体用于对组件对应的树形数据结构进行管理，本方案中各节点对应Node结构，各节点对应的Node结构级联而成的树形数据；
2、进行组件类型的映射，对组件类型的映射可以将node节点数据映射成组件渲染到界面上，跟界面展示的React组件树形成对应关系。具体的，可以通过预先存储的映射机制实现映射。本申请实施例中的映射可以分为动态映射和静态映射，动态映射即直接由nodeProps中的type指定一个渲染类组件或者函数组件，静态映射即本方案提供接口来注册一种类组件或者函数组件，指定其key值，之后node节点若要使用该类组件或者函数组件来渲染节点，只需要将NodeProps的type指定为key值；
3、将构造的组件树向用户进行展示，通过深度逐级遍历每个层级的Node数据结构，根据上述的组件类型映射获取到对应的React组件并向用户进行展示，从而接收用户的更新请求；
4、树形数据增删等更新，具体可以对node节点的子节点进行增删操作，或者对nodeProps中的props进行更新。如果是增删节点，需指定要操作的父节点的层级，并传入增加的子节点的Node结构或者要删除的节点id，如果是修改节点属性，需指定要操作的节点的父层级和节点id，以及修改后的属性值，或者要合并进来的属性值，具体的可以对接收到的用户的更新请求进行解析，从而根据解析得到的节点位置和更新数据进行节点的更新；
5、组件树引用映射根据节点的更新信息对映射的组件树进行更新，对构造的每个节点保存ref引用；
6、DOM节点展示刷新对增删的节点从该节点的父节点开始，往上找到最近的RefreshableComp组件进行更新，对于更新属性的节点，从该节点开始，往上找到最近的RefreshableComp组件进行更新。
可见，通过本发明实施例的方法，在进行节点更新时，只需要获取并对目标组件的更新请求进行解析，就可以得到目标节点的位置信息，从而根据该位置信息进行在树形结构中进行目标节点的查找和更新，不但可以简化操作程序还可以提高更新效率。
在本发明实施例的第二方面，提供了提供了一种组件更新装置，参见图12，上述装置包括：
请求接收模块1201，用于接收目标组件的更新请求，其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新；
请求解析模块1202，用于对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；
节点更新模块1203，用于根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。
在一种可能的实施方式中，所述装置还包括：
结构创建模块，用于根据所述预设节点的属性信息，确定预先创建的目标类组件或函数组件，并根据所述目标类组件或函数组件构建所述树形结构，其中，所述属性信息用于进行目标类组件或函数组件的识别。
在一种可能的实施方式中，所述结构创建模块，具体用于根据确定的渲染的类组件或函数组件，将节点的属性信息中isRefreshable值为true的结构的目标类组件或函数组件添加至RefreshableComp组件中，得到所述树形结构。
在一种可能的实施方式中，所述请求解析模块，包括：
层级识别子模块，用于识别所述目标节点的父节点的层级；
结构查找子模块，用于根据识别到的父节点的层级对所述树形结构进行查找，确定所述目标节点的位置。
在一种可能的实施方式中，所述节点更新模块，具体用于对于增删的节点，在所述树形结构中向上查找距离所述目标节点的父节点最近的RefreshableComp组件并进行更新；对于更新属性的节点，在所述树形结构中向上查找距离所述目标节点最近的RefreshableComp组件并进行更新。
可见，通过本发明实施例的装置，在进行节点更新时，只需要获取并对目标组件的更新请求进行解析，就可以得到目标节点的位置信息，从而根据该位置信息进行在树形结构中进行目标节点的查找和更新，不但可以简化操作程序还可以提高更新效率。
本发明实施例还提供了一种电子设备，如图13所示，包括处理器1301、通信接口1302、存储器1303和通信总线1304，其中，处理器1301，通信接口1302，存储器1303通过通信总线1304完成相互间的通信，
存储器1303，用于存放计算机程序；
处理器1301，用于执行存储器1303上所存放的程序时，实现如下步骤：
接收目标组件的更新请求，其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新；
对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；
根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。
上述终端提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
通信接口用于上述终端与其他设备之间的通信。
存储器可以包括随机存取存储器(Random Access Memory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processor，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述实施例中任一所述的组件更新方法。
在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的组件更新方法。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、存储介质及计算机程序产品实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。
Claims (10)
1.一种组件更新方法，其特征在于，所述方法包括：
接收目标组件的更新请求，其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新；
对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；
根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。
2.根据权利要求1所述的方法，其特征在于，在所述接收目标组件更新请求之前，所述方法还包括：
根据所述预设节点的属性信息，确定预先创建的目标类组件或函数组件，并根据所述目标类组件或函数组件构建所述树形结构，其中，所述属性信息用于进行目标类组件或函数组件的识别。
3.根据权利要求2所述的方法，其特征在于，所述根据所述类组件或者函数组件构建所述树形结构，包括：
根据确定的渲染的类组件或函数组件，将节点的属性信息中isRefreshable值为true的结构的目标类组件或函数组件添加至RefreshableComp组件中，得到所述树形结构。
4.根据权利要求1所述的方法，其特征在于，所述根据解析得到的信息对所述树形结构进行查找，确定所述目标节点的位置，包括：
识别所述目标节点的父节点的层级；
根据识别到的父节点的层级对所述树形结构进行查找，确定所述目标节点的位置。
5.根据权利要求1所述的方法，其特征在于，所述根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新，包括：
对于增删的节点，在所述树形结构中向上查找距离所述目标节点的父节点最近的RefreshableComp组件并进行更新；
对于更新属性的节点，在所述树形结构中向上查找距离所述目标节点最近的RefreshableComp组件并进行更新。
6.一种组件更新装置，其特征在于，所述装置包括：
请求接收模块，用于接收目标组件的更新请求，其中，所述目标组件包括多个预设节点，所述多个预设节点级联成树形结构，所述更新请求包括多个预设节点中待更新的目标节点的信息和目标组件实例，所述目标组件实例用于对所述目标节点进行更新；
请求解析模块，用于对所述更新请求进行解析，并根据解析得到的目标节点信息对所述树形结构进行查找，确定所述目标节点的位置，其中，所述目标节点信息包括目标节点在所述树形结构中的位置信息；
节点更新模块，用于根据所述更新后的目标组件实例和所述目标节点的位置对所述目标节点进行更新。
7.根据权利要求6所述的装置，其特征在于，所述装置还包括：
结构创建模块，用于根据所述预设节点的属性信息，确定预先创建的目标类组件或函数组件，并根据所述目标类组件或函数组件构建所述树形结构，其中，所述属性信息用于进行目标类组件或函数组件的识别。
8.根据权利要求7所述的装置，其特征在于，
所述结构创建模块，具体用于根据确定的渲染的类组件或函数组件，将节点的属性信息中isRefreshable值为true的结构的目标类组件或函数组件添加至RefreshableComp组件中，得到所述树形结构。
9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；
存储器，用于存放计算机程序；
处理器，用于执行存储器上所存放的程序时，实现权利要求1-5任一所述的方法步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-5任一所述的方法步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310509785.4A CN116719541A (zh) | 2023-05-08 | 2023-05-08 | 一种组件更新方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310509785.4A CN116719541A (zh) | 2023-05-08 | 2023-05-08 | 一种组件更新方法、装置及电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116719541A true CN116719541A (zh) | 2023-09-08 |
Family
ID=87872382
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310509785.4A Pending CN116719541A (zh) | 2023-05-08 | 2023-05-08 | 一种组件更新方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116719541A (zh) |
-
2023
- 2023-05-08 CN CN202310509785.4A patent/CN116719541A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8572202B2 (en) | Persistent saving portal | |
| US9652441B2 (en) | System and method for creation of templates | |
| JP5911594B2 (ja) | アプリケーションのローカリゼイションにおける翻訳支援の提供 | |
| US20130054812A1 (en) | System and method for dynamically assembling an application on a client device | |
| WO2020211236A1 (zh) | 基于b+树的读写冲突解决方法、装置及存储介质 | |
| CN106648569B (zh) | 目标序列化实现方法和装置 | |
| US7720814B2 (en) | Repopulating a database with document content | |
| US10372760B2 (en) | Building queries directed to objects hosted on clouds | |
| CN110968314B (zh) | 一种页面生成方法及装置 | |
| CN110941779A (zh) | 加载页面的方法、装置、存储介质及电子设备 | |
| CN107515866B (zh) | 一种数据操作方法、装置和系统 | |
| CN111198852A (zh) | 微服务架构下知识图谱驱动的元数据关系推理方法 | |
| CN112231281A (zh) | 层叠样式表文件的处理方法、装置、设备及存储介质 | |
| CN111984262A (zh) | 微信层叠样式表文件的处理方法、装置、设备及存储介质 | |
| CN111427577A (zh) | 代码处理方法、装置及服务器 | |
| CN113377458B (zh) | 插件管理方法、装置、电子设备和存储介质 | |
| CN108694172B (zh) | 信息输出方法和装置 | |
| CN112783482A (zh) | 一种可视化表单生成方法、装置、设备及存储介质 | |
| CN112257005A (zh) | 一种表单组件生成方法及装置 | |
| US10788959B2 (en) | Personalization of a web application | |
| CN111367606A (zh) | 一种应用程序页面的显示方法、装置、终端及介质 | |
| WO2017049715A1 (zh) | 页面构建方法、装置、设备及非易失性计算机存储介质 | |
| CN116719541A (zh) | 一种组件更新方法、装置及电子设备 | |
| CN113177391B (zh) | 在流式界面中操作光标重定向方法、计算设备及存储介质 | |
| CN112732254B (zh) | 网页开发方法、装置、计算机设备和存储介质 |
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 |