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

Question

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

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

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

两个问题：

1 - 为什么当我本机使用 ag grid 使用AgGridColumn没有任何自定义单元格渲染器的方式渲染此单元格时，它不会导致同一商店更改时的重新渲染行为？我有一个绑定到主页的点击事件，该事件将标志切换为 false（在小吃栏警报打开的情况下）。

2 - 有什么办法可以解决这个问题吗？我尝试将我的return语句包装在框架单元渲染器组件中，并将其useMemo作为params依赖项，但这似乎不起作用。还尝试使用与以下相同的想法创建一个render函数，但这也没有帮助：/useCallbackuseMemo

谢谢

情况的伪代码：

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商店更改重新渲染，这是预期的，但它并没有回答我的第一个问题。

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

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

Answer 1

正如我在我的一篇编辑中所述。我大概明白了。

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

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