Я использую react-redux-firebase
с reselect
и react-virtualized
, чтобы попытаться отобразить список из 500 элементов, в котором будут записи, которые будут изменяться, добавляться или удаляться в фоновом режиме.
Каждый раз, когда в firebase изменяется одна запись, мой компонент табличной функции извлекает все 500 записей из избыточной копии, а затем повторно выполняет рендеринг всей таблицы, а не конкретной строки, которая была изменена.
Он надеялся, что при использовании reselect
вместе с react-virtualized
решит эту проблему, увы мне интересно, вызвано ли это тем, что я использую ternarys в некоторых моих столбцах, или есть другая проблема?
Если решения не существует, яможно сделать в отношении настроек таблицы / строки, возможно ли отменить / ограничить обновления, поступающие с useFireStoreConnect
или useSelector
, поэтому я буду обновлять таблицу не чаще, чем каждые 2/3 секунды?
const itemsSelector: any = createSelector(
(state: any) => state.firestore.ordered.items,
items => items
);
const ItemsTable: React.FC = React.memo(() => {
useFirestoreConnect('items');
const items: any = useSelector((state: any) => itemsSelector(state));
console.log(items) // 500~ firestore items, called every time there's a change to one entry
...
// The entire table is being re-rendered every time a single firebase entry that's been synced to redux is changed
return (
<AutoSizer>
{({ height, width }) => (
<Table
width={width}
height={height}
headerHeight={48}
rowHeight={48}
rowCount={items.length}
rowGetter={({ index }) => items[index]}
>
<Column
label="Status"
dataKey="status.name"
cellRenderer={({ rowData }) =>
rowData.status ? rowData.status.name : '-'
}
width={100}
/>
...