面试题：React 中如何优化列表渲染性能

Question

在 React 项目中，有一个包含大量数据项的列表需要渲染，例如一个展示上千条用户信息的列表。请阐述你会使用哪些技术手段来优化这个列表的渲染性能，以避免页面卡顿等性能问题。

Answer 1

• 虚拟列表技术：
  • 原理：只渲染当前可视区域内的列表项，当用户滚动时，动态加载新的可见项，而不是一次性渲染全部上千条数据。
  • 实现：可使用第三方库如 react - virtualized 或 react - window 。以 react - virtualized 为例，其 List 组件可以通过设置 height 、 rowCount 、 rowHeight 、 rowRenderer 等属性来实现虚拟列表功能。
• 减少重渲染：
  • 使用 React.memo：对于列表项组件，使用 React.memo 包裹，它会对组件的 props 进行浅比较，如果 props 没有变化，则不会重新渲染该组件，从而减少不必要的渲染开销。
  • shouldComponentUpdate：在类组件中，通过重写 shouldComponentUpdate 方法，手动控制组件何时重新渲染。例如，仅当影响列表项显示的 props 发生变化时才重新渲染。
• 优化数据处理：
  • 数据分片：如果数据获取是异步的，可以考虑分批次获取数据，每次获取一部分，避免一次性请求大量数据，减轻网络和前端处理压力。
  • 数据预处理：在渲染列表前，对数据进行必要的处理和格式化，避免在渲染过程中执行复杂的计算操作。例如，提前计算好需要展示的格式化日期、金额等。
• 使用 CSS 硬件加速：
  • 原理：对于列表容器，可以通过 will - change 、 transform 等 CSS 属性触发浏览器的硬件加速，提升滚动的流畅性。
  • 示例：will - change: transform; 提前告知浏览器元素可能会发生变换，浏览器会提前做一些优化准备；transform: translateZ(0) 触发硬件加速，提升滚动性能。