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

Question

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

标签： reactjsag-gridag-grid-react

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);

现场示例