React 长列表性能优化 -- react-window

React 长列表性能优化 – react-window

假如有一天，你遇到一个非常变态的需求或者一个不会分页的后端 – 前端拿到 1W+条数据时，你会怎么做？浏览器性能是有限的的，把 1w+条数据渲染到页面，非常容易造成页面卡顿，导致用户体验不佳。🤷‍♀️

01 常见的解决方案

1.懒加载

方式：通过监听列表的滚动，每当用户滚动到列表底部的时候，进行加载后面的数据追加渲染到 DOM 上。

缺点：当用户一直向下划，页面依然会产生大量 DOM 元素，占用内存过多，导致页面卡顿。

2.虚拟列表

方式：其核心思路，渲染长列表时，每次只渲染可视区域的列表数。

02 虚拟列表技术

常见虚拟列表技术 react-window 和 react-virtualized ，有什么不同呢?

这两个库都出自一个作者，react-window 是对 react-virtualized 的重写，至于为啥重写呢？作者给出的解释是，react-virtualized 考虑情况太多，增加了太多的非基本功能和组件。删除这些功能会导致之前使用的开发者痛苦面具 🤯，所以就重写了。

react-window 更加关注 smaller1 and faster。

03 react-window 尝试

Here’s a CodeSandbox

上面这块是比较基本的使用，我打算参考 react-window 的原理，去实现这个需求。

今天暂时还没研究透，明天实践下再进行补充。