React可复用复杂表格组件设计方案咨询

作为后端转React开发者，当前负责的网站存在大量相似页面，多数页面包含1-2个具备以下特性的表格（部分表格无部分功能）：

• 支持分页、筛选、排序、行选择功能
• URL参数需关联筛选逻辑，并应用于首次数据请求
• 选中行支持批量操作，操作按钮位于表格顶部
• 每行最后一列包含编辑、删除等操作按钮
• 部分单元格支持自定义内容（左右添加图标、多行文本等）

已封装处理query params、筛选、分页的hooks，但页面组件内仍存在大量重复代码，示例如下：

const [dataLoading, setDataLoading] = useState(false);
const [data, setData] = useState([]);

const {
  queryParams, clearQueryParams, setQueryParams,
} = useQuery();
const {
  filters, updateFilters, clearFilters,
} = useFilters(queryParams);
const {
  paging, setPaging, setPage, setRowsPerPage,
} = usePagination();

// 大量使用状态的函数（比之前少一些）

曾尝试创建整合上述逻辑的Table组件，但遇到外部操作（如新增/删除列表项）导致数据脏需重新加载的问题。现需兼顾可读性与简洁性实现代码复用，纠结于以下方案：创建单一复杂Table组件、拆分为PaginatedTable/FilterableTable等功能组件，或采用组合方式。

推荐采用**「组合式Hooks + 基础UI Table组件」**的方案，既实现逻辑复用，又保留UI配置的灵活性，同时解决外部操作触发数据刷新的问题。以下是具体实现思路：

1. 封装整合型Table Hooks #

将数据加载、状态管理、刷新逻辑封装到一个useTableData钩子中，统一处理query、筛选、分页的联动，并提供外部触发刷新的方法：

// hooks/useTableData.js
import { useState, useEffect } from 'react';
import useQuery from './useQuery';
import useFilters from './useFilters';
import usePagination from './usePagination';

export default function useTableData(fetchData) {
  const [dataLoading, setDataLoading] = useState(false);
  const [data, setData] = useState([]);
  const [totalCount, setTotalCount] = useState(0);
  // 用于触发外部刷新的触发器
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  const { queryParams, clearQueryParams, setQueryParams } = useQuery();
  const { filters, updateFilters, clearFilters } = useFilters(queryParams);
  const { paging, setPaging, setPage, setRowsPerPage } = usePagination();

  // 联动请求数据
  useEffect(() => {
    const loadData = async () => {
      setDataLoading(true);
      try {
        // 假设fetchData接收筛选、分页参数，返回{ list, total }格式的数据
        const { list, total } = await fetchData({ filters, ...paging });
        setData(list);
        setTotalCount(total);
      } catch (err) {
        // 统一错误处理（如提示、日志）
        console.error('表格数据加载失败:', err);
      } finally {
        setDataLoading(false);
      }
    };
    loadData();
  }, [filters, paging, refreshTrigger, fetchData]);

  // 外部触发刷新的方法
  const refresh = () => setRefreshTrigger(prev => prev + 1);

  return {
    dataLoading,
    data,
    totalCount,
    queryParams,
    clearQueryParams,
    setQueryParams,
    filters,
    updateFilters,
    clearFilters,
    paging,
    setPaging,
    setPage,
    setRowsPerPage,
    refresh
  };
}

2. 实现基础UI Table组件 #

剥离逻辑，专注于表格的UI渲染，通过props接收状态、方法和配置项，支持自定义列、批量操作、行操作等：

// components/BaseTable.js
export default function BaseTable({
  data,
  loading,
  columns,
  selectedRows = [],
  onRowSelect,
  bulkActions = [],
  rowActions = [],
  onPageChange,
  onRowsPerPageChange,
  currentPage,
  rowsPerPage,
  totalCount
}) {
  // 全选逻辑
  const handleSelectAll = (e) => {
    if (!onRowSelect) return;
    const allIds = data.map(item => item.id);
    onRowSelect(e.target.checked ? allIds : []);
  };

  return (
    <div className="table-wrapper">
      {/* 批量操作栏 */}
      {bulkActions.length > 0 && (
        <div className="bulk-actions-bar">
          {bulkActions.map(action => (
            <button
              key={action.key}
              onClick={action.onClick}
              disabled={selectedRows.length === 0}
              className="bulk-action-btn"
            >
              {action.label}
            </button>
          ))}
        </div>
      )}

      {/* 表格主体 */}
      <table className="base-table">
        <thead>
          <tr>
            {/* 行选择列 */}
            {onRowSelect && (
              <th>
                <input
                  type="checkbox"
                  checked={selectedRows.length === data.length && data.length > 0}
                  onChange={handleSelectAll}
                />
              </th>
            )}
            {/* 自定义列头 */}
            {columns.map(col => (
              <th key={col.key}>
                {col.label}
                {/* 排序按钮（按需显示） */}
                {col.sortable && (
                  <button onClick={col.onSort} className="sort-btn">
                    ↑↓
                  </button>
                )}
              </th>
            ))}
            {/* 行操作列 */}
            {rowActions.length > 0 && <th>操作</th>}
          </tr>
        </thead>
        <tbody>
          {loading ? (
            <tr>
              <td colSpan={columns.length + (onRowSelect ? 1 : 0) + (rowActions.length > 0 ? 1 : 0)}>
                加载中...
              </td>
            </tr>
          ) : data.length === 0 ? (
            <tr>
              <td colSpan={columns.length + (onRowSelect ? 1 : 0) + (rowActions.length > 0 ? 1 : 0)}>
                暂无数据
              </td>
            </tr>
          ) : (
            data.map(row => (
              <tr key={row.id}>
                {/* 行选择单元格 */}
                {onRowSelect && (
                  <td>
                    <input
                      type="checkbox"
                      checked={selectedRows.includes(row.id)}
                      onChange={() => onRowSelect(row.id)}
                    />
                  </td>
                )}
                {/* 自定义单元格内容 */}
                {columns.map(col => (
                  <td key={col.key}>
                    {col.render ? col.render(row) : row[col.key]}
                  </td>
                ))}
                {/* 行操作按钮 */}
                {rowActions.length > 0 && (
                  <td className="row-actions">
                    {rowActions.map(action => (
                      <button
                        key={action.key}
                        onClick={() => action.onClick(row)}
                        className="row-action-btn"
                      >
                        {action.label}
                      </button>
                    ))}
                  </td>
                )}
              </tr>
            ))
          )}
        </tbody>
      </table>

      {/* 分页栏 */}
      {onPageChange && (
        <div className="pagination-bar">
          <span>
            第 {currentPage} 页 / 共 {Math.ceil(totalCount / rowsPerPage)} 页
          </span>
          <button
            onClick={() => onPageChange(currentPage - 1)}
            disabled={currentPage === 1}
          >
            上一页
          </button>
          <button
            onClick={() => onPageChange(currentPage + 1)}
            disabled={currentPage >= Math.ceil(totalCount / rowsPerPage)}
          >
            下一页
          </button>
          <select
            value={rowsPerPage}
            onChange={(e) => onRowsPerPageChange(Number(e.target.value))}
          >
            <option value={10}>10条/页</option>
            <option value={20}>20条/页</option>
            <option value={50}>50条/页</option>
          </select>
        </div>
      )}
    </div>
  );
}

3. 页面中组合使用 #

在业务页面中，只需引入hooks和基础组件，配置特定业务的筛选表单、列定义、操作逻辑即可：

// pages/UserList.js
import { useState } from 'react';
import useTableData from '../hooks/useTableData';
import BaseTable from '../components/BaseTable';
import { fetchUsers, deleteUser } from '../api/user';

export default function UserList() {
  const {
    dataLoading,
    data,
    totalCount,
    filters,
    updateFilters,
    paging,
    setPage,
    setRowsPerPage,
    refresh
  } = useTableData(fetchUsers);

  const [selectedRows, setSelectedRows] = useState([]);

  // 行选择逻辑
  const handleRowSelect = (rowId) => {
    setSelectedRows(prev => 
      prev.includes(rowId) 
        ? prev.filter(id => id !== rowId) 
        : [...prev, rowId]
    );
  };

  // 全选/取消全选逻辑
  const handleSelectAllRows = (allIds) => {
    setSelectedRows(allIds);
  };

  // 批量删除
  const handleBulkDelete = async () => {
    await Promise.all(selectedRows.map(id => deleteUser(id)));
    // 操作完成后触发数据刷新
    refresh();
    setSelectedRows([]);
  };

  // 列配置（支持自定义渲染）
  const columns = [
    { key: 'name', label: '用户名', sortable: true },
    { key: 'email', label: '邮箱' },
    { 
      key: 'status', 
      label: '状态',
      render: (row) => (
        <span className={`status-${row.status}`}>
          {row.status === 'active' ? '已激活' : '已禁用'}
        </span>
      )
    }
  ];

  return (
    <div className="page-container">
      {/* 自定义筛选表单 */}
      <div className="filters-form">
        <input
          type="text"
          placeholder="搜索用户名"
          value={filters.name || ''}
          onChange={(e) => updateFilters({ name: e.target.value })}
        />
        <button onClick={() => updateFilters({ status: 'active' })}>只看已激活用户</button>
        <button onClick={() => updateFilters({ status: 'disabled' })}>只看已禁用用户</button>
        <button onClick={() => updateFilters({})}>重置筛选</button>
      </div>

      {/* 表格组件 */}
      <BaseTable
        data={data}
        loading={dataLoading}
        columns={columns}
        selectedRows={selectedRows}
        onRowSelect={handleRowSelect}
        bulkActions={[
          { key: 'delete', label: '批量删除', onClick: handleBulkDelete }
        ]}
        rowActions={[
          { key: 'edit', label: '编辑', onClick: (row) => console.log('编辑用户:', row) },
          { 
            key: 'delete', 
            label: '删除', 
            onClick: async (row) => { 
              await deleteUser(row.id); 
              refresh(); 
            } 
          }
        ]}
        onPageChange={setPage}
        onRowsPerPageChange={setRowsPerPage}
        currentPage={paging.page}
        rowsPerPage={paging.rowsPerPage}
        totalCount={totalCount}
      />
    </div>
  );
}

方案对比与选型建议 #

优先推荐组合式Hooks+基础Table方案，既能最大化复用逻辑，又能通过props灵活配置不同页面的UI差异，同时通过refresh方法完美解决外部操作触发数据刷新的问题。

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