[发明专利]组件更新方法及装置、计算机可读存储介质、终端

说明书

一种组件更新方法及装置、计算机可读存储介质、终端，所述方法包括：确定应用程序的状态数据集，所述状态数据集用于存储所述应用程序的各个组件调用的状态数据；对所述状态数据集进行拆分处理，以得到预设拆分数量个状态数据子集；确定待修改的状态数据子集；对于每个待修改的状态数据子集，确定该状态数据子集的一个或多个调用组件；对所确定的各个调用组件的状态数据的至少一部分进行更新。上述方案可以降低组件更新的资源开销，并提高组件更新效率。

技术领域

本发明涉及计算机技术领域，尤其涉及一种组件更新方法及装置、计算机可读存储介质、终端。

背景技术

基于构建用户界面编程语言库React所构建的页面由一个个的组件组成。组件之间有嵌套关系，例如可以形成组件树，每个组件具有各自的状态数据(组件的状态数据可以是进行组件展示所需的数据)。组件树的各个组件之间的关系可以分为父子组件，兄弟组件，以及没有直接关系的组件。组件树有一个公共的父组件，称之为根组件，根组件是所有组件的源头。一般意义上的，React状态数据流是由父组件统一管理，放在父组件的状态数据中，然后由props传递给子组件(或可以理解为子组件通过props调用父组件中的状态数据)。父组件中更新状态数据的方法，也通过props传递给子组件。但一般的业务页面中，组件的层级都会很深，跨越多个组件进行状态数据的传值(状态数据只能在父子组件之间逐层进行传递)，会导致代码变得冗余、调试困难、简单问题复杂化等一系列问题。因此，有必要研究将页面的状态进行全局性管理，包括更新组件状态的方法等，以降低复杂度。

在现有技术中，比较常见的解决方法是利用React提供的上下文Context应用程序接口(Application Programming Interface，API)，将应用程序的所有组件调用的状态数据放在一处统一维护，例如可以采用状态树维护全部的调用状态数据。具体而言，React通过从根组件中传入状态树，然后在各个子组件中调用更新API，子组件中调用的更新API用于更新状态树中由该子组件调用的那部分状态数据。

但上述方法存在的明显缺陷在于：每次只要状态树中的任意状态数据发生更新，所有组件都会更新(即所有组件都会重新渲染)，即使被更新的状态数据仅被一个或少数几个组件使用。由此，会造成很多无效的组件更新，导致资源开销的浪费和组件更新效率低下。以地图编辑软件为例，地图编辑应用场景属于高频触发状态更新的场景。如果采用上述方案，会导致地图编辑软件中组件频繁触发更新。然而，大批量组件更新会占用较多资源，展现给用户的视觉效果就是页面非常卡顿，从而大大降低编辑人员的编辑效率，难以支撑业务的顺利开展。

发明内容

本发明实施例解决的技术问题是现有的组件更新方法会触发很多无效的组件更新，造成资源开销的浪费以及组件更新效率的降低。

为解决上述技术问题，本发明实施例提供一种组件更新方法，包括以下步骤：确定应用程序的状态数据集，所述状态数据集用于存储所述应用程序的各个组件调用的状态数据；对所述状态数据集进行拆分处理，以得到预设拆分数量个状态数据子集；确定待修改的状态数据子集；对于每个待修改的状态数据子集，确定该状态数据子集的一个或多个调用组件；对所确定的各个调用组件的状态数据的至少一部分进行更新。

可选的，所述状态数据集中的每个状态数据与一个或多个调用组件具有预设的映射关系。

可选的，所述确定待修改的状态数据子集包括：接收状态数据子集修改指令，所述状态数据子集修改指令包含指示所述待修改的状态数据子集的指示信息；根据接收的所述状态数据子集修改指令，确定待修改的状态数据子集。

可选的，所述对所确定的各个调用组件的状态数据的至少一部分进行更新包括：对于每个调用组件，确定该调用组件的状态更新指令；根据所确定的状态更新指令对该调用组件的状态数据的至少一部分进行更新；其中，每个调用组件的状态更新指令用于指示更新该调用组件的状态数据的至少一部分。