Question

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

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

问题是，因为我使用 frameworkComponent - 在我的情况下是 React 组件 - 作为 cellRenderer，似乎我通过 useSelector(selectorForMyData) 获得的网格数据的任何更改都会导致重新渲染我的 frameworkComponent，它在浏览器上看起来像一个随机的、烦人的闪烁。该应用程序与 redux 紧密相连

两个问题：

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

2 - 有什么办法可以解决这个问题吗？我已经尝试将我的 return 语句包装在框架单元渲染器组件中，并使用 useMemo 将 params 作为依赖项，但这似乎不起作用。还尝试通过 render 使用与 useCallback 相同的想法制作 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 导致重新渲染存储更改，这是预期的，但它没有回答我的第一个问题。

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

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

Answer 1

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

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

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

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

1 个答案: