1

我有数千个对象的数组，比如

const people = [
    { name: "Alan", age: 36, score: 103428 },
    { name: "Belinda", age: 40, score: 1482822 },
    { name: "Carol", age: 51, score: 78492391 },
    ...
];

我想显示一个表格，其中每个人对象都是一行，但是它们太多了，并且它们的score字段每隔几秒钟更新一次，这会使用户的机器陷入困境。

这似乎是尝试 react-window 的绝佳机会。只是说这些对象中的 20 个会在任何时候出现在屏幕上，所以我现在只显示并重新渲染那些在视口中的对象。

但我就是无法理解 react-window 示例或文档。这是它为固定大小的网格提供的示例：

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div style={style}>
    Item {rowIndex},{columnIndex}
  </div>
);

const Example = () => (
  <Grid
    columnCount={1000}
    columnWidth={100}
    height={150}
    rowCount={1000}
    rowHeight={35}
    width={300}
  >
    {Cell}
  </Grid>
);

渲染它的子元素的方式发生了某种魔法，FixedSizeGrid但我不知道它是什么，也不知道如何Cell用我自己的组件替换。style,columnIndex和rowIndexprops 是从哪里来的？我正在阅读源代码，但无法弄清楚。任何地方都没有提到您可以将数组/集合提供给 react-window 组件之一，那么如何将数组映射到一个？我能看到的唯一方法是索引到我的people数组，但这感觉......错了？例如，这不会导致排序变得非常昂贵吗？

4

0 回答 0