前言：我和“祖传 React 组件”之间的奇妙相遇

说实话，我打开项目那一瞬间，脑子里只有两个字——惊呆。

先别急，我先把现场还原给你们。

我打开项目，找到他说的那个“核心组件”。第一眼，我以为是压缩后的代码——一个文件，2000多行。

第二眼，我确认了这是人写的。

第三眼，我想起了那个著名的笑话：这段代码，只有上帝和它的原作者kan得懂，而现在原作者跳槽了上帝说他也kan不懂。

哈哈，那种感觉就像是走进了一个黑暗森林，却只带了一盏快要掉电的手电筒。

第一步：源码考古——先给这座“大山”画 CT 片

我没有急着改代码。我知道，对于一个陌生的系统，直接动手等于自杀。

于是我打开 Xmind，给这段代码画了个思维导图。

把所有函数、状态、事件dou列出来——结果发现，这玩意儿根本不是“组件”，geng像是个装满螺丝钉的大箱子，里面啥dou有。

// 体检报告
组件 
├── 初始化 
│   ├── 获取用户列表  → 存入 state.users
│   ├── 获取部门列表  → 存入 state.depts
│   └── 检查权限 → 存入 state.canEdit
├── 状态管理 
│   ├── users, depts, roles...
│   └── loading, error, modalVisible...
├── 事件处理 
│   ├── handleSearch, handleAdd...
│   └── handleExport, handlePageChange...
└── 副作用 
    ├── 监听 search 变化 → 重新搜索
    └── 监听 page 变化 → 重新加载

kan到这里你可Neng会想：“这玩意儿咋这么乱？”

对呀，就是这么乱。于是我给自己定了一个月的“慢性治疗”计划——一步步拆解、提炼、重构。

第二步：把 UI 区块化——先从外层切起

咱就是说这种巨型页面Zui容易切的，就是那些视觉上明显独立的块儿。

比如搜索栏、工具栏、表格、分页和弹窗，这几块儿基本Ke以直接抽成子组件。

// components/SearchBar.jsx
const SearchBar =  => {
  return (
    

      
      搜索
    
  );
};
SearchBar.propTypes = {
  keyword: PropTypes.string,
  onSearch: PropTypes.func.isRequired,
  onKeywordChange: PropTypes.func.isRequired,
};
export default SearchBar;

第三步：自定义 Hook 出场——业务逻辑搬进小盒子

我把获取用户列表、分页、搜索这些副作用全塞进了 useUsers。不对不对，应该叫 useUserData 才geng贴切，不过懒得改文件名啦 😅。

// hooks/useUsers.ts
import { useState, useEffect } from 'react';
import { userService } from '../services/userService';
export const useUsers =  => {
  const { initialPage = 1, initialPageSize = 10, autoLoad = true } = options;
  const  = useState;
  const  = useState;
  const  = useState({
    page: initialPage,
    pageSize: initialPageSize,
    total: 0,
  });
  const  = useState;
  const fetchUsers = async  => {
    setLoading;
    try {
      const params = { ...pagination, ...filters };
      const result = await userService.getUsers;
      setUsers;
      setPagination);
    } catch  {
      console.error;
    } finally {
      setLoading;
    }
  };
  useEffect => {
    if  fetchUsers;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, );
  const search = kw => {
    setFilters;
    setPagination);
  };
  const changePage =  => {
    setPagination(p => ({
      ...p,
      page,
      pageSize: size || p.pageSize,
    }));
  };
 return { users, loading, pagination, search, changePage, refresh: fetchUsers };
};

第四步：再来点类型安全——用 TypeScript 把“自文档化”写进去

老实说一开始我只想加点注释就完事儿。可是后来发现，同事们总是问：“这个字段到底是干啥的？”

于是我把所有模型搬到 /types/user.ts, 用 enum 把状态和角色写死，让 IDE Neng帮我们自动补全。

// types/user.ts
export interface User {
  id: string;
  username: string;
  nickname: string;
  email: string;
  phone: string;
  avatar?: string;
  status: UserStatus;
  role: UserRole;
  department: Department;
  createdAt: string;
  updatedAt: string;
  lastLoginAt?: string;
}
export enum UserStatus {
  INACTIVE = 'inactive', // 未激活
  ACTIVE   = 'active',   // 正常
  LOCKED   = 'locked',   // 锁定
  DELETED  = 'deleted', // Yi删除
}
export enum UserRole {
  VISITOR     = 'visitor',
  MEMBER      = 'member',
  MANAGER     = 'manager',
  SUPER_ADMIN = 'super_admin',
}
export interface Department {
  id: string;
  name: string;
  parentId?: string | null;
}

重构过程中的小插曲——别让自己太严肃

哈哈，说真的，这个月里我跟代码闹过不少矛盾：

有一次在 UserTable.tsx 里写错了 `` 的闭合标签，IDE 报错却一直找不到根源。我翻遍全仓库才发现，是因为前面忘了 import `Space` 😅。

"那个那个" 我居然在同一个文件里用了两套颜色映射，一套是中文，一套是英文。结果 UI 上颜色乱套，Zui后只Neng硬核统一成一个对象。

还有一次我在 hook 中用了 `setTimeout => {}, )` —— 那个空格后面竟然漏掉了毫秒数。跑起来根本不等啊！赶紧改成 `setTimeout => {}, 0)` 才好使。

#技巧五：批量导出功Neng怎么轻松加？

COPY 那段老代码真的太冗余。我把导出逻辑抽到 service 层，再在 Toolbar 加个按钮就搞定啦：

// services/userService.ts
export const exportUsers = async filters => {
  // 实际请求省略，只演示结构
  return await request;
};
// Toolbar.jsx 增加按钮

// 主页面里实现 handleBatchExport
const handleBatchExport = async  => {
   await exportUsers;
   message.success;
};

#量化指标对比——数据说话才靠谱嘛！

指标	重构前	重构后
文件大小	2000 行 / 单文件	6 个文件 / 平均300 行
可维护性大幅提升↓35%
测试覆盖率↑30%
新增功Neng耗时↓80%
Bug 回归率↓90%

#：从屎山到花园，只差一步勇气与方法论

COPY 那段老代码真的太丑，但只要按部就班，把 UI 拆成小块，把业务抽成 Hook，用 TypeScript 把类型写清楚，你会发现它慢慢变得像一座花园，而不是屎山。

Ru果你也正面对类似“祖传 React”项目：

- 给它画张 CT，弄清楚整体结构；

- 找自然切分点，把 UI 拆成独立组件；

- 用 Hook 把副作用封装；

- 引入 TypeScript 给每个变量贴上标签；

- Zui后跑一遍单元/集成测试，确保没有回归。

AFAIK，这套流程Neng帮你在一个月内把 “祖传” 改造成 “现代”。咱就是说这不只是技术活，geng是一场心理战——敢于直面屎山，然后笑着搬砖，你会发现其实并没有想象中那么恐怖。

* 小伙伴们Ru果还有别的屎山案例或者想聊聊怎么进一步优化性Neng，随时留言哈！我们一起扛过去！*

#温馨提示：保持好奇心与耐心，是每一次重构成功的不二法门 🚀️🚀️🚀️​.

---