Как мне отобразить список или таблицу моих собственных элементов с помощью response-window?

Question

У меня есть массив из тысяч объектов, например

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

Я хочу отобразить таблицу, в которой каждый объект человека представляет собой строку, но их так много, и их score поле обновляется каждые несколько секунд, что приводит к зависанию компьютера пользователя.

Кажется, это прекрасная возможность опробовать React-Window. Скажем, только 20 из этих объектов будут на экране в любой момент, поэтому я просто покажу и повторно визуализирую те, которые сейчас находятся в области просмотра.

Но я просто не могу понять примеры или документацию окна реакции. Вот пример сетки фиксированного размера:

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 а также rowIndexреквизит идет? Я читаю исходный код и не могу понять этого. Нигде не упоминается, что вы можете передать массив / коллекцию одному из компонентов окна реакции, так как же сопоставить массив с одним? Единственный способ сделать это - проиндексировать в моемpeopleмассив, но это кажется... неправильным? Не приведет ли это, например, к тому, что сортировка станет очень дорогой?