Javascript 带单元渲染器的Ag网格慢速

我正在使用基于React的单元渲染器渲染一列的材质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}
              />

划船动作

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>
      </>
    );
  }
);

import React，{memo，useState}来自“React”；
从“@material ui/core”导入{IconButton，Menu，MenuItem，Button}；
从“@material ui/icons”导入{Menu as MenuIcon，CheckCircle，Publish}；
导出常量行操作=备注(
（{handleClone，handleDelete，handleEdit，数据：{qaSessionId，status}}）=>{
常量[anchorEl，setAnchorEl]=useState（null）；
const handleClick=事件=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
返回(
{/*您只能编辑草稿项*/}
{状态！=='生产'&&(
{
handleEdit（qaSessionId）；
handleClose（）；
}}>
编辑
)}
{/*您只能克隆生产中的项目*/}
{状态==='生产'&&(
{
handleClone（qaSessionId）；
handleClose（）；
}}>
克隆
)}
{
handledelite（qaSessionId）；
handleClose（）；
}}>
删除
);
}
);

当我滚动时，几秒钟后我可以看到react组件/单元渲染器显示

---

我还得到：

[Violation]“setTimeout”处理程序在滚动时使用了ms

你能提供一个关于stackblitz或Plink的示例吗？你必须分析你的代码，看看瓶颈在哪里。作为参考，我正在使用带有角度的框架单元渲染器，我假设它的性能不会比React更高，我没有看到这个问题。也许这篇文章会对你有所帮助（你会得到一个比较渲染器的基线）：啊，谢谢你的更新，我会看一看。我们通过禁用MaterialUI的某些方面来提高性能。就像涟漪一样，当我们看到项目时，保持弹出dom元素。这帮了大忙。嗨@batman，你能扩展一下“当我们看到项目时保持弹出dom元素”吗

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>
      </>
    );
  }
);