使用框架单元渲染器的 Ag 网格会在任何商店更改时不断重新渲染

Posted 2023-03-28

【中文标题】使用框架单元渲染器的 Ag 网格会在任何商店更改时不断重新渲染

【英文标题】：Ag grid using framework cell renderer keeps re-rendering on any store change

【发布时间】：2021-04-26 10:41:24

【问题描述】：

尝试使用 React 实现自定义单元框架渲染器，看起来很简单。创建 React 组件，使用 frameworkComponents 注册它。

填充rowData 的数据来自我的redux 存储。自定义单元格渲染器是一个功能性反应组件。

问题在于，因为我使用的是 frameworkComponent（在我的例子中是一个 React 组件）作为 cellRenderer，所以我通过 useSelector(selectorForMyData) 获得的网格数据的任何更改似乎都会导致重新我的 frameworkComponent 的渲染，它在浏览器上看起来像一个随机的、令人讨厌的闪烁。该应用程序大量连接到 redux

两个问题：

1 - 当我在没有任何自定义单元格渲染器的情况下使用 AgGridColumn 原生使用 ag 网格来渲染此单元格时，为什么不会导致在同一商店发生这种重新渲染行为的变化？我有一个绑定到主页的单击事件，该事件将标志切换为 false（在快餐栏警报打开的情况下）。

2 - 有没有办法解决这个问题？我尝试将我的return 语句包装在框架单元渲染器组件中，并使用useMemo 和params 作为依赖项，但这似乎不起作用。还尝试通过useCallback 使用与useMemo 相同的想法创建render 函数，但这也无济于事：/

谢谢

情况的伪代码：

App.tsx:

<MyAgGrid/>

MyAgrid.tsx:


const MyAgGrid = () => 
 const data = useSelector(selectorForData);
 return (
   <AgGridReact
     rowData=data
     frameworkComponents=
       'myCustomRenderer': CustomRendererComponent
     
     columnDefs=
       ['field': 'aField', cellRenderer: 'myCustomRenderer']
      />
   );
;


CustomCellRendererComponent.tsx:

const CustomCellRendererComponent = (params) => 
  console.log("params", params) //logs on every redux store update
  return (
    <div>HELLO WORLD</div>
  );
;

通过 CustomCellRendererComponent 呈现的单元格在任何 redux 存储更改时重新呈现。我猜这是由于useSelector 导致重新渲染商店更改，这是意料之中的，但它并没有回答我的第一个问题。

编辑： 我去了显示here（“MyCellRenderer”）的“作为类的功能”路线，到目前为止还没有看到重新渲染问题，所以我现在会坚持下去，即使它很丑陋。这让我相信我的问题是试图适应 React 组件/钩子，以及它的生命周期细微差别，因为单元格渲染器会导致问题。不过，我觉得应该有一种方法可以防止不断重新渲染的行为，否则这是一个非常无用的功能

编辑第 2 点： 我挖得更深，虽然我还没有找到开箱即用的解决方案，但我添加了reselect 库来记忆我的一些选择器。我用来获取rowData 的选择器现在已被记忆，我不再看到这个问题。如果没有人提供更好的、开箱即用的解决方案（使用 redux 或 ag grid），几天后将标记为答案。

【问题讨论】：

将相关代码添加到您的问题中会有所帮助。

@EdLucas 绝对同意，我为它添加了一个非常愚蠢的伪代码。使用 redux 样板文件和所有内容为它设置一个完整的操场会有点工作：/ 不知道为什么我的评论没有标记你，对不起。

【参考方案1】：

正如我在其中一个编辑中所述。我想通了，有点。

我将库 reselect 添加到应用程序中，它修复了症状，我对它的未来感到满意。它允许您记住您的选择器，以便它仅在您将其挂钩到更改/触发的任何依赖项选择器时才注册更改/“触发”（导致重新渲染），所以现在，我的网格没有“闪烁”直到实际行数据发生变化，因为我的 selectorForRowData 被记忆！

我仍然不确定为什么在使用 frameworkComponent（React 组件）作为单元格渲染器之前我没有看到症状，但我很高兴假设 Ag-Grid 有很多性能技巧客户端在插入自己的自定义功能时可能会丢失，就像自定义单元格渲染器中的情况一样。