如何实现无强制回流的高效自动滚动消息框？

1. 仅在用户处于底部时触发滚动 #

每次items更新就强制滚动会触发不必要的布局计算，应该先判断用户当前是否已经在接近底部的位置，只有满足条件时才执行滚动：

const scrollRef = useRef(null);
useEffect(() => {
  const container = scrollRef.current;
  if (!container) return;
  // 10px容差，避免用户轻微滚动就取消自动滚动
  const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 10;
  if (isAtBottom) {
    container.scrollTop = container.scrollHeight;
  }
}, [items]);

2. 移除平滑滚动，改用同步滚动 #

scrollTo({ behavior: "smooth" })会触发多次浏览器重排/回流，终端或消息场景下即时滚动到底部的体验更自然，直接设置scrollTop可避免多次布局计算：

// 替换原smooth滚动逻辑
container.scrollTop = container.scrollHeight;

3. 用requestAnimationFrame确保DOM更新完成后再滚动 #

React的useEffect在DOM更新后执行，但有时DOM节点可能未完全渲染完毕，提前计算scrollHeight会导致重复计算。将滚动逻辑放到requestAnimationFrame中，确保在浏览器下一次重绘前执行：

useEffect(() => {
  const container = scrollRef.current;
  if (!container) return;
  
  const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 10;
  if (isAtBottom) {
    const rafId = requestAnimationFrame(() => {
      container.scrollTop = container.scrollHeight;
    });
    return () => cancelAnimationFrame(rafId);
  }
}, [items]);

4. 长列表虚拟化（针对大量内容场景） #

如果items数量极多，渲染全部DOM元素本身就是性能瓶颈。使用列表虚拟化库（如react-window）只渲染当前视口内的元素，从根源减少DOM节点数量：

import { FixedSizeList } from 'react-window';

// 替换原容器渲染逻辑
<FixedSizeList
  height={400}
  width="100%"
  itemCount={items.length}
  itemSize={20} // 每个item的固定高度
>
  {({ index, style }) => (
    <div style={style}>
      {items[index]}
    </div>
  )}
</FixedSizeList>

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