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

Question

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

注册它

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

问题是因为我正在使用 frameworkComponent——在我的例子中是一个 React 组件——作为 cellRenderer，似乎我通过 useSelector(selectorForMyData) 获得的网格数据的任何变化导致我的 frameworkComponent 重新呈现，它在浏览器上看起来像一个随机的、恼人的闪烁。该应用程序大量连接到 redux

两个问题：

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

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

谢谢

情况的伪代码：

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

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

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

Answer 1

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

我将库 reselect 添加到应用程序，它修复了问题，我对它的发展感到满意。它允许你记住你的选择器，这样它只在你将它挂接到 changes/fires 的任何依赖选择器时才注册更改/“触发”（导致重新渲染），所以现在，我的网格没有自从我的 selectorForRowData 被记忆以来，实际行数据发生变化之前不会“闪烁”！

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

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

Ag grid using framework cell renderer keeps re-rendering on any store change

reactjs

ag-grid

react-redux

ag-grid-react

react-hooks