当前位置：首页 > React

react如何创建数据网格

2026-03-10 20:29:24React

使用 React 创建数据网格的方法

使用现成的库（推荐）

React 生态系统中有多个成熟的数据网格库，可以快速实现功能丰富的表格。以下是几个常用库：

React-Table

轻量级、无 UI 依赖，高度可定制
支持分页、排序、过滤等功能
安装命令：npm install react-table

基本用法示例：

import { useTable } from 'react-table';

function Table({ columns, data }) {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Material-UI DataGrid

基于 Material Design 的完整解决方案
内置虚拟滚动、行选择、单元格编辑等功能
安装命令：npm install @mui/x-data-grid

基本用法示例：

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

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name' }
];

const rows = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
];

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

自定义实现

如果需要完全控制表格行为，可以手动实现基本数据网格：

function SimpleGrid({ data }) {
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map(key => (
            <th key={key}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, i) => (
          <tr key={i}>
            {Object.values(row).map((value, j) => (
              <td key={j}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

性能优化

对于大型数据集，需要考虑以下优化措施：

实现虚拟滚动（只渲染可视区域内的行）
使用分页加载数据
对数据进行 memoization 避免不必要的重新渲染
使用 Web Worker 处理复杂计算

虚拟滚动示例（使用 react-window）：

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    Row {index}
  </div>
);

const VirtualList = () => (
  <List height={400} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);