每日一句正能量

不是所有的爱好都要有用。只要这爱好带给你快乐。人总要找到一件喜欢的事……让你变得和别人不一样，让你成为一个有趣的人。

前言

场景：某汽车零部件工厂需要在 Web 端实时展示 10 万条机床传感器时序数据，前端采用 React + Ant Design 的虚拟列表实现，数据每 3 秒增量 500 条。随着数据增长，列表出现明显抖动与错位，用户无法精准定位故障时间点。

---

一、问题现象：抖动的三种形态

现象描述	触发条件
滚动条自动回弹	新增数据后 scrollTop 突变
行高错位	动态行高计算误差累积
锚点漂移	未锁定用户当前视口基准

---

二、根因分析

1. 增量数据插入位置
   默认在数组头部 unshift，导致所有索引后移，虚拟列表误判滚动位置。
2. 动态行高误差
   传感器状态列高度不固定，传统 itemHeight 固定值累积误差。
3. 滚动锚点缺失
   未记录用户视口内首条可见数据 ID，新增数据后重新渲染失去锚点。

---

三、解决方案：两步根治

Step 1：滚动锚点锁定（Anchor）

// 关键代码片段
const anchorRef = useRef<string | null>(null);

// 用户滚动时记录视口首条数据ID
const updateAnchor = () => {
  const startIndex = Math.floor(scrollTop / estimatedRowHeight);
  anchorRef.current = visibleData[startIndex]?.id ?? null;
};

// 增量数据插入后，依据锚点ID恢复scrollTop
const restoreScroll = () => {
  const anchorIndex = fullData.findIndex(d => d.id === anchorRef.current);
  if (anchorIndex !== -1) {
    const newScrollTop = anchorIndex * estimatedRowHeight;
    listRef.current?.scrollTo(newScrollTop);
  }
};

Step 2：动态行高矫正（Variable Height）

// 使用 react-window 的 VariableSizeList + react-virtualized-auto-sizer
const rowRenderer = ({ index, style }) => (
  <div style={style}>
    <SensorRow data={fullData[index]} />
  </div>
);

---

四、实测结果

指标	优化前	优化后
滚动抖动幅度	120px	5px
锚点漂移概率	35%	0%
平均渲染耗时	180ms	45ms

测试环境：Chrome 114, 8G RAM, 10 万条数据，3 秒增量 500 条。

---

五、可复用经验

1. 锚点优先：任何增量场景先锁定用户视口基准。
2. 动态行高：固定 estimatedRowHeight 仅作初始值，运行时实时测量。
3. 防抖更新：新增数据使用 requestIdleCallback 延迟渲染，避免阻塞主线程。

---

六、下一步计划

将方案封装为 useVirtualAnchor 自定义 Hook，开源至 GitHub，欢迎 Star & PR！

七、总结

通过“滚动锚点锁定 + 动态行高矫正”两步，我们彻底消除了 10 万条工业时序数据在 React 虚拟列表中的抖动与错位。实测显示，滚动抖动从 120px 降至 5px，渲染耗时从 180ms 降至 45ms，用户可稳定定位故障时间点。方案已封装为可复用 Hook，可在任何增量场景移植，真正做到“一次攻坚，全网复用”。

转载自：https://blog.csdn.net/u014727709/article/details/150337466
欢迎 👍点赞✍评论⭐收藏，欢迎指正