如何实现scrollIntoView仅在React组件初始渲染时执行一次？

问题背景 #

需求为实现指定节点滚动到可视区域的逻辑仅在组件初始渲染时触发一次，当前技术栈为MUI Table搭配react-window的FixedSizeList组件。
原有实现代码如下：

const [lastItemRef, setLastItemRef] = useState(null);
const [isScrolled, setIsScrolled] = useState(false);

useEffect(() => {
    if (lastItemRef !== null && !isScrolled) {
      lastItemRef.scrollIntoView({
        block: 'end',
        inline: 'center',
      });

      setIsScrolled(true);
    }
  }, [lastItemRef, isScrolled]);

return (
   <SomeList>
     <DeepItem ref={lastItemRef} /> 
   </SomeList>
)

对应异常表现：

• 移除setIsScrolled(true)时，scrollIntoView可正常生效，但后续用户手动上下/左右滚动列表时，滚动逻辑会重复触发
• 保留setIsScrolled(true)时，滚动逻辑完全不生效

问题根因 #

原有写法存在两个核心问题，直接导致时序冲突：

1. 错误将ref存储在state中：ref赋值时会触发state更新、组件重渲染，和isScrolled的状态更新形成执行顺序冲突。第一次effect触发时，lastItemRef刚拿到DOM节点，执行scrollIntoView后立刻调用setIsScrolled(true)触发重渲染，此时react-window的虚拟列表还没完成DOM挂载和位置计算，刚触发的滚动操作直接被后续重渲染重置了位置；等重渲染完成后，effect依赖的lastItemRef没有变化、isScrolled已经为true，不会再执行滚动逻辑，就出现了加了setIsScrolled就完全不滚动的现象。
2. 未适配虚拟列表特性：FixedSizeList的列表项是按需虚拟挂载的，普通useEffect的触发时机早于虚拟列表完成项渲染和位置测量，且虚拟列表的滚动容器是组件自身的包裹层，不是页面根滚动容器，直接调用原生scrollIntoView很容易被虚拟列表的内部布局逻辑覆盖。

修复方案 #

核心修改点：

• 移除ref的state存储，用callback ref获取目标DOM节点，避免ref赋值触发不必要的重渲染
• 将一次性滚动的标记存在useRef中，修改标记不会触发组件重渲染，从根源上避免滚动被重渲染打断
• 适配react-window虚拟列表特性，优先调用组件自带的滚动API，等列表布局完成后再执行滚动操作，保证滚动位置不被覆盖

完整实现代码：

import { useRef, useCallback } from 'react';
import { FixedSizeList } from 'react-window';
// MUI组件、业务组件导入省略

function MyListComponent() {
  // 用ref存储初始滚动执行标记，修改current不会触发重渲染
  const hasInitScrolled = useRef(false);
  // 存储FixedSizeList实例引用
  const virtualListRef = useRef(null);
  // 替换成你需要定位的目标项索引，比如最后一项就是列表总长度-1
  const TARGET_ITEM_INDEX = 0;

  // 用callback ref获取目标项DOM
  const targetItemRef = useCallback((node) => {
    // 节点存在、未执行过初始滚动、虚拟列表已挂载时才执行逻辑
    if (node && !hasInitScrolled.current && virtualListRef.current) {
      // 先调用虚拟列表自带滚动API定位到目标项
      virtualListRef.current.scrollToItem(TARGET_ITEM_INDEX, 'end');
      // 下一帧等DOM布局完成后再做水平位置对齐，避免被虚拟列表布局覆盖
      requestAnimationFrame(() => {
        node.scrollIntoView({
          block: 'end',
          inline: 'center',
        });
        // 标记为已执行，后续不会再触发
        hasInitScrolled.current = true;
      });
    }
  }, []);

  return (
    <FixedSizeList
      ref={virtualListRef}
      // 补全FixedSizeList必填属性：height、width、itemCount、itemSize等
      onItemsRendered={() => {
        // 兼容callback ref触发时机早于虚拟列表挂载的场景：列表首次渲染完成后检查目标节点是否存在
        if (!hasInitScrolled.current) {
          const targetNode = document.querySelector('[data-scroll-target="true"]');
          if (targetNode) targetItemRef(targetNode);
        }
      }}
    >
      {({ index, style }) => {
        const isTarget = index === TARGET_ITEM_INDEX;
        return (
          <div style={style}>
            <DeepItem
              ref={isTarget ? targetItemRef : null}
              data-scroll-target={isTarget}
            />
          </div>
        );
      }}
    </FixedSizeList>
  );
}

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