前端虚拟列表核心原理与 React 实战

偏移当前渲染区域

offsetY = startIndex * itemHeight

.list { transform: translateY(offsetY); }

**视觉效果：**DOM 只有十几条，但滚动条像真的有十万条。

React 实战代码（可直接使用）

下面是一个基于 TypeScript 的通用组件实现，封装了核心逻辑。

import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react'

interface VirtualListProps<T> {
  data: T[]
  height: number // 容器高度
  itemHeight: number // 每一项高度（固定）
  renderItem: (item: T, index: number) => React.ReactNode
  buffer?: number // 缓冲区
}

export function VirtualList<T>({ 
  data, 
  height, 
  itemHeight, 
  renderItem, 
  buffer = 5,
}: VirtualListProps<T>) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [scrollTop, setScrollTop] = useState(0)

  /** 可视区能显示的条数 */
  const visibleCount = Math.ceil(height / itemHeight)

  /** 开始索引 */
  const startIndex = Math.max(
    Math.floor(scrollTop / itemHeight) - buffer,
    0
  )

  /** 结束索引 */
  const endIndex = Math.min(
    startIndex + visibleCount + buffer * 2,
    data.length
  )

  /** 当前渲染的数据 */
  const visibleData = useMemo(
    () => data.slice(startIndex, endIndex),
    [data, startIndex, endIndex]
  )

  /** 偏移量 */
  const offsetY = startIndex * itemHeight

  /** 总高度（关键：撑开滚动条） */
  const totalHeight = data.length * itemHeight

  /** 滚动事件 */
  const onScroll = useCallback(() => {
    if (!containerRef.current) return
    setScrollTop(containerRef.current.scrollTop)
  }, [])

  return (
    <div 
      ref={containerRef} 
      style={{ 
        height, 
        overflowY: 'auto', 
        position: 'relative', 
        border: '1px solid #ddd', 
      }} 
      onScroll={onScroll}
    >
      {/* 撑开高度 */}
      <div style={{ height: totalHeight }} />

      {/* 实际渲染内容 */}
      <div 
        style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          right: 0, 
          transform: `translateY(${offsetY}px)`, 
        }}
      >
        {visibleData.map((item, index) => (
          <div 
            key={startIndex + index} 
            style={{ 
              height: itemHeight, 
              boxSizing: 'border-box', 
              borderBottom: '1px solid #eee', 
            }}
          >
            {renderItem(item, startIndex + index)}
          
        ))}
      
    
  )
}

如何使用这个 VirtualList

const data = Array.from({ length: 100000 }, (_, i) => `Row ${i}`)

export default function App() {
  return (
    <VirtualList 
      data={data} 
      height={500} 
      itemHeight={50} 
      renderItem={(item) => <div>{item}</div>} 
    />
  )
}

实现细节与优化建议

针对上面的 Demo，有几个关键点值得注意：

1. 撑开滚动条的占位符

   <div style={{ height: totalHeight }} />
   

   这行代码本身不显示任何内容，只是为了撑开滚动条的高度，让浏览器知道列表有多长。

2. 为什么用 absolute + translateY？ 因为 transform 不会触发布局重排（Reflow），性能比设置 top 属性好得多。

   transform: translateY(offsetY)
   

3. buffer 的意义 防止滚动过快出现白屏，提前渲染上下几条数据。

   buffer = 5
   

4. Key 的生成策略 为什么 key 用 startIndex + index？因为同一条数据在不同 scrollTop 下会复用 DOM，key 必须全局唯一且稳定。

性能进阶优化

如果对滚动体验要求极高，可以对 scroll 进行节流处理。利用 requestAnimationFrame 来同步状态，避免高频回调导致的卡顿。

const rafIdRef = useRef<number | null>(null)

const onScroll = useCallback(() => {
  if (!containerRef.current) return
  
  // 如果当前帧已经有任务了，直接 return
  if (rafIdRef.current !== null) return
  
  rafIdRef.current = requestAnimationFrame(() => {
    setScrollTop(containerRef.current!.scrollTop)
    rafIdRef.current = null
  })
}, [])

这样能保证每帧只更新一次状态，交互会更加丝滑。