Material UI 的 Data Grid 组件是一个高效、灵活的数据展示解决方案，尤其在处理大量数据时，其虚拟化（Virtualization）功能能够显著提高性能。虚拟化技术仅渲染视口内的行和列，从而降低内存占用和提升渲染速度。本文将深入探讨 Data Grid 的虚拟化功能，涵盖使用方法、属性、方法，以及与其他组件的结合使用，提供详细示例。

1. 安装 Material UI 和 Data Grid

在使用 Data Grid 之前，你需要确保已安装 Material UI 和 Data Grid。可以通过以下命令安装：

npm install @mui/material @mui/x-data-grid

确保你还安装了 @mui/icons-material，以便使用图标。

npm install @mui/icons-material

2. Data Grid 的基本使用

首先，我们来创建一个简单的 Data Grid 示例，展示一些用户的基本信息。如下所示：

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
  { field: 'fullName', headerName: 'Full name', 
    description: 'This column has a value getter',
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  // 继续添加更多数据...
];

export default function BasicDataGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
}

此代码展示了一个简单的 Data Grid，包含用户的基本信息。

3. 虚拟化功能的实现

Data Grid 的虚拟化功能是其性能优化的核心，尤其在展示成千上万条记录时。默认情况下，Data Grid 会自动启用虚拟化，只需确保 autoHeight 属性未被设置。

3.1 垂直虚拟化

当数据行的数量很大时，启用垂直虚拟化可以显著提高性能。你只需设置组件的高度，如下所示：

<div style={{ height: 600, width: '100%' }}>
  <DataGrid rows={rows} columns={columns} pageSize={5} />
</div>

在上面的示例中，Data Grid 的高度设置为 600 像素，超出部分会自动虚拟化，只渲染当前视口中的数据。

3.2 水平虚拟化

水平虚拟化也可以通过定义列宽来实现。当列宽的总和超过 Data Grid 的宽度时，会自动启用水平虚拟化。

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
  { field: 'fullName', headerName: 'Full name', width: 200 },
  { field: 'address', headerName: 'Address', width: 250 },
  { field: 'email', headerName: 'Email', width: 250 },
];

<div style={{ height: 400, width: '100%' }}>
  <DataGrid rows={rows} columns={columns} pageSize={5} />
</div>

当列宽总和超过 Data Grid 的可见宽度时，用户可以通过水平滚动查看所有列。

4. 虚拟化与分页的结合使用

在处理大量数据时，结合虚拟化和分页功能可以进一步优化性能。例如，设置 pagination 属性并指定 pageSize：

<DataGrid rows={rows} columns={columns} pageSize={5} pagination />

此时，Data Grid 将仅渲染当前页面的数据，同时利用虚拟化技术来优化性能。

5. 结合筛选功能

结合筛选功能，可以让用户更加便捷地找到所需数据。以下是一个使用 TextField 进行筛选的示例：

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';

const DataTableWithFilter = () => {
  const [filterText, setFilterText] = useState('');

  const filteredRows = rows.filter((row) =>
    `${row.firstName} ${row.lastName}`
      .toLowerCase()
      .includes(filterText.toLowerCase())
  );

  return (
    <div style={{ height: 600, width: '100%' }}>
      <TextField
        label="Search"
        variant="outlined"
        onChange={(e) => setFilterText(e.target.value)}
      />
      <DataGrid
        rows={filteredRows}
        columns={columns}
        pageSize={5}
        pagination
      />
    </div>
  );
};

此代码实现了一个包含搜索框的 Data Grid，用户可以通过输入关键字进行筛选，虚拟化技术确保即使在大数据量下也能流畅运行。

6. 属性和方法总结

6.1 主要属性

• rows: 数据源，数组格式。
• columns: 列定义，数组格式。
• pageSize: 每页显示的行数。
• pagination: 是否启用分页，布尔值。
• autoHeight: 自动调整高度以适应行数，布尔值（如果设置为 true，将禁用虚拟化）。
• disableSelectionOnClick: 点击行时是否禁用选择，布尔值。
• getRowId: 自定义行 ID 的方法。

6.2 主要方法

• onSelectionModelChange: 行选择模型变化时触发的回调。
• onPageChange: 页面变化时触发的回调。
• onFilterModelChange: 过滤模型变化时触发的回调。

7. 完整示例

以下是一个结合虚拟化、筛选和分页的完整示例：

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
  { field: 'fullName', headerName: 'Full name', 
    description: 'This column has a value getter',
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  // 继续添加更多数据...
];

const CompleteDataGridExample = () => {
  const [filterText, setFilterText] = useState('');

  const filteredRows = rows.filter((row) =>
    `${row.firstName} ${row.lastName}`
      .toLowerCase()
      .includes(filterText.toLowerCase())
  );

  return (
    <div style={{ height: 600, width: '100%' }}>
      <TextField
        label="Search"
        variant="outlined"
        onChange={(e) => setFilterText(e.target.value)}
      />
      <DataGrid
        rows={filteredRows}
        columns={columns}
        pageSize={5}
        pagination
      />
    </div>
  );
};

export default CompleteDataGridExample;

结论

Material UI 的 Data Grid 的虚拟化功能在处理大规模数据时具有显著的性能优势。通过结合虚拟化、分页和筛选功能，可以提供流畅且高效的用户体验。希望本文能帮助你深入理解 Material UI 的 Data Grid 虚拟化功能并在项目中灵活应用。