React函数组件重渲染问题求助：列表滚动时跳至顶部

你的问题核心在于：当loading为true时，VirtualizedTreeNamesList被完全卸载，重新挂载时会丢失之前的滚动状态，导致每次加载后都回到列表顶部。下面是几种可行的解决方案，按推荐优先级排序：

方案1：保持列表组件挂载，仅切换加载状态的显示 #

不要在loading时直接返回Placeholder，而是让列表始终处于挂载状态，通过条件渲染控制加载提示的显示位置（比如覆盖在列表上方，或者放在列表底部）。

修改后的代码示例：

const ExampleComponent: React.FC<IProps> = ({...props}) => {
  const { loading } = customHook({...});

  return (
    <div style={{ position: 'relative' }}>
      {/* 全屏加载占位（如果需要），用绝对定位覆盖列表 */}
      {loading && (
        <div style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          right: 0, 
          bottom: 0, 
          background: '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <Placeholder />
        </div>
      )}
      {/* 列表始终挂载，保留滚动状态 */}
      <VirtualizedTreeNamesList />
    </div>
  );
};

如果是加载更多的场景，更推荐把加载提示放在列表底部：

const ExampleComponent: React.FC<IProps> = ({...props}) => {
  const { loading } = customHook({...});

  return (
    <div>
      <VirtualizedTreeNamesList />
      {/* 加载更多时显示底部占位 */}
      {loading && <Placeholder />}
    </div>
  );
};

方案2：在列表组件内部处理加载状态 #

把loading状态的逻辑内聚到VirtualizedTreeNamesList组件中，外部组件只负责传递数据或状态，避免组件卸载。

示例：

// VirtualizedTreeNamesList 组件内部
const VirtualizedTreeNamesList = ({ loading }: { loading: boolean }) => {
  const { data } = useDataHook();

  return (
    <div className="virtual-list-container">
      {/* 渲染虚拟列表项 */}
      {data.map(item => (
        <div key={item.id} className="list-item">{item.name}</div>
      ))}
      {/* 底部加载提示 */}
      {loading && <div className="loading-more">加载中...</div>}
    </div>
  );
};

// 外部组件
const ExampleComponent: React.FC<IProps> = ({...props}) => {
  const { loading } = customHook({...});

  return <VirtualizedTreeNamesList loading={loading} />;
};

方案3：保存并恢复滚动位置（备选） #

如果必须保留loading时卸载列表的逻辑，可以通过保存滚动位置，在列表重新挂载时恢复。注意这种方式需要适配虚拟列表的滚动容器：

const ExampleComponent: React.FC<IProps> = ({...props}) => {
  const { loading } = customHook({...});
  const scrollOffsetRef = useRef<number>(0);
  // 假设虚拟列表的滚动容器有ref可以获取
  const listScrollRef = useRef<HTMLDivElement>(null);

  // 卸载前保存滚动位置
  useEffect(() => {
    if (!loading && listScrollRef.current) {
      scrollOffsetRef.current = listScrollRef.current.scrollTop;
    }
  }, [loading]);

  // 挂载后恢复滚动位置
  useEffect(() => {
    if (!loading && listScrollRef.current) {
      listScrollRef.current.scrollTop = scrollOffsetRef.current;
    }
  }, [loading]);

  if (loading) {
    return <Placeholder />;
  }

  return (
    <div ref={listScrollRef} className="list-scroll-container">
      <VirtualizedTreeNamesList />
    </div>
  );
};

如果使用的是react-window或react-virtualized这类虚拟列表库，可以直接使用它们提供的滚动控制API（比如scrollToOffset）来恢复位置，效果更可靠。

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