react中实现瀑布流虚拟列表

香辣鱼干

已于 2024-05-25 16:41:10 修改

阅读量746

点赞数 9

分类专栏： React 18 文章标签： react.js 前端 javascript

于 2024-04-28 14:09:16 首次发布

本文链接：https://blog.youkuaiyun.com/qiaolezi787/article/details/138275744

版权

通常在瀑布流中每次拉取下一页数据需要渲染大量数据的时候是非常耗时，会出现卡顿的现象。随着拉取的数据越来越多，列表渲染时间长、卡顿的问题越来越严重。

这个时候虚拟列表就派上用场了。虚拟列表的实现原理简单来说，就是列表并不会把所有的数据都渲染出来，而是通过监听滚动事件然后实时计算当前是哪几条数据显示在页面上，然后只渲染用户可以看见的这几条数据

效果截图：

可以看到，我生成了60个元素，但初始化渲染的时候容器只渲染了可看见的20个元素。那么我们在滚动一下滚动条看看效果。

滚动条处于在容器的中间的位置，我再次重新获取了父容器 children元素后，结果还是之渲染20个元素。虚拟列表效果是不是就实现了。

话不多说，直接给展示全部代码，里面有备注代码讲解！。可以直接复制粘贴到html文件中，方便你们预览效果。

以下是全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入React -->
    <script crossorigin src="https