跳到主要内容
+

数据表格 - 性能

使用本指南中的建议来提升 DataGrid 的性能。

提取静态对象并记忆根属性

Data Grid 组件使用 React.memo 来优化其性能，这意味着只有当其自身及其子组件的属性发生变化时才会重新渲染。但是，如果你的 Data Grid 的根属性没有被记忆化，很容易导致不必要的重新渲染。以下面的例子为例，slots 和 initialState 对象在每次渲染时都会被重新创建，这意味着 Data Grid 本身也不得不重新渲染。

function Component(props) {
  return (
    <DataGrid
      rows={props.rows}
      slots={{
        row: CustomRow,
      }}
      cellModesModel={{ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }}
    />
  );
}

防止重新渲染的一个简单方法是提取任何可以作为静态对象的对象，并记忆化任何依赖于另一个对象的对象。这适用于任何作为对象或函数的属性。

const slots = {
  row: CustomRow,
};

function Component(props) {
  const cellModesModel = React.useMemo(
    () => ({ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }),
    [props.rows],
  );

  return (
    <DataGrid rows={props.rows} slots={slots} cellModesModel={cellModesModel} />
  );
}

可视化

DataGrid 记忆化了它的一些子组件，以避免不必要的重新渲染。下面是一个可视化示例，展示了哪些单元格会因你与表格的交互而重新渲染。

API