面试题：React中使用虚拟列表优化长列表渲染时，如何确定列表项的高度？

Question

在React长列表渲染优化场景下，使用虚拟列表是常见手段。请阐述在实现虚拟列表时，怎样准确确定列表项的高度，以及不同高度确定方式对性能的影响。例如，固定高度列表项和动态高度列表项在代码实现和性能上有哪些区别？

Answer 1

确定列表项高度的方式及对性能的影响

1. 固定高度列表项
   • 高度确定方式：直接为每个列表项指定一个固定的高度值，例如 li { height: 50px; }。
   • 代码实现：在React中实现相对简单，虚拟列表库只需按照固定高度进行偏移计算。例如使用 react - virtualized库时，设置 rowHeight 属性为固定值即可。
   • 性能影响：性能较好，因为计算量小。虚拟列表库在计算可见项时，根据固定高度可以快速定位，减少重排重绘的次数。在长列表场景下，滚动流畅度较高，资源消耗相对稳定。
2. 动态高度列表项
   • 高度确定方式：列表项高度根据内容动态变化，需要在渲染前或渲染过程中计算。例如根据文本长度、图片尺寸等确定高度。
   • 代码实现：较为复杂。一种方式是提前计算好所有列表项高度并存储在数组中，虚拟列表库根据这个数组来计算可见项。另一种是在渲染过程中通过测量DOM元素来确定高度，但这种方式会触发重排重绘，影响性能。例如使用 react - window库时，需要提供一个 getRowHeight 函数来动态计算高度。
   • 性能影响：计算高度开销大，尤其是在列表项较多时。如果采用实时测量DOM元素的方式，会频繁触发重排重绘，导致性能下降。但优点是能够适应各种复杂的布局需求，展示效果更灵活。