React中如何按自定义指定顺序对表格数据排序？

核心实现不需要引入额外依赖，基于原生数组sort方法配合权重映射即可完成，React 侧只需要保证不直接修改原状态数据、排序后结果传入表格组件渲染即可。

实现步骤 #

• 第一步：定义自定义排序的权重映射，按照给出的优先级顺序，给每个状态值分配从小到大的数字权重，数字越小排序越靠前
• 第二步：编写排序逻辑，排序前先对原数组做浅拷贝（避免sort直接修改原数组违反React状态不可变原则），对比两个元素对应sort字段的权重值返回排序结果
• 第三步：将排序完成后的数据传入表格组件渲染，推荐用useMemo缓存排序结果，只有原数据或者排序规则变化时才重新计算，减少不必要的性能损耗

完整代码示例 #

import { useMemo } from 'react';

// 原始待排序数据
const rawData = [
  {
    name: 'Harry',
    sort: 'no c',
  },
  {
    name: 'Don',
    sort: 'no s',
  },
  {
    name: 'Arc',
    sort: 'pub',
  },
  {
    name: 'Park',
    sort: 'ready',
  },
];

export default function SortTable() {
  // 排序后的数据，用useMemo缓存
  const sortedData = useMemo(() => {
    // 1. 定义权重映射，顺序严格按照要求：no s > no c > ready > pub
    const sortWeight = new Map([
      ['no s', 0],
      ['no c', 1],
      ['ready', 2],
      ['pub', 3],
      // 可以自定义不在规则内的异常值权重，比如给99默认排最后
      ['default', 99]
    ]);

    // 2. 浅拷贝原数组后排序，不修改原始数据
    return [...rawData].sort((a, b) => {
      const weightA = sortWeight.get(a.sort) ?? sortWeight.get('default');
      const weightB = sortWeight.get(b.sort) ?? sortWeight.get('default');
      // 权重小的排前面
      return weightA - weightB;
    });
  }, [rawData]);

  // 3. 把sortedData传给你的表格组件渲染即可
  return (
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        {sortedData.map(item => (
          <tr key={item.name}>
            <td>{item.name}</td>
            <td>{item.sort}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

排序结果验证 #

上述代码执行后，表格渲染顺序为：

1. Don（no s）
2. Harry（no c）
3. Park（ready）
4. Arc（pub）
   完全匹配指定的优先级顺序。

注意：如果后续要调整排序优先级，只需要修改sortWeight里的权重值对应关系即可，不需要改动排序逻辑和渲染逻辑。如果需要支持点击表头切换升序/降序，只需要在返回权重差的时候乘上1或者-1切换方向就行。

内容的提问来源于stack exchange，提问作者think-13