Question

我正在使用基于React的单元格渲染器来渲染1列的Material UI组件。我注意到，即使只有很少的数据（也许有30个项目），它的速度也难以置信，滚动确实很缓慢。

他们的文档说，在单元格渲染器中使用框架会增加性能，但我认为可能有很多行，少于25行。

网格：

              <AgGridReact
                columnDefs={columns}
                rowData={data?.edges?.map(edge => edge?.node)}
                defaultColDef={{
                  ...{
                    filter: true,
                    sortable: true,
                    resizable: true,
                    editable: false,
                    headerHeight: 12,
                    cellClass: 'no-border',
                    suppressNavigable: true
                  },
                  ...options?.columnDefaults
                }}
                headerHeight={35}
                frameworkComponents={options?.frameworkComponents}
                quickFilterText={filter}
                {...props}
              />

列

  const columns = [
    {
      headerName: '',
      width: 80,
      cellRenderer: 'RowActions',
      cellRendererParams: {
        handleClone,
        handleEdit,
        handleDelete,
        handlePublish,
        data
      }
    }]

RowActions

import React, { memo, useState } from 'react';
import { IconButton, Menu, MenuItem, Button } from '@material-ui/core';
import { Menu as MenuIcon, CheckCircle, Publish } from '@material-ui/icons';

export const RowActions = memo(
  ({ handleClone, handleDelete, handleEdit, data: { qaSessionId, status } }) => {
    const [anchorEl, setAnchorEl] = useState(null);

    const handleClick = event => {
      setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
      setAnchorEl(null);
    };

    return (
      <>
        <IconButton
          aria-label="more"
          aria-controls="long-menu"
          aria-haspopup="true"
          onClick={handleClick}>
          <MenuIcon />
        </IconButton>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={handleClose}>
          {/* YOU CAN ONLY EDIT A DRAFT ITEM  */}
          {status !== 'production' && (
            <MenuItem
              onClick={() => {
                handleEdit(qaSessionId);
                handleClose();
              }}>
              Edit
            </MenuItem>
          )}

          {/* YOU CAN ONLY CLONE AN ITEM IN PRODUCTION */}
          {status === 'production' && (
            <MenuItem
              onClick={() => {
                handleClone(qaSessionId);
                handleClose();
              }}>
              Clone
            </MenuItem>
          )}
          <MenuItem
            onClick={() => {
              handleDelete(qaSessionId);
              handleClose();
            }}>
            Delete
          </MenuItem>
        </Menu>
      </>
    );
  }
);

当我滚动时，几秒钟后我清楚地看到显示了react组件/单元格渲染器我还得到：[Violation] 'setTimeout' handler took <N>ms滚动

带有单元格渲染器的Ag-Grid缓慢

0 个答案: