Component Refactoring 是一个面向 React 开发者的重构技能，用于处理高复杂度的 React 组件。它提供了一套经过验证的重构模式与工作流，帮助开发者将庞大、难以维护的组件拆解为更清晰、更易维护的结构。
用途
该技能主要用于重构高复杂度的 React 组件。当组件的圈复杂度（cyclomatic complexity）大于 50，或代码行数超过 300 行时，该组件应被视为重构候选对象。
适用时机
- 当
bun analyze-component显示组件复杂度较高时。 - 当用户要求进行“代码拆分（code splitting）”、“Hook 提取（hook extraction）”或“清理（cleanup）”时。
- 当某个组件文件超过 300 行代码时。
核心重构模式
1. 提取自定义 Hook
目标：将 UI 与状态/逻辑分离。
重构前，组件内部直接管理状态与副作用，例如在 UserList 中使用 useState 和 useEffect 获取用户数据并处理加载状态。重构后，将数据获取逻辑提取到独立的 useUsers Hook 中（例如使用 useQuery），组件本身只负责渲染，通过 Hook 获取 data 和 isLoading，并将视图部分交给 UserListView 组件。
2. 提取子组件
目标：拆解单体式 JSX。
重构前，Dashboard 组件在一个返回结构中包含 header、aside、main 以及多个 section。重构后，将其拆分为 Layout、DashboardHeader、DashboardSidebar、DashboardContent、StatsWidget、ActivityFeed 等独立组件，使结构更清晰。
3. 简化条件逻辑
目标：减少嵌套层级，避免 if/else 检查实现细节。
- 使用查找表（Maps/Objects）替代 Switch/If-Else 链。
- 使用守卫语句（Guard Clauses，即提前返回）避免深层嵌套。
4. 提取模态框管理
目标：集中管理模态框状态与逻辑。
- 如果模态框被全局复用，将其定义移至通用的
<ModalManager />或 context 中。 - 如果模态框仅属于单个组件，则保留本地的
isOpen状态，但将模态框内容提取到单独文件中。
工作流
- 分析（Analyze）：运行复杂度分析，或手动审查文件。
- 规划（Plan）：识别接缝线（逻辑与 UI 之间、区块与区块之间）。
- 提取（Extract）：为 Hook 或组件创建新文件。
- 集成（Integrate）：用导入替换原始代码。
- 验证（Verify）：确保功能保持一致，且测试通过。
限制
资料中未提供关于该技能的具体安装方式、依赖要求、支持平台或收费信息。