代码实现自动滚动的虚拟长列表

实现自动滚动的虚拟长列表，可以使用 React 的 `react-window` 库。这个库提供了一些组件来优化大型列表的性能，其中包括 `FixedSizeList` 和 `VariableSizeList` 组件。这两个组件都支持自动滚动。

下面是一个使用 `FixedSizeList` 组件实现自动滚动的示例：

import React, { useRef, useEffect } from 'react';
import { FixedSizeList } from 'react-window';

function VirtualList({ itemCount, itemSize, height }) {
  const listRef = useRef(null);

  useEffect(() => {
    if (listRef.current) {
      // 自动滚动到底部
      listRef.current.scrollToItem(itemCount - 1);
    }
  }, [itemCount]);

  const renderRow = ({ index, style }) => {
    return (
      <div style={style}>
        Row {index}
      </div>
    );
  };

  return (
    <FixedSizeList
      ref={listRef}
      itemCount={itemCount}
      itemSize={itemSize}
      height={height}
      width="100%"
    >
      {renderRow}
    </FixedSizeList>
  );
}

export default VirtualList;

在这个组件中，我们使用了 `useRef` 钩子来获取 `FixedSizeList` 组件的引用，然后在 `useEffect` 钩子中调用 `scrollToItem` 方法来自动滚动到列表的底部。`scrollToItem` 方法接收一个索引值作为参数，它会将该索引所对应的行滚动到可视区域内。

你可以将 `itemCount`、`itemSize` 和 `height` 作为 props 传递给 `VirtualList` 组件，它们分别表示列表的行数、每行的高度和列表的高度。在 `renderRow` 函数中，我们根据索引值渲染每一行的内容。

这个组件可以像下面这样使用：

function App() {
  return (
    <div>
      <h1>Virtual List</h1>
      <VirtualList
        itemCount={1000}
        itemSize={50}
        height={500}
      />
    </div>
  );
}

export default App;

在这个示例中，我们创建了一个包含 1000 行的虚拟列表，每行的高度为 50 像素，列表的高度为 500 像素。当组件挂载时，它会自动滚动到列表的底部。