一文搞懂长列表优化和虚拟滚动

写在前面

还 ⭐ 的基于 react-hooks 和 react-virtualized 写的虚拟滚动搭配上拉下滑加载的 scroll 组件

🌟🌟 https://github.com/DavidWong9785/react-virtualized-scroll 🌟🌟

写出来的小玩意可能不是特别完美，如果能给大🔥们提供到思路或者帮助，实在不胜荣幸

也希望大🔥们给个 star 啦~

antd中的list-view

相信用过 antd-mobile 的小伙伴都知道里面的 ListView 组件
组件还算是能满足很多需要的
但遇到数据量大时可能就不太够用了
而且一些不熟悉 useMemo 的小伙伴对于 ListView 的优化可能会不知所措
所以我就封装了一个不需要自己优化 renderRow，又能做到虚拟滚动，又能满足 ListView 基本需要的组件
接下来就一步步拆解，如何实现这个组件😈

什么是虚拟滚动

1. 背景<br>
    当遇到数据量大的列表渲染，如10万条数据，一次性渲染十万个元素，内存消耗肯定是裂开的<br>
    这时候考虑怎么展示完列表，又能优化性能提升体验 —— 虚拟滚动
2. 效果描述<br>
    创建一个容器，容器内部展示固定数量的