如何在React Table中更新单行或单元格而不重渲染整个表格？

刚好之前做过类似的大数据表格实时更新需求，全量重渲染确实会卡到怀疑人生，给你几个亲测有效的方案：

1. 精准更新数据源，利用React Table的内置优化 #

React Table是完全数据驱动的，只要你以不可变的方式更新数据源中对应单元格的内容，它会自动识别变化并只重渲染受影响的行/单元格，不会动整个表格。

比如WebSocket收到服务器推送的更新后，你可以这样处理：

// 假设WebSocket推送的结构是 { rowId: 'xxx', columnKey: 'status', newValue: 'completed' }
const handleWebSocketUpdate = (update) => {
  setData(prevData => {
    // 遍历数据，找到目标行并返回新对象（不可变更新）
    return prevData.map(row => {
      if (row.id === update.rowId) {
        // 只更新目标列，其他属性保持不变
        return { ...row, [update.columnKey]: update.newValue };
      }
      return row;
    });
  });
};

这里关键是不要直接修改原数组/对象，必须返回新的引用，这样React才能检测到变化，React Table内部的diff逻辑会帮你只更新需要变化的单元格。

如果觉得手动写不可变更新麻烦，可以用immer库简化代码：

import produce from 'immer';

const handleWebSocketUpdate = (update) => {
  setData(prevData => produce(prevData, draft => {
    const targetRow = draft.find(row => row.id === update.rowId);
    if (targetRow) {
      targetRow[update.columnKey] = update.newValue;
    }
  }));
};

2. 用React.memo优化自定义单元格组件 #

如果你的表格用了自定义的单元格渲染组件，哪怕数据源只变了一个值，组件可能也会因为父组件重渲染而跟着刷新。这时候可以用React.memo包裹单元格组件，让它只在props真正变化时才重渲染。

比如：

// 优化后：用React.memo包裹，只在value变化时重渲染
const StatusCell = React.memo(({ value }) => {
  return <span className={`status-badge status-${value}`}>{value}</span>;
});

然后在columns配置里指定这个组件：

const columns = [
  // ...其他列
  {
    Header: '状态',
    accessor: 'status',
    Cell: StatusCell
  }
];

3. 配置唯一行标识，避免索引依赖 #

默认情况下React Table可能会用数组索引作为行的标识，但如果数据有排序、过滤等操作，索引会变化，导致更新出错。所以最好在useTable配置里指定getRowId，用数据本身的唯一ID来标识行：

const { getTableProps, getTableBodyProps, rows, prepareRow } = useTable({
  columns,
  data,
  // 用每行的唯一ID作为标识，确保React Table能精准追踪行的变化
  getRowId: row => row.id
});

这样不管数据怎么排序、过滤，只要行的ID不变，React Table就能准确找到要更新的行，不会出现更新错位的情况。

4. 结合虚拟滚动进一步降低渲染压力 #

如果你的数据集真的超大（比如上万行），哪怕只重渲染一行，也可能有性能问题。这时候可以结合React Table的虚拟滚动功能，只渲染可视区域内的行，再配合局部数据更新，性能会提升很多。

你可以用React Table的useVirtual钩子集成虚拟滚动：

import { useTable, useVirtual } from 'react-table';

const Table = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    virtualRows,
    prepareRow,
    getVirtualRowProps,
  } = useTable(
    { columns, data, getRowId: row => row.id },
    useVirtual
  );

  // 渲染的时候用virtualRows代替rows
  return (
    <div {...getTableProps()} style={{ height: '600px', overflow: 'auto' }}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {virtualRows.map(virtualRow => {
          prepareRow(virtualRow.row);
          return (
            <tr {...virtualRow.row.getRowProps(getVirtualRowProps(virtualRow))}>
              {virtualRow.row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </div>
  );
};

这样只有当前可视区域的行才会被渲染，数据更新时也只会重渲染可视区域内的变化行，性能拉满。

内容的提问来源于stack exchange，提问作者Mark Qian