使用 react-virtualized 的 9 列滚动性能缓慢答案

【问题标题】：Slow scrolling performance with 9 columns using react-virtualized使用 react-virtualized 的 9 列滚动性能缓慢
【发布时间】：2020-04-09 23:32:49
【问题描述】：

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

[Violation] 'requestAnimationFrame' 处理程序耗时约 116 毫秒

和

[Violation]“滚动”处理程序耗时约 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 };

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

【问题讨论】：

标签： typescript material-ui react-virtualized

【解决方案1】：

好吧，如果有人想知道如何解决这个问题， - 减少单元格和标题 HTML 嵌套对我在遍历表格时减少滞后有很大帮助。生成相当大的元素树的 Material UI 组件 -> react-virtualized 在弹出元素时很难渲染繁重的组件，因此您应该使其尽可能简单。

【讨论】：