为什么向ag-grid-react添加一列会导致所有单元格重新呈现？

Question

我有一个使用ag-grid-react 21.0.1的应用程序，当我添加一个列时，所有的单元格都会重新渲染，这非常笨重，对于更大的网格，这会使应用程序完全无法使用。有什么方法可以防止这种情况发生吗？我传递了完全相同的rowData，并且不更改其他columnDefs的引用

Answer 1

您应该使用columnApi.setColumnState()来更新列可见性。避免使用setState (我假设在您的情况下)，因为它是不必要的。Ag-grid将为您处理剩下的事情。如下所示：

    const show = true; // or false depend on what you want
    const columnState = columnApi.getColumnState();
    const newColumnState = columnState.map((c) => {
      const nc = { ...c };
      if (c.colId === targetColId) {
        nc.hide = show;
      }
      return nc;
    });
    columnApi.setColumnState(newColumnState);

现场示例

​

​