状态变更时如何保持TableVirtuoso的滚动位置？

核心思路 #

状态变更触发组件重渲染时，TableVirtuoso的虚拟化机制可能会重置滚动位置。解决关键是用ref持久化滚动位置，在状态更新后手动恢复，同时避免不必要的组件重渲染。

可行方案 #

1. 持久化滚动位置并手动恢复 #

使用useRef存储滚动位置（避免状态更新触发额外重渲染），监听滚动事件保存位置，在目标状态变更后调用Virtuoso的API恢复滚动：

import { TableVirtuoso, useVirtuoso } from 'react-virtuoso';
import React, { useRef, useEffect, memo } from 'react';

const MessagesTable = memo(({ highlightedIndex, data }) => {
  const { virtuosoRef, getScrollPosition, scrollToPosition } = useVirtuoso();
  const scrollPositionRef = useRef(0);

  // 保存滚动位置
  useEffect(() => {
    const scrollElement = virtuosoRef.current?.getScrollElement();
    const handleScroll = () => {
      scrollPositionRef.current = getScrollPosition();
    };

    scrollElement?.addEventListener('scroll', handleScroll);
    return () => scrollElement?.removeEventListener('scroll', handleScroll);
  }, [getScrollPosition, virtuosoRef]);

  // 状态变更后恢复滚动位置
  useEffect(() => {
    if (scrollPositionRef.current > 0) {
      scrollToPosition(scrollPositionRef.current);
    }
  }, [highlightedIndex, scrollToPosition]);

  return (
    <TableVirtuoso
      ref={virtuosoRef}
      data={data}
      components={{
        TableContainer: (props) => (
          <div {...props} style={{ height: '600px', overflow: 'auto' }} />
        )
      }}
      itemContent={(index) => (
        <tr className={index === highlightedIndex ? 'bg-blue-50' : ''}>
          <td>{data[index].message}</td>
          <td>{data[index].time}</td>
        </tr>
      )}
    />
  );
});

export default MessagesTable;

2. 避免不必要的重渲染 #

• 用React.memo包裹MessagesTable，减少props未变化时的重渲染
• 确保data prop稳定：如果数据是动态生成的，用useMemo缓存，避免每次渲染生成新数组触发Virtuoso重置

const stableData = useMemo(() => {
  // 处理数据逻辑
  return processedData;
}, [rawData]);

3. 检查组件key是否稳定 #

不要将highlightedIndex或其他频繁变化的状态作为TableVirtuoso的key，否则会导致组件完全重新挂载，滚动位置必然丢失：

// ❌ 错误：key随highlightedIndex变化
<TableVirtuoso key={highlightedIndex} ... />

// ✅ 正确：使用稳定的key
<TableVirtuoso key="messages-table" ... />

4. 直接控制Virtuoso的滚动行为 #

如果是高亮行需要滚动到视图内，不要依赖默认行为，而是手动调用scrollToIndex并设置对齐方式，同时避免触发全局滚动重置：

useEffect(() => {
  if (highlightedIndex !== null) {
    // 仅滚动到高亮行，不重置到顶部
    scrollToIndex(highlightedIndex, { behavior: 'smooth', align: 'center' });
  }
}, [highlightedIndex, scrollToIndex]);

内容的提问来源于stack exchange，提问作者Asad Ali