本发明涉及数据处理，尤其涉及一种react中table滚动分页方法、装置及电子设备。
背景技术：
：：1、为了解决数据量过大导致页面卡顿的问题，大型公司通常采用分页的方式，以提高页面性能，目前table表格分页加载数据都是采用options实现，在table表格下方添加点击切换下一页功能。2、原生的table组件通常不支持分页或滚动加载更多数据的功能，table的options中，分页功能存在一个问题，无法保留上一页的数据，这导致用户无法同时查看上一页和本页的数据，需要进一步改进这一点。3、由于不同项目的需求各异，有时无法直接使用大公司提供的封装模块或者依赖原生开发来满足特定需求。table滚动加载数据过多导致页面卡顿是一个常见的性能问题，特别是在处理大量数据时，这种问题通常是因为浏览器需要在页面上渲染大量的dom元素和处理大量的数据而导致的。4、上述问题成为需要解决的技术问题。技术实现思路1、有鉴于此，本发明实施例提供一种react中table滚动分页方法、装置及电子设备，至少部分解决现有技术中存在的问题。2、第一方面，本发明实施例提供了一种react中table滚动分页方法，包括：3、选择使用react作为前端框架组件创建，创建所需的react组件，所述react组件包括页面组件和子组件；4、使用react的usestate钩子来管理组件内部的数据状态，在需要存储和更新数据的地方，定义并初始化状态变量，然后使用usestate返回的状态和更新函数来实现数据管理；5、利用react的事件处理机制，监听和处理页面滚动事件，通过添加滚动事件监听器，实时获取页面滚动的滚动位置和滚动速度信息；6、当页面滚动的滚动位置和滚动速度信息满足分页条件时，使用react的useeffect钩子加载分页所需要的数据，在数据获取完成后，使用usestate来更新react组件的数据状态；7、利用react的组件渲染机制，将获取的数据按照预设的分页顺序动态展示在多个页面上，当需要表格展示数据时，使用antd中的table组件进行数据展示。8、根据本公开实施例的一种具体实现方式，所述使用react的useeffect钩子加载分页所需要的数据，包括：9、采用数据缓存和懒加载方式，减轻页面负担和提高加载速度。10、根据本公开实施例的一种具体实现方式，所述方法还包括：11、当数据为空时，在界面上展示相应的提示。12、根据本公开实施例的一种具体实现方式，所述方法还包括：13、判断用户执行的操作是否需要重新加载数据；14、如果是，通过触发接口请求或重新调用数据获取的逻辑执行数据重新加载操作。15、根据本公开实施例的一种具体实现方式，所述方法还包括：16、接收上层组件传递的主页数据，实现数据的传递和利用；17、对所述主页数据进行拦截之后，进行数据存储、清洗，并计算页面可视范围内的展示数据量。18、根据本公开实施例的一种具体实现方式，所述方法还包括：19、当用户执行下拉加载更多操作时，检查存储数据是否还有更多待展示数据；20、若存在更多待展示数据，则重新进行数据展示；21、若不存在没有更多数据，则发起接口请求；22、如果接口返回了数据，就重新进行数据录入；23、如果接口没有可用数据，则针对react中table滚动分页渲染完成。24、根据本公开实施例的一种具体实现方式，所述将获取的数据按照预设的分页顺序动态展示在多个页面上，包括：25、对在多个页面上待展示的内容进行分词处理，得到数据元素集合；26、计算数据元素集合中数据元素的邻域值：27、28、其中，n为数据元素的数量，表示数据元素集合中的第i个数据元素，表示数据元素的邻域值，表示邻域值调节参数，表示数据元素和数据元素之间的距离。29、根据本公开实施例的一种具体实现方式，所述将获取的数据按照预设的分页顺序动态展示在多个页面上，还包括：30、计算数据元素集合中的数据元素的排序值：31、32、基于数据元素的排序值，对数据元素集合进行降序排列，并将降序排列后的数据元素集合分别展示在多个页面上，为相似度调节参数。33、第二方面，本发明实施例提供了一种react中table滚动分页装置，包括：34、创建模块，用于选择使用react作为前端框架组件创建，创建所需的react组件，所述react组件包括页面组件和子组件；35、定义模块，用于使用react的usestate钩子来管理组件内部的数据状态，在需要存储和更新数据的地方，定义并初始化状态变量，然后使用usestate返回的状态和更新函数来实现数据管理；36、获取模块，用于利用react的事件处理机制，监听和处理页面滚动事件，通过添加滚动事件监听器，实时获取页面滚动的滚动位置和滚动速度信息；37、更新模块，用于当页面滚动的滚动位置和滚动速度信息满足分页条件时，使用react的useeffect钩子加载分页所需要的数据，在数据获取完成后，使用usestate来更新react组件的数据状态；38、展示模块，用于利用react的组件渲染机制，将获取的数据动态展示在页面上，当需要表格展示数据时，使用antd中的table组件进行数据展示。39、第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：40、至少一个处理器；以及，41、与该至少一个处理器通信连接的存储器；其中，42、该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的react中table滚动分页方法。43、第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的react中table滚动分页方法。44、第五方面，本发明实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的react中table滚动分页方法。45、本发明实施例中的react中table滚动分页方案，包括：选择使用react作为前端框架组件创建，创建所需的react组件，所述react组件包括页面组件和子组件；使用react的usestate钩子来管理组件内部的数据状态，在需要存储和更新数据的地方，定义并初始化状态变量，然后使用usestate返回的状态和更新函数来实现数据管理；利用react的事件处理机制，监听和处理页面滚动事件，通过添加滚动事件监听器，实时获取页面滚动的滚动位置和滚动速度信息；当页面滚动的滚动位置和滚动速度信息满足分页条件时，使用react的useeffect钩子加载分页所需要的数据，在数据获取完成后，使用usestate来更新react组件的数据状态；利用react的组件渲染机制，将获取的数据按照预设的分页顺序动态展示在多个页面上，当需要表格展示数据时，使用antd中的table组件进行数据展示。本技术的方案采用了react作为前端框架，充分利用usestate来高效管理数据和页面滚动信息，同时运用useeffect来在组件加载时获取所需数据，以提高系统的性能和用户体验。当前第1页12当前第1页12