深入理解前端虚拟列表：原理与 React 实现

.phantom { height: totalCount * itemHeight; }

偏移当前渲染区域

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>}
    />
  )
}

结合这段代码，有几个关键细节需要注意：

1. 撑开滚动条：下面这行代码不显示任何内容，只是为了撑开滚动条的高度。

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

2. 性能优化：为什么 content 要用 absolute + translateY？因为 transform 不会触发布局重排，性能比设置 top 好得多。

   transform: translateY(offsetY)
   

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

   buffer = 5
   

4. Key 的唯一性：为什么 key 用 startIndex + index？因为同一条数据在不同 scrollTop 下会复用 DOM，key 必须全局唯一，不能仅依赖 item id。

进阶优化：滚动事件节流

上面的 demo 中，onScroll 函数在高频触发时可能会影响性能。可以对 scroll 进行一个节流处理，利用 RAF（RequestAnimationFrame）来同步状态。

用 ref 记录 RAF 状态：

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

改变 onScroll 函数：

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

这样能保证每帧只更新一次状态，避免不必要的重渲染。