React函数组件排序实现：类组件排序逻辑转函数组件方案

核心转换逻辑 #

类组件转函数组件时，状态管理和方法定义的对应规则如下：

• 类组件中this.state.xxx的状态读取，替换为函数组件中useState声明的响应式变量
• 类组件中this.setState()的状态更新操作，替换为useState返回的状态更新函数
• 类组件的自定义实例方法，直接改为函数组件内部的普通函数即可

注意：原类组件代码中直接调用Array.sort()属于原地排序，会修改原状态数组，可能引发不可预期的渲染问题，转换时我们补充了数组浅拷贝操作规避这个问题。

转换后完整代码 #

首先在函数组件内引入useState并声明列表状态：

import { useState } from 'react';

function YourComponent() {
  // 声明列表状态，初始值和原类组件state中的listGames保持一致
  const [listGames, setListGames] = useState([]);

  // 平台升序排序方法
  const onSortByPlatformAsc = () => {
    const sortedList = [...listGames].sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );
    setListGames(sortedList);
  };

  // 平台降序排序方法
  const onSortByPlatformDesc = () => {
    const sortedList = [...listGames].sort((a, b) =>
      a.platform.localeCompare(b.platform)
    ).reverse();
    setListGames(sortedList);
  };

  // 剩余组件逻辑...
}

逻辑对齐说明 #

原有排序的核心比对逻辑完全保留，只替换了React框架相关的状态读写API，保证功能和类组件实现完全一致。

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