长列表优化之虚拟列表是一种非常巧妙的技巧，学习一下！

这几个月接了一个日志收集系统的活，因为这个系统是属于传承的项目，所以我也想在系统上做一些标志性的改动，作为接力棒传递下去。这个日志系统从前端到服务端，都做了不小的改动，比如虚拟列表，electron热更新，sql优化，增加了用户的概念，也就是需要登录，把数据库升级为ElasticSearch。最后的效果是我还是满意的，但是系统还有很多有待优化的空间，而本文要介绍的是我优化虚拟列表的经历和心得。

先说一下这个虚拟列表是如何优化的，一般来说，长列表优化有两种，一种是虚拟列表，一种是无限滚动。虚拟列表现在已经成为前端的主流方案，因为它具有更好的可控性，能有效减少内存消耗，提高滚动性能。我选择用React来实现虚拟列表，因为React的diff算法非常适合这种场景。而无限滚动是一种比较老的技术了，它简单易用，但有一定的局限性，比如无法控制滚动速度，容易导致页面卡顿。

具体来说，我是这样优化虚拟列表的。首先，我使用了React的useCallback和useMemo来优化虚拟列表的性能。这两个函数可以有效减少不必要的渲染，从而提高性能。

useCallback函数可以用来缓存一个函数，这样当这个函数的依赖项没有发生变化时，就不会重新创建这个函数。useMemo函数可以用来缓存一个值，这样当这个值依赖项没有发生变化时，就不会重新计算这个值。

使用这两个函数之后，虚拟列表的性能有了明显的提升。

优化虚拟列表的另一个方法是使用React的Windowing策略。Windowing策略可以将虚拟列表分成多个窗口，每个窗口只渲染一部分数据。这样可以减少内存消耗，提高滚动性能。

我使用的是固定大小的窗口，即每个窗口都包含相同数量的数据。这样可以使虚拟列表的滚动更加流畅。

优化虚拟列表的第三个方法是使用React的Concurrent Mode。Concurrent Mode可以使React同时渲染多个组件，从而提高渲染性能。

我使用的是React 18的Concurrent Mode，它比React 17的Concurrent Mode更加稳定。

使用Concurrent Mode之后，虚拟列表的渲染性能有了进一步的提升。

以上是我优化虚拟列表的一些经验和心得。希望对你有帮助。