渲染十万条数据的方法之分批渲染

2024-08-28 23:36

本文主要是介绍渲染十万条数据的方法之分批渲染,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:前端渲染海量数据列表的情况可能不多,因为很多列表都采用了分页,但是在读写Excel表数据这种情况下,处理海量数据还是有可能会用到。渲染十万条数据,可以体现前端开发同学处理高性能渲染的能力,也是面试常常问到的问题。

对于一次性插入大量数据的情况,一般有两种做法:

  • 分批渲染
  • 虚拟列表

本次对使用 分批渲染 的方式进行实现

分批渲染

React代码实现

  • requestAnimationFrame 是一个浏览器提供的 API,用于在下一次重绘之前执行回调函数。它通常用于优化动画和其他需要高频率更新的操作
  • generateUniqueKey 可以生成唯一key,使 diff 算法高效,原理参考: js生成唯一标识符(例如key或者id)
  • 由于结合动画帧进行递归分批渲染,数据量大,会处理比较长的时间,所以不要忘记处理内存泄漏,在页面卸载的时候用一个开关去跳出可能尚存的递归
import { useCallback, useEffect, useRef, useState } from "react";interface DataItem {key?: string;slogan: string;bgColor: string;
}/*** 生成唯一 key,这里使用时间戳 + 随机数* 你也可以引入第三方库,如 uuid 或 nanoid,但这里为了减少依赖,直接使用 JS 生成* @returns*/
const generateUniqueKey = () => {return `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;
};const DATA_LIST = [{ slogan: "我爱学友", bgColor: "green" },{ slogan: "我爱德华", bgColor: "blue" },{ slogan: "我爱黎明", bgColor: "red" },
];const BatchPage = () => {const [list, setList] = useState<DataItem[]>([]);// 用于组件卸载后,清除异步操作,防止内存泄漏const isUnmountedRef = useRef<boolean>(false);// 默认 batchSize = 100,即时间分片的每片为 100,每个动画帧渲染 100 条数据,可以根据实际情况调整const renderBatch = useCallback((restList: DataItem[], existingList: DataItem[], batchSize = 100) => {if (!Array.isArray(restList) ||!restList?.length ||isUnmountedRef.current)return;// splice 除了改变原始数组,还会返回删掉的数组const addList = restList.splice(0, batchSize);// requestAnimationFrame 是一个浏览器提供的 API,用于在下一次重绘之前执行回调函数。它通常用于优化动画和其他需要高频率更新的操作。requestAnimationFrame(() => {const newList = [...existingList, ...addList];setList(newList);renderBatch(restList, newList, batchSize);});},[]);const handleClick = useCallback(() => {const jsMakeDataStartTime = new Date().getTime();console.log("点击按钮时间戳-------->", jsMakeDataStartTime);const data: DataItem[] = [];// 模拟生成 10 万条数据for (let index = 0; index < 100000; index++) {const item = DATA_LIST[Math.floor(Math.random() * DATA_LIST.length)];data.push({key: generateUniqueKey(),...item,});}const jsMakeDataEndTime = new Date().getTime();console.log("JS生成数据时间戳------>", jsMakeDataEndTime);console.log("JS生成数据时间间隔---->",jsMakeDataEndTime - jsMakeDataStartTime);renderBatch(data, []);}, [renderBatch]);useEffect(() => {if (!!list?.length)console.log("数据变化时间戳和长度-->",new Date().getTime(),list?.length);}, [list]);useEffect(() => {isUnmountedRef.current = false;return () => {isUnmountedRef.current = true;};}, []);// 本应使用【className + 引入样式文件】的方式,但为了直观,这里直接使用style演示return (<divstyle={{width: "100vw",height: "100vh",display: "flex",flexDirection: "column",flexWrap: "nowrap",}}><buttonstyle={{ padding: "12px", color: "white", backgroundColor: "black" }}onClick={handleClick}>生成海量数据&渲染</button><div style={{ flex: "1", overflowY: "auto" }}>{Array.isArray(list) &&list.map((item) => {return (<divkey={item?.key}style={{backgroundColor: item?.bgColor,marginTop: "6px",color: "white",}}>{item?.slogan}</div>);})}</div></div>);
};export default BatchPage;

实际效果

在这里插入图片描述

这篇关于渲染十万条数据的方法之分批渲染的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1116203

相关文章

MySQL批量替换数据库字符集的实用方法(附详细代码)

《MySQL批量替换数据库字符集的实用方法(附详细代码)》当需要修改数据库编码和字符集时,通常需要对其下属的所有表及表中所有字段进行修改,下面:本文主要介绍MySQL批量替换数据库字符集的实用方法... 目录前言为什么要批量修改字符集?整体脚本脚本逻辑解析1. 设置目标参数2. 生成修改表默认字符集的语句3

Oracle Scheduler任务故障诊断方法实战指南

《OracleScheduler任务故障诊断方法实战指南》Oracle数据库作为企业级应用中最常用的关系型数据库管理系统之一,偶尔会遇到各种故障和问题,:本文主要介绍OracleSchedul... 目录前言一、故障场景:当定时任务突然“消失”二、基础环境诊断:搭建“全局视角”1. 数据库实例与PDB状态2

Java 单元测试之Mockito 模拟静态方法与私有方法最佳实践

《Java单元测试之Mockito模拟静态方法与私有方法最佳实践》本文将深入探讨如何使用Mockito来模拟静态方法和私有方法,结合大量实战代码示例,带你突破传统单元测试的边界,写出更彻底、更独立... 目录Mockito 简介:为什么选择它?环境准备模拟静态方法:打破“不可变”的枷锁传统困境解法一:使用M

python库pydantic数据验证和设置管理库的用途

《python库pydantic数据验证和设置管理库的用途》pydantic是一个用于数据验证和设置管理的Python库,它主要利用Python类型注解来定义数据模型的结构和验证规则,本文给大家介绍p... 目录主要特点和用途:Field数值验证参数总结pydantic 是一个让你能够 confidentl

使用Go调用第三方API的方法详解

《使用Go调用第三方API的方法详解》在现代应用开发中,调用第三方API是非常常见的场景,比如获取天气预报、翻译文本、发送短信等,Go作为一门高效并发的编程语言,拥有强大的标准库和丰富的第三方库,可以... 目录引言一、准备工作二、案例1:调用天气查询 API1. 注册并获取 API Key2. 代码实现3

JAVA实现亿级千万级数据顺序导出的示例代码

《JAVA实现亿级千万级数据顺序导出的示例代码》本文主要介绍了JAVA实现亿级千万级数据顺序导出的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 前提:主要考虑控制内存占用空间,避免出现同时导出,导致主程序OOM问题。实现思路:A.启用线程池

React 记忆缓存的三种方法实现

《React记忆缓存的三种方法实现》本文主要介绍了React记忆缓存的三种方法实现,包含React.memo、useMemo、useCallback,用于避免不必要的组件重渲染和计算,感兴趣的可以... 目录1. React.memo2. useMemo3. useCallback使用场景与注意事项在 Re

在Android中使用WebView在线查看PDF文件的方法示例

《在Android中使用WebView在线查看PDF文件的方法示例》在Android应用开发中,有时我们需要在客户端展示PDF文件,以便用户可以阅读或交互,:本文主要介绍在Android中使用We... 目录简介:1. WebView组件介绍2. 在androidManifest.XML中添加Interne

Java中字符编码问题的解决方法详解

《Java中字符编码问题的解决方法详解》在日常Java开发中,字符编码问题是一个非常常见却又特别容易踩坑的地方,这篇文章就带你一步一步看清楚字符编码的来龙去脉,并结合可运行的代码,看看如何在Java项... 目录前言背景:为什么会出现编码问题常见场景分析控制台输出乱码文件读写乱码数据库存取乱码解决方案统一使

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案:通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建