使用react虚拟化的9列的慢速滚动性能

Question

我使用react虚拟化和material表格单元来创建带有虚拟滚动的表，看起来一切都很好，但是在上下两个方向遍历表时，我偶尔会出现性能下降。我打开了一个dev控制台，在那里发现了一些警告--很多。

违规'requestAnimationFrame‘处理程序占用了~116

和

违规“滚动”处理程序占用了~150

消息。

  const MyTable: React.FunctionComponent<Props> = (props: Props) => {
  
    //props, styles, table content fetching here
  
    const headerRenderer = () => {
        return (
            <MyHeaderCell
                styleClass={classes.headerCell}
                content={"Header"}
            />
        );
    };

    const cellRenderer = (rendererProps) => {
        return (
            <MyContentCell
                styleClass={classes.tableCell}
                rendererProps={rendererProps}
            />
        );
    };

    const renderContent = () => {
        return (
            <InfiniteLoader
                isRowLoaded={isRowLoaded}
                loadMoreRows={loadMoretableItems}
                rowCount={tableItemsQuantity}
            >
                {({ onRowsRendered}) => (
                    <AutoSizer>
                        {(sizerProps: IAutoSizerProps) => {
                            const { height, width } = sizerProps;
                            return (
                                <Table
                                    onRowsRendered={onRowsRendered}
                                    width={width}
                                    height={height}
                                    rowHeight={rowHeight}
                                    rowCount={tableItems.length}
                                    rowGetter={getCurrentRow}
                                    overscanRowCount={5}
                                    headerHeight={rowHeight}
                                    rowClassName={classes.flexContainer}
                                    noRowsRenderer={noRowsRenderer}
                                >
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.id)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop1)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop2)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop3)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop4)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop5)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop6)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop7)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                    <Column
                                        dataKey={nameof<MyTableItem>((o) => o.prop8)}
                                        width={width}
                                        headerClassName={clsx(classes.header, classes.column)}
                                        headerRenderer={headerRenderer}
                                        className={clsx(classes.header, classes.column)}
                                        cellRenderer={cellRenderer}
                                    />
                                </Table>
                            );
                        }}
                    </AutoSizer>
                )}
            </InfiniteLoader>
        );
    };

    return (
        <Grid item container direction={"column"} className={classes.root}>
            <h4>{Translate.getString("My Table Items")}</h4>
            <Grid item className={classes.tableContainer}>
                {renderContent}
                <LoaderBlock isLoading={showTableLoader}/>
            </Grid>
        </Grid>
    );
};

export { MyTable };

​

我能做些什么来提高我的桌子的性能？

Answer 1

如果有人想知道如何解决这个问题，那么减少单元格和页眉HTML嵌套可以帮助我在遍历表时减少滞后。生成相当大的元素树的实质性UI组件( -> react)--虚拟化很难在弹出元素的同时呈现沉重的组件，因此您应该尽可能地保持它的简单。