React-virtuoso：过扫描道具不起作用

Question

我正在使用react-virtuoso库来渲染一个简单的虚拟列表。代码非常简单。我传递了这个overscan道具并期望虚拟列表在视口上方和下方渲染n项目，但它不起作用。

ExpensiveComponent当我上下滚动一点时， s 仍然呈现“正在加载...”文本。这是代码：

import { Virtuoso } from "react-virtuoso";
import { useEffect, useState, useRef, PropsWithChildren } from "react";

function ExpensiveComponent({ children }: PropsWithChildren<{}>) {
  const [render, setRender] = useState(false);
  const mountRef = useRef(false);

  useEffect(() => {
    mountRef.current = true;

    setTimeout(() => {
      if (mountRef.current) {
        setRender(true);
      }
    }, 150);

    return () => void (mountRef.current = false);
  }, []);

  return (
    <div style={{ height: 150, border: "1px solid pink" }}>
      {render ? children : "Loading..."}
    </div>
  );
}

用法

function App() {
  return (
    <Virtuoso
      style={{ height: "400px" }}
      totalCount={200}
      overscan={3} // ----------> this line does not work
      itemContent={(index) => {
        return <ExpensiveComponent>{index}</ExpensiveComponent>;
      }}
    />
  );
}

Answer 1

我从文档中错过了这个细节。与react-window API不同，overscan单位是像素而不是虚拟列表中的行，在我的例子中，我需要增加overscanto 900px，它现在似乎正在工作。

<Virtuoso
  style={{ height: "400px" }}
  totalCount={200}
  overscan={900}
  itemContent={(index) => {
    return <ExpensiveComponent>{index}</ExpensiveComponent>;
  }}
/>