CN115237413B

CN115237413B - 一种列表处理方法、装置、电子设备及存储介质

Info

Publication number: CN115237413B
Application number: CN202211154482.7A
Authority: CN
Inventors: 张鹏; 潘志宇
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2022-09-22
Filing date: 2022-09-22
Publication date: 2023-02-24
Anticipated expiration: 2042-09-22
Also published as: CN115237413A

Abstract

本公开关于一种列表处理方法、装置、电子设备及存储介质，该方法包括：获取用于创建目标列表的数据源；拦截处理所述目标列表的目标操作，并创建所述目标列表对应的影子树；按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图；获取所创建的每一视图对应的视图内容；将所述视图内容渲染到对应的视图中，得到所述目标列表。这样，即保证了创建视图的过程是有顺序性的，渲染视图的过程也是顺序性的，进而保证了创建视图和渲染视图均有序进行，目标列表的列表内容不会出错。

Description

一种列表处理方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机领域，特别是涉及一种列表处理方法、装置、电子设备及存储介质。

背景技术

React Native(RN)是开源的跨平台技术框架，是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用。

在跨平台业务中，目前RN平台下，最常见、被最频繁使用的场景就是列表场景。在列表场景中，在长列表接入业务后，由于创建和渲染长列表中多个行的随机性，可能导致列表渲染异常，从而导致列表内容异常。

发明内容

为客服相关技术存在的上述技术问题，本公开实施例提供了一种列表处理方法、装置、电子设备及存储介质。

第一方面，本公开实施例提供了一种列表处理方法，包括：

获取用于创建目标列表的数据源；所述目标列表包括多个行，每一行对应一个视图，所述数据源包括每一视图的视图信息；

拦截处理所述目标列表的目标操作，并创建所述目标列表对应的影子树；所述目标操作包括对所述多个行对应视图的创建操作；所述影子树包括多个叶子节点；每个叶子节点对应所述目标列表的一个视图，一个叶子节点的节点信息为该叶子节点对应视图的视图信息；

按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图；

获取所创建的每一视图对应的视图内容；每一视图的视图内容是基于该视图对应叶子节点的节点信息创建的；

将所述视图内容渲染到对应的视图中，得到所述目标列表。

可选的，所述获取所创建的每一视图对应的视图内容之前，还包括：

基于所述多个叶子节点中目标叶子节点对应视图的视图信息，创建所述目标叶子节点对应视图的视图内容；

将所述目标叶子节点对应视图的视图内容缓存于第一缓存池中。

可选的，所述获取所创建的每一视图对应的视图内容，包括：

对于所创建的每一视图，在所述第一缓存池中查找是否存在该视图对应的视图内容；

当所述第一缓存池中存在该视图对应的视图内容时，从所述第一缓存池中获取该视图对应的视图内容。

可选的，还包括：

当所述第一缓存池中不存在该视图对应的视图内容时，基于该视图对应的叶子节点的视图信息创建该视图的视图内容。

可选的，还包括：

获取更新后的数据源，所述更新后的数据源包括更新后的目标列表的视图的视图信息；

拦截处理所述更新后的目标列表的目标操作，并基于所述更新后的数据源更新所述影子树，得到更新后的影子树；

基于所述更新后的影子树所包括的叶子节点的视图信息，以及，更新前的所述影子树所包括的叶子节点的视图信息，确定发生变更的变更叶子节点；

获取所述变更叶子节点对应的视图内容，并将所述变更叶子节点对应的视图内容渲染到所述目标列表对应的视图中，得到更新后的目标列表。

可选的，所述获取所述变更叶子节点对应的视图内容，包括：

当所述第一缓存池中不存在所述变更叶子节点对应的视图内容时，基于所述变更叶子节点的视图信息，创建所述变更叶子节点对应的视图内容。

可选的，所述按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图，包括：

在创建每一叶子节点对应的视图时，从所述影子树中查找该叶子节点的视图信息；

基于所查找到的视图信息中的属性信息，确定所述视图的宽度和高度；所述属性信息包括视图的大小；

创建具有所述宽度和高度的视图。

可选的，所述目标列表的所述多个行通过至少两个视图页面分页展示，所述按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图，包括：

响应于展示当前视图页面的目标行，且所述当前视图页面不属于所述至少两个视图页面中的首个视图页面，从第二缓存池中获取已缓存的目标数量个视图；所述目标数量为单个视图页面所能展示的所述目标列表的行数量；

按照所述当前视图页面的目标行对应的叶子节点的节点顺序，将所述目标数量个视图依次确定为所述当前视图页面对应的叶子节点的视图。

可选的，所述响应于展示当前视图页面的目标行，且所述当前视图页面不属于所述至少两个视图页面中的首个视图页面，从第二缓存池中获取已缓存的目标数量个视图之前，还包括：

响应于展示首个视图页面的目标行，按照所述影子树所包括的叶子节点的节点顺序，创建所述目标数量个叶子节点对应的视图；

将所创建的所述目标数量个视图缓存于所述第二缓存池中，并将所述目标数量个视图依次确定为所述首个视图页面对应的叶子节点的视图。

根据本公开实施例的第二方面，提供了一种列表处理装置，包括：

数据源获取模块，被配置为执行获取用于创建目标列表的数据源；所述目标列表包括多个行，每一行对应一个视图，所述数据源包括每一视图的视图信息；

操作拦截模块，被配置为执行拦截处理所述目标列表的目标操作，并创建所述目标列表对应的影子树；所述目标操作包括对所述多个行对应视图的创建操作；所述影子树包括多个叶子节点；每个叶子节点对应所述目标列表的一个视图，一个叶子节点的节点信息为该叶子节点对应视图的视图信息；

视图创建模块，被配置为执行按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图；

视图内容获取模块，被配置为执行获取所创建的每一视图对应的视图内容；每一视图的视图内容是基于该视图对应叶子节点的节点信息创建的；

视图渲染模块，被配置为执行将所述视图内容渲染到对应的视图中，得到所述目标列表。

可选的，还包括：

视图内容创建模块，被配置为执行在所述视图内容获取模块获取所创建的每一视图对应的视图内容之前，基于所述多个叶子节点中目标叶子节点对应视图的视图信息，创建所述目标叶子节点对应视图的视图内容；

视图内容缓存模块，被配置为执行将所述目标叶子节点对应视图的视图内容缓存于第一缓存池中。

可选的，所述视图内容获取模块，具体被配置为执行：

可选的，所述视图内容获取模块，还具体被配置为执行：

可选的，还包括：

数据源获取模块，还被配置为执行获取更新后的数据源，所述更新后的数据源包括更新后的目标列表的视图的视图信息；

操作拦截模块，还被配置为执行拦截处理所述更新后的目标列表的目标操作，并基于所述更新后的数据源更新所述影子树，得到更新后的影子树；

变更叶子节点确定模块，被配置为执行基于所述更新后的影子树所包括的叶子节点的视图信息，以及，更新前的所述影子树所包括的叶子节点的视图信息，确定发生变更的变更叶子节点；

视图内容获取模块，还被配置为执行获取所述变更叶子节点对应的视图内容，并将所述变更叶子节点对应的视图内容渲染到所述目标列表对应的视图中，得到更新后的目标列表。

可选的，所述视图内容获取模块，还具体被配置为执行：

可选的，所述视图创建模块，具体被配置为执行：

创建具有所述宽度和高度的视图。

可选的，所述目标列表的所述多个行通过至少两个视图页面分页展示，所述视图创建模块，具体被配置为执行：

可选的，还包括：

所述视图创建模块，还被配置为执行在所述响应于展示当前视图页面的目标行，且所述当前视图页面不属于所述至少两个视图页面中的首个视图页面，从第二缓存池中获取已缓存的目标数量个视图之前，响应于展示首个视图页面的目标行，按照所述影子树所包括的叶子节点的节点顺序，创建所述目标数量个叶子节点对应的视图；

视图内容缓存模块，还被配置为执行将所创建的所述目标数量个视图缓存于所述第二缓存池中，并将所述目标数量个视图依次确定为所述首个视图页面对应的叶子节点的视图。

根据本公开实施例的第三方面，提供了一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器;

其中，所述处理器被配置为执行所述指令，以实现第一方面所述的列表处理方法。

根据本公开实施例的第四方面，提供了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如第一方面所述的列表处理方法。

根据本公开实施例的第五方面，提供了一种计算机程序产品，当其在计算机上运行时，使得计算机实现如第一方面所述的列表处理方法。

本公开实施例提供的技术方案，获取用于创建目标列表的数据源；拦截处理目标列表的目标操作，并创建目标列表对应的影子树；按照影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图；获取所创建的每一视图对应的视图内容；将视图内容渲染到对应的视图中，得到目标列表。

可见，通过本公开实施例提供的技术方案，通过拦截处理目标列表的目标操作，按照影子树所包括的叶子节点的节点顺序，创建目标列表所包括的多个视图，并通过将每一视图对应的视图内容渲染到该视图中，这样，即保证了创建视图的过程是有顺序性的，渲染视图的过程也是顺序性的，进而保证了创建视图和渲染视图均有序进行，目标列表的列表内容不会出错。

附图说明

图1是根据一示例性实施例示出的一种列表处理方法的流程图；

图2是根据一示例性实施例示出的另一种列表处理方法的流程图；

图3是图1中S130的一种实施方式的流程图；

图4是根据一示例性实施例示出的另一种列表处理方法的流程图；

图5是根据一示例性实施例示出的一种列表处理装置的框图；

图6是根据一示例性实施例示出的另一种列表处理装置的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在跨平台业务中，目前RN平台下，最常见、被最频繁使用的场景就是列表场景。在列表场景中，在长列表接入业务后，由于创建和渲染长列表中多个行的随机性，可能导致渲染异常。

具体的，长列表有很多行，每一行对应一个视图，相关技术中，创建长列表中多行对应的视图是批量的，且顺序是随机的。

举例而言，长列表包括10个视图，可能批量创建三个视图，批量创建三个视图的方式可能有以下几种：

第一种方式中，批量创建的三个视图分别为：第一个视图，第三个视图以及第五个视图。

第二种方式中，批量创建的三个视图分别为：第二个视图，第四个视图以及第六个视图。

第三种方式中，批量创建的三个视图可能还不是正序的。例如，批量创建的三个视图，分别为：第五个视图，第三个视图以及第二个视图。

相关技术中，由于创建长列表中多行对应的视图是批量的，且随机的；导致渲染多个视图的时候，可能会出现渲染异常，从而导致列表内容异常。

为了解决相关技术中存在的技术问题，本公开实施例提供了一种列表处理方法、装置、电子设备及存储介质。

需要说明的是，本公开实施例提供的列表处理过程涉及到三个线程分别为JS线程、RN核心线程和UI线程。

为了方案描述清楚，首先对JS线程、RN 核心线程和UI线程的交互过程进行阐述。

JS线程是触发层，JS线程接收到创建列表的数据源时，将数据源发送给RN核心线程。

RN核心线程接收到数据源后，对处理列表的常规操作进行拦截，其中，处理列表的常规操作可以包括列表视图创建操作、列表视图内容更新操作，以及，对已创建的影子树执行叶子节点的插入操作或者删除操作等。

在RN核心线程对处理列表的常规操作执行拦截后，可以根据数据源创建影子树，该影子树中包括多个叶子节点，叶子节点的节点信息为该叶子节点对应视图的视图信息，该视图信息可以是图片大小，位置，标题，副标题等等，在实际应用中，对于不同的业务内容，视图信息是不一样的，本公开实施例对此不做具体限定。

在RN核心线程创建完影子树后，UI线程按照影子树的叶子节点的顺序创建UI视图，并且在创建UI视图的同时，根据已经创建好的影子树中叶子节点的视图信息，再创建RN视图，其中，RN视图为UI视图对应行的实际展示样式。也就是说，UI视图是展示RN视图的载体，RN视图是UI视图的视图内容。在创建列表的多个UI视图和RN视图后，对于每一UI视图，将该UI视图对应的RN视图添加到该UI视图中，即将每一UI视图对应的视图内容渲染到该UI视图中。

可见，通过本公开实施例提供的技术方案，按照顺序创建列表所包括的多个UI视图，通过将每一UI视图对应的RN视图渲染到该UI视图中，保证了UI视图的渲染过程也是顺序性的，从而渲染不会出错，列表内容不会出错。

下面将对本公开实施例提供的一种列表处理方法进行详细介绍。

本公开实施例提供的一种列表处理方法的执行主体可以为运行有上述三个线程的电子设备。

如图1所示，本公开实施例提供的一种列表处理方法，可以包括如下步骤：

S110，获取用于创建目标列表的数据源。

其中，目标列表包括多个行，每一行对应一个视图，数据源包括每一视图的视图信息。

具体的，目标列表可以为任一待创建的长列表。长列表通常包括很多行，每一行对应一个视图，每个视图中还可以包括多个子视图，数据源可以包括每一行的视图信息，即每一行要展示的内容，例如，可以为头像，主标题，副标题，图片等等。

JS线程接收到创建列表的数据源时，将数据源发送给RN核心线程，从而RN核心线程可以获取到用于创建目标列表的数据源。

S120，拦截处理目标列表的目标操作，并创建目标列表对应的影子树。

其中，目标操作包括对多个行对应视图的创建操作；影子树包括多个叶子节点；每个叶子节点对应目标列表的一个视图，一个叶子节点的节点信息为该叶子节点对应视图的视图信息。

具体的，由于相关技术中创建和渲染长列表的多个行是随机的，可能导致长列表渲染异常，因此，为了避免长列表渲染异常，RN核心线程首先需要对处理目标列表的目标操作进行拦截，其中，处理列表的目标操作可以包括列表视图创建操作、列表视图内容更新操作，以及，对已创建的影子树执行叶子节点的插入操作或者删除操作等。

并且，RN核心线程基于数据源中包括的长列表的视图的视图信息，来创建目标列表对应的影子树，该影子树包括多个叶子节点，每一个叶子节点对应长列表的一个视图，即长列表的一个行。例如，长列表包括20行，那么，叶子节点可以为20个；且一个叶子节点的节点信息为该叶子节点对应视图的视图信息，视图信息可以包括图片位置、大小，主标题、副标题等内容。

S130，按照影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图。

具体的，在创建好影子树后，UI线程可以按照影子树所包括的叶子节点的节点顺序，来创建叶子节点对应的视图，其中，叶子节点对应的视图为上述实施例中的UI视图，每一个视图对应长列表的一行，后续步骤中，对于每一视图，需要将对应的视图内容渲染到视图中，以得到长列表。

并且，在实际应用中，目标列表的行数通常较多，目标列表的多个行可能通过多个视图页面进行展示，此时，为了减少因频繁创建视图而带来的性能消耗，以及，视图页面能够快速展示目标列表。在一种实施方式中，如图2所示，该列表处理方法还可以包括如下步骤：

S130a，响应于展示首个视图页面的目标行，按照影子树所包括的叶子节点的节点顺序，创建目标数量个叶子节点对应的视图。

其中，目标行可以为第一个视图页面所能展示的多个行，目标数量为单个视图页面所能展示的目标列表的行数量。

具体的，在需要展示首个视图页面的多个行时，可以按照已创建的影子树的叶子节点的节点顺序，来创建目标数量个叶子节点对应的视图。

举例而言，首个视图页面所能展示10个行，那么，按照已创建的影子树的叶子节点的节点顺序，可以创建前10个叶子节点对应的视图。

S130b，将所创建的目标数量个视图缓存于第二缓存池中，并将目标数量个视图依次确定为首个视图页面对应的叶子节点的视图。

具体的，在创建好目标数量个视图后，可以将目标数量个视图依次确定为首个视图页面对应的叶子节点的视图。并且，可以将所创建的目标数量个视图缓存到缓存池中，为了方案描述清楚，可以将该缓存池称为第二缓存池，这样，当除首个视图页面之外的其他视图页面需要展示视图时，可以从第二缓存池中直接获取目标数量个视图，而不需要重复创建视图，进而可以减少因频繁创建视图而带来的性能消耗，并且，其他视图页面能够快速展示目标列表的多个行。

由上述描述可知，目标列表的多个行可以通过两个或者两个以上的视图页面来分页展示目标列表的多个行，此时，S130，按照影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图，如图3所示，可以包括两个步骤：

S131，响应于展示当前视图页面的目标行，且当前视图页面不属于至少两个视图页面中的首个视图页面，从第二缓存池中获取已缓存的目标数量个视图。

其中，目标数量为单个视图页面所能展示的目标列表的行数量。

具体的，由于当前视图页面不是首个视图页面，为了减少因频繁创建视图而带来的性能消耗，以及，快速地在当前视图页面展示目标列表的多个行，在需要在当前视图页面展示目标列表的多个行时，可以直接从第二缓存池中获取目标数量个视图。也就是说，直接复用展示首个视图页面的目标行时，所创建的目标数量个视图。

S132，按照当前视图页面的目标行对应的叶子节点的节点顺序，将目标数量个视图依次确定为当前视图页面对应的叶子节点的视图。

在从第二缓存池中获取到目标数量个视图后，可以按照当前视图页面的目标行对应的叶子节点的节点顺序，将目标数量个视图依次确定为当前视图页面对应的叶子节点的视图。

举例而言，目标列表包括100行，每个视图页面只能展示10行，那么，需要10个视图页面来展示目标列表。在展示首个视图页面时，可以按照影子树所包括的叶子节点的节点顺序，创建10个叶子节点对应的视图，并将所创建的10个视图缓存于第二缓存池中，当需要展示其它9个视图页面中任一视图页面的10个行时，可以从第二缓存池中获取已经缓存的10个视图，而不需要重新创建视图。

可见，在除首个视图页面之外的其他视图页面需要展示视图时，可以从第二缓存池中直接获取目标数量个视图，而不需要重复创建视图，进而可以减少因频繁创建视图而带来的性能消耗，并且，其他视图页面能够快速展示目标列表的多个行。

S140，获取所创建的每一视图对应的视图内容。

其中，每一视图的视图内容是基于该视图对应叶子节点的节点信息创建的。

具体的，影子树所包括的叶子节点均有对应的视图信息，对于影子树所包括的每一叶子节点，可以根据该叶子节点的视图信息如主标题，副标题，头像，图像大小以及位置等视图信息，来创建与叶子节点对应的RN视图，

其中，对于一个叶子节点来说，基于该叶子节点的视图信息创建的RN视图为该叶子节点对应视图的实际展示样式，因此，基于该叶子节点的视图信息创建的RN视图为该叶子节点对应视图的视图内容。

S150，将视图内容渲染到对应的视图中，得到目标列表。

由上述步骤描述可知，每一个视图均对应一个视图内容，该视图内容为一个RN视图，因此，在获取到所创建的每一视图对应的视图内容后，对于每一视图，通过将该视图对应的视图内容即RN视图渲染到该视图中，即可得到目标列表。

在图1所述实施例的基础上，在一种实施方式中，为了快速地展示视图的视图内容，在获取所创建的每一视图对应的视图内容之前，该列表处理方法还可以包括如下两个步骤，分别为步骤a1和步骤a2：

步骤a1，基于多个叶子节点中目标叶子节点对应视图的视图信息，创建目标叶子节点对应视图的视图内容。

步骤a2，将目标叶子节点对应视图的视图内容缓存于第一缓存池中。

具体的，目标叶子节点可以为多个叶子节点中的任一叶子节点，可以基于多个叶子节点中目标叶子节点对应视图的视图信息，来创建目标叶子节点的RN视图，并将所创建的RN视图确定为目标叶子节点对应视图的视图内容。其中，RN视图为目标叶子节点对应行的实际展示样式。

并且，在创建好目标叶子节点对应视图的视图内容后，可以将目标叶子节点对应视图的视图内容缓存于第一缓存池中。

这样，在需要获取所创建的任一视图对应的视图内容时，可以先从第一缓存池中查找是否存在该视图对应的视图内容，如果第一缓存池中存在该视图对应的视图内容，则直接获取到该视图对应的视图内容，从而有助于快速地展示视图的视图内容。

在上述实施例的基础上，在一种实施方式中，获取所创建的每一视图对应的视图内容，可以包括如下步骤：

步骤b1，对于所创建的每一视图，在第一缓存池中查找是否存在该视图对应的视图内容。

步骤b2，当第一缓存池中存在该视图对应的视图内容时，从第一缓存池中获取该视图对应的视图内容。

具体的，在该实施方式中，可以将已创建的视图内容缓存于第一缓存池中。对于所创建的每一视图，在渲染该视图时，可以首先判断第一缓存池中是否缓存有该视图对应的视图内容，即判断第一缓存池中是否缓存有该视图对应的RN视图。

在实际应用中，一个RN视图还可以包括多个RN子视图，因此，在判断第一缓存池中是否缓存有该视图对应的RN视图时，需要严格判断第一缓存池中的RN视图所包括的多个RN子视图，是否为该视图对应的RN视图所包括的多个RN子视图，如果第一缓存池中的某一RN视图所包括的多个RN子视图是该视图对应的RN视图所包括的多个RN子视图，那么，判定该RN视图为该视图对应的RN视图，即在第一缓存池中查找到该视图对应的视图内容。

如果第一缓存池中缓存有该视图对应的视图内容，则可以直接从第一缓存池中获取该视图对应的视图内容，后续可以将所获取的该视图内容渲染到该视图中。

可见，在该实施方式中，通过将已创建的视图内容缓存于第一缓存池中，在对目标列表的视图进行渲染时，当第一缓存池中缓存中该视图对应的视图内容时，可以直接从第一缓存池中获取该视图对应的视图内容，而不需要临时创建视图内容，提高了视图渲染效率。

在上述实施例的基础上，在一种实施方式中，该列表处理方法还可以包括：

步骤c，当第一缓存池中不存在该视图对应的视图内容时，基于该视图对应的叶子节点的视图信息创建该视图的视图内容。

具体的，对于每一视图，在渲染该视图时，可以首先判断第一缓存池中是否缓存有该视图对应的视图内容，即判断第一缓存池中是否缓存有该视图对应的RN视图，如果第一缓存池中不存在该视图对应的RN视图，则说明第一缓存池中没有缓存该视图对应的视图内容。为了准确地将该视图对应的视图内容渲染到该视图中，可以根据该视图对应的叶子节点的视图信息来创建RN视图，并将所创建的RN视图确定为该视图的视图内容，后续可以将所创建的RN视图添加到该视图中，从而实现了准确渲染该视图。

可见，通过本实施方式提供的技术方案，对于一个视图，在对目标列表的视图进行渲染时，当第一缓存池中没有缓存该视图对应的视图内容时，可以根据该视图对应的叶子节点的视图信息创建该视图的视图内容，后续通过将所创建的视图内容添加到该视图中，可以实现准确渲染该视图。

在上述实施例的基础上，如图4所示，该列表处理方法还可以包括如下步骤：

S410，获取更新后的数据源。

其中，更新后的数据源包括更新后的目标列表的视图的视图信息。

具体的，实际应用中，根据业务需求，可能会对目标列表的视图进行删除、插入或者修改内容等操作，此时，JS线程接收到用于创建更新后的目标列表的数据源时，并将数据源发送给UIManager。

S420，拦截处理更新后的目标列表的目标操作，并基于更新后的数据源更新影子树，得到更新后的影子树。

UIManager接收到更新后的数据源后，对列表的常规操作进行拦截，该常规操作可以包括目标列表的视图创建操作、目标列表的视图内容更新操作，以及，对已创建的影子树执行叶子节点的插入操作或者删除操作等。

在对目标列表的常规操作进行拦截后，可以根据更新后的数据源创建更新后的影子树，该更新后的影子树中包括多个叶子节点，叶子节点的节点信息为该叶子节点对应视图的视图信息，该视图信息可以是图片大小，位置，标题，副标题等等，在实际应用中，对于不同的业务内容，视图信息是不一样的，本公开实施例对此不做具体限定。

S430，基于更新后的影子树所包括的叶子节点的视图信息，以及，更新前的影子树所包括的叶子节点的视图信息，确定发生变更的变更叶子节点。

在UIManager创建更新后的影子树时，原生组件可以监听到影子树发生变化，并基于更新后的影子树所包括的叶子节点的视图信息，以及，更新前的影子树所包括的叶子节点的视图信息，确定发生变更的变更叶子节点。也就是说，确定哪些叶子节点发生了变化。

S440，获取变更叶子节点对应的视图内容，并将变更叶子节点对应的视图内容渲染到目标列表对应的视图中，得到更新后的目标列表。

具体的，UI线程可以对目标列表的视图的视图内容进行全量刷新。由于变更叶子节点为发生变更的节点，因此，需要将变更叶子节点对应的视图内容渲染到变更叶子节点对应的视图中，得到更新后的目标列表。

举例而言，更新后的数据源为在目标列表中增加了10行的数据。此时，更新后的影子树增加了10个叶子节点，长列表会再增加10个视图，并分别将对应的视图内容渲染到所增加的10个视图中。

可见，在该实施方式中，在数据源发生变化时，对目标列表的目标操作进行拦截，并更新影子树，对发生变更的目标叶子节点，可以更新其对应的视图的视图内容，进而实现了准确地更新目标列表。

并且，在一种实施方式中，获取变更叶子节点对应的视图内容，可以包括如下步骤：

当第一缓存池中不存在变更叶子节点对应的视图内容时，基于变更叶子节点的视图信息，创建变更叶子节点对应的视图内容。

具体的，在获取表更叶子节点对应的视图内容时，可以首先判断第一缓存池中是否缓存有变更叶子节点对应视图的视图内容，即判断第一缓存池中是否缓存有变更叶子节点对应视图对应的RN视图。

如果第一缓存池中缓存有变更叶子节点对应的视图内容时，则可以直接从第一缓存池中获取变更叶子节点对应的视图内容；如果第一缓存池中没有缓存有变更叶子节点对应的视图内容时，则可以基于变更叶子节点的视图信息，创建变更叶子节点对应的视图内容。

可见，通过本实施方式提供的技术方案，在对变更叶子节点对应视图进行渲染时，当第一缓存池中没有缓存该变更叶子节点对应视图的视图内容，可以根据该变更叶子节点对应视图的视图信息，创建该变更叶子节点对应视图的视图内容，后续通过将所创建的视图内容添加到该变更叶子节点对应视图的视图内容中，可以实现准确渲染该变更叶子节点对应的视图。

在上述实施例的基础上，在一种实时方式中，该列表处理方法还可以包括如下步骤，分别为步骤d1至步骤d3：

步骤d1，在创建每一叶子节点对应的视图时，从影子树中查找该叶子节点的视图信息。

步骤d2，基于所查找到的视图信息中的属性，确定视图的宽度和高度。

其中，属性信息包括视图的大小。

步骤d3，创建具有宽度和高度的视图。

为了使得目标列表的每个视图能够正常展示视图内容，在本实施方式中，在创建每一叶子节点对应的视图时，从影子树中查找该叶子节点的视图信息，该属性信息包括视图的大小，视图的大小可以是视图的宽度和高度，因此，在查找到视图信息中的属性信息后，可以确定视图的宽度和高度。进而在将视图内容渲染到对应的视图时，视图内容能够正常显示在对应的视图中，而不会因视图的宽度以及高度较小，而出现视图内容显示出错的问题，从而导致视图渲染出错。

而相关技术中，创建视图和将视图内容渲染到视图是异步的过程。举例而言，视图的宽度通常是固定的，假设视图的高度为10，而对应的视图内容较多，例如，需要高度为20的视图才能正常展示，此时，会出现视图渲染异常。

可见，通过视图信息中的属性信息来确定对应视图的宽度和高度，可以使得视图内容能够正常显示在对应的视图中，进而视图渲染有序进行，即保证视图渲染不会出错。

根据本公开实施例的第二方面，提供了一种列表处理装置，如图5所示，包括：

数据源获取模块510，被配置为执行获取用于创建目标列表的数据源；所述目标列表包括多个行，每一行对应一个视图，所述数据源包括每一视图的视图信息；

操作拦截模块520，被配置为执行拦截处理所述目标列表的目标操作，并创建所述目标列表对应的影子树；所述目标操作包括对所述多个行对应视图的创建操作；所述影子树包括多个叶子节点；每个叶子节点对应所述目标列表的一个视图，一个叶子节点的节点信息为该叶子节点对应视图的视图信息；

视图创建模块530，被配置为执行按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图；

视图内容获取模块540，被配置为执行获取所创建的每一视图对应的视图内容；每一视图的视图内容是基于该视图对应叶子节点的节点信息创建的；

视图渲染模块550，被配置为执行将所述视图内容渲染到对应的视图中，得到所述目标列表。

可选的，还包括：

可选的，所述视图内容获取模块，具体被配置为执行：

可选的，所述视图内容获取模块，还具体被配置为执行：

可选的，还包括：

可选的，所述视图内容获取模块，还具体被配置为执行：

可选的，所述视图创建模块，具体被配置为执行：

创建具有所述宽度和高度的视图。

可选的，还包括：

图6是根据一示例性实施例示出的一种装置600的框图。例如，装置600可以被提供为一服务器。参照图6，装置600包括处理组件622，其进一步包括一个或多个处理器，以及由存储器632所代表的存储器资源，用于存储可由处理组件622的执行的指令，例如应用程序。存储器632中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件622被配置为执行指令，以执行第一方面所述的方法。

装置600还可以包括一个电源组件626被配置为执行装置600的电源管理，一个有线或无线网络接口660被配置为将装置600连接到网络，和一个输入输出（I/O）接口658。装置600可以操作基于存储在存储器632的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM, LinuxTM，FreeBSDTM或类似。

处理器；

用于存储所述处理器可执行指令的存储器;

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims

1.一种列表处理方法，其特征在于，包括：

按照所述影子树所包括的叶子节点的节点顺序，将所述视图内容渲染到对应的视图中，得到所述目标列表；

所述目标列表的所述多个行通过至少两个视图页面分页展示，所述按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图，包括：

响应于展示首个视图页面的目标行，按照所述影子树所包括的叶子节点的节点顺序，创建目标数量个叶子节点对应的视图；所述目标数量为单个视图页面所能展示的所述目标列表的行数量；

将所创建的所述目标数量个视图缓存于第二缓存池中，并将所述目标数量个视图依次确定为所述首个视图页面对应的叶子节点的视图；

响应于展示当前视图页面的目标行，且所述当前视图页面不属于所述至少两个视图页面中的首个视图页面，从所述第二缓存池中获取已缓存的所述目标数量个视图；

2.根据权利要求1所述的方法，其特征在于，所述获取所创建的每一视图对应的视图内容之前，还包括：

3.根据权利要求2所述的方法，其特征在于，所述获取所创建的每一视图对应的视图内容，包括：

4.根据权利要求3所述的方法，其特征在于，还包括：

5.根据权利要求2至4任一项所述的方法，其特征在于，还包括：

6.根据权利要求5所述的方法，其特征在于，所述获取所述变更叶子节点对应的视图内容，包括：

7.根据权利要求1至4任一项所述的方法，其特征在于，所述按照所述影子树所包括的叶子节点的节点顺序，创建叶子节点对应的视图，包括：

创建具有所述宽度和高度的视图。

8.一种列表处理装置，其特征在于，包括：

视图渲染模块，被配置为按照所述影子树所包括的叶子节点的节点顺序，执行将所述视图内容渲染到对应的视图中，得到所述目标列表；

所述目标列表的所述多个行通过至少两个视图页面分页展示，所述视图创建模块，具体被配置为执行：

按照所述当前视图页面的目标行对应的叶子节点的节点顺序，将所述目标数量个视图依次确定为所述当前视图页面对应的叶子节点的视图；

所述视图内容缓存模块，还被配置为执行将所创建的所述目标数量个视图缓存于所述第二缓存池中，并将所述目标数量个视图依次确定为所述首个视图页面对应的叶子节点的视图。

9.根据权利要求8所述的装置，其特征在于，还包括：

10.根据权利要求9所述的装置，其特征在于，所述视图内容获取模块，具体被配置为执行：

11.根据权利要求10所述的装置，其特征在于，所述视图内容获取模块，还具体被配置为执行：

12.根据权利要求9至11任一项所述的装置，其特征在于，还包括：

13.根据权利要求12所述的装置，其特征在于，所述视图内容获取模块，还具体被配置为执行：

14.根据权利要求8至11任一项所述的装置，其特征在于，所述视图创建模块，具体被配置为执行：

创建具有所述宽度和高度的视图。

15.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器;

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7任一项所述的列表处理方法。

16.一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至7任一项所述的列表处理方法。