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

然后偏移当前渲染区域：

offsetY = startIndex * itemHeight

.list { transform: translateY(offsetY); }

最终效果是：DOM 只有十几条，但滚动条像真的有十万条一样流畅。

代码实战：React 组件实现

下面是一个基于 React Hooks 的完整 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)}
          
        ))}
      
    
  )
}

如何使用

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. 为什么使用 transform 而不是 top？ 因为 transform 不会触发布局重排（Reflow），性能比设置 top 属性好得多。

   transform: translateY(offsetY)
   

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

   buffer = 5
   

4. Key 的唯一性 为什么 key 用 startIndex + index？因为同一条数据在不同 scrollTop 下会复用 DOM，key 必须全局唯一，避免 React 误判导致状态丢失。

性能进阶：节流处理

在高频滚动场景下，建议对 scroll 事件进行节流处理。利用 requestAnimationFrame 能更平滑地同步状态，避免频繁触发渲染。

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

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

这样既能保证滚动流畅，又能有效控制渲染频率。