我正在将react-redux-firebase
与reselect
和react-virtualized
结合使用,以尝试显示500〜项列表,该列表将在后台更改,添加或删除条目。
每次在Firebase上更改单个条目时,我的表函数组件都会从redux检索所有500条记录,然后再次重新呈现整个表,而不是重新更改特定的行。
曾经希望将reselect
与react-virtualized
一起使用可以解决此问题,a,我现在想知道这是由于我在某些专栏中使用三元数引起的,还是还有其他问题?
如果没有关于表/行调整的解决方案,是否可以对来自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}
/>
...