Question

我正在使用react-virtualized与material-ui表格单元格配对以创建具有虚拟滚动的表格，一切似乎都很好，但是在上下方向遍历表格时，偶尔会出现性能下降的情况。我打开开发者控制台，在那里发现了一些警告-很多

[Violation]'requestAnimationFrame'处理程序花费了大约116ms

和

[违反]“滚动”处理程序花费了大约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-virtualized在弹出元素时很难渲染较重的组件，因此应使其尽可能简单。

使用react-virtualized的9列滚动速度慢

1 个答案: