ReactNative组件构建复杂表格的优化方法和装置与流程

本发明涉及计算机的，尤其是涉及一种react native组件构建复杂表格的优化方法和装置。

背景技术：

1、金融行业中(例如，银行)，常常需要构建可竖直上下行滚动、水平左右列滚动并固定上侧行和左侧列的复杂表格。如，对于银行中的基金自选列表中，上侧行包括基金的一些属性标题(如：基金名称、净值、估值、添加后收益和添加时长、近一周等)，左侧列包括各基金具体的名称，在进行表格建立时，需要满足上侧行和左侧列固定不动，其它行可以竖直上下滚动，其它列可以水平左右滚动。

2、上述复杂表格，目前react native还无法直接支持，需要自定义布局实现。具体实现为：总体采用左右布局，左边布局固定列表，采用循环遍历数据；右边布局可水平滚动列(采用flatlist组件，设置水平属性)进行遍历，并在最外层嵌套可滚动的flatlist组件，主要进行上下滚动，并实现下拉至底部加载下一页操作，这样便实现了上下左右滚动并固定首列的布局。

3、由于react native对于复杂表格没有完整的实现解决方案，还需要自定义布局实现，而现有的flatlist组件或sectionlist组件都只能满足部分功能，且性能也不尽人意，随着数据增多会出现分页的加载数据卡顿，渲染缓慢。

4、即按照现有的自定义布局实现的react native组件构建的复杂表格在进行下拉加载第二页数据时，需要等待2-3秒去渲染现实数据，而且页数越大，数据越多，等待时间就越长，甚至出现手机发热、页面卡顿的情况。

5、综上，现有的react native组件构建的复杂表格存在加载数据卡顿、渲染数据迟钝的技术问题。

技术实现思路

1、有鉴于此，本发明的目的在于提供一种react native组件构建复杂表格的优化方法，以缓解现有的react native组件构建的复杂表格存在加载数据卡顿、渲染数据迟钝的技术问题。

2、第一方面，本发明实施例提供了一种react native组件构建复杂表格的优化方法，包括：

3、采用react.memo高阶函数对复杂表格的各组件进行遍历，以确定当前组件的前后两次的数据是否一致性，其中，所述react.memo高阶函数的入参包括：所述当前组件和对比函数，所述对比函数用于对所述当前组件的上一次的数据与当前次的数据进行对比；

4、若一致，则控制所述当前组件不更新渲染，并使用最近一次的渲染结果。

5、进一步的，若所述当前组件中的数据的属性为函数，所述方法还包括：

6、采用react.usecallback函数对所述当前组件中的前后两次的数据进行处理，得到处理后的数据；

7、采用react.memo高阶函数对复杂表格的所述当前组件的前后两次的处理后的数据进行一致性校验；

8、若一致，则控制所述当前组件不更新渲染，并使用最近一次的渲染结果。

9、进一步的，若所述当前组件中的数据的属性为对象，所述方法还包括：

10、采用react.usememo函数对所述当前组件中的前后两次的数据进行处理，得到处理后的数据；

11、采用react.memo高阶函数对复杂表格的所述当前组件的前后两次的处理后的数据进行一致性校验；

12、若一致，则控制所述当前组件不更新渲染，并使用最近一次的渲染结果。

13、进一步的，若所述当前组件中的数据为复杂耗时的函数，所述方法还包括：

14、采用react.usememo函数对所述当前组件中的数据的执行结果进行缓存。

15、进一步的，所述方法还包括：

16、采用mobx-react-lite的observer函数分别对每一组件的状态变量进行监听；

17、若监听得到目标组件的状态变量发生变化，则控制所述目标组件更新渲染。

18、进一步的，所述react.memo高阶函数为开源的高阶函数。

19、第二方面，本发明实施例还提供了一种react native组件构建复杂表格的优化装置，包括：

20、react.memo高阶函数遍历单元，用于采用react.memo高阶函数对复杂表格的各组件进行遍历，以确定当前组件的前后两次的数据是否一致性，其中，所述react.memo高阶函数的入参包括：所述当前组件和对比函数，所述对比函数用于对所述当前组件的上一次的数据与当前次的数据进行对比；

21、控制单元，用于若一致，则控制所述当前组件不更新渲染，并使用最近一次的渲染结果。

22、进一步的，若所述当前组件中的数据的属性为函数，所述装置还用于：

23、采用react.usecallback函数对所述当前组件中的前后两次的数据进行处理，得到处理后的数据；

24、采用react.memo高阶函数对复杂表格的所述当前组件的前后两次的处理后的数据进行一致性校验；

25、若一致，则控制所述当前组件不更新渲染，并使用最近一次的渲染结果。

26、第三方面，本发明实施例还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面任一项所述的方法的步骤。

27、第四方面，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有机器可运行指令，所述机器可运行指令在被处理器调用和运行时，所述机器可运行指令促使所述处理器运行上述第一方面任一项所述的方法。

28、在本发明实施例中，提供了一种react native组件构建复杂表格的优化方法，包括：采用react.memo高阶函数对复杂表格的各组件进行遍历，以确定当前组件的前后两次的数据是否一致性，其中，react.memo高阶函数的入参包括：当前组件和对比函数，对比函数用于对当前组件的上一次的数据与当前次的数据进行对比；若一致，则控制当前组件不更新渲染，并使用最近一次的渲染结果。通过上述描述可知，本发明的react native组件构建复杂表格的优化方法中，会采用react.memo高阶函数对复杂表格的各组件进行遍历，以确定当前组件的前后两次的数据是否一致性，若一致，则控制当前组件不更新渲染，并使用最近一次的渲染结果，也就是本发明的方法中，当当前组件的前后两次的数据一致时，直接使用当前组件最近一次的渲染结果，不再进行重新渲染，即只会渲染新进来的表格的数据项，减少了加载数据的数据量，提高了加载数据时的效率和流畅性，使得数据渲染更加快速，缓解了现有的react native组件构建的复杂表格存在加载数据卡顿、渲染数据迟钝的技术问题。

技术特征：

1.一种react native组件构建复杂表格的优化方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，若所述当前组件中的数据的属性为函数，所述方法还包括：

3.根据权利要求1所述的方法，其特征在于，若所述当前组件中的数据的属性为对象，所述方法还包括：

4.根据权利要求1所述的方法，其特征在于，若所述当前组件中的数据为复杂耗时的函数，所述方法还包括：

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

6.根据权利要求1所述的方法，其特征在于，所述react.memo高阶函数为开源的高阶函数。

7.一种react native组件构建复杂表格的优化装置，其特征在于，包括：

8.根据权利要求7所述的装置，其特征在于，若所述当前组件中的数据的属性为函数，所述装置还用于：

9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1至6中任一项所述的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有机器可运行指令，所述机器可运行指令在被处理器调用和运行时，所述机器可运行指令促使所述处理器运行上述权利要求1至6中任一项所述的方法。

技术总结
本发明提供了一种React Native组件构建复杂表格的优化方法和装置，该方法中，会采用React.memo高阶函数对复杂表格的各组件进行遍历，以确定当前组件的前后两次的数据是否一致性，若一致，则控制当前组件不更新渲染，并使用最近一次的渲染结果，也就是本发明的方法中，当当前组件的前后两次的数据一致时，直接使用当前组件最近一次的渲染结果，不再进行重新渲染，即只会渲染新进来的表格的数据项，减少了加载数据的数据量，提高了加载数据时的效率和流畅性，使得数据渲染更加快速。

技术研发人员：蒋红林,周伟,张炜权,张朝晖,万齐帅
受保护的技术使用者：平安银行股份有限公司
技术研发日：
技术公布日：2024/1/15