跳到主要內容
+

Data Grid - 效能

使用本指南的建議來提升 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