← FC Coder · HomePhase 05 · Lesson 60 · 60 min
Lesson60
Phase Five · Showcase · Matchday 60 · Re-organize

大重构 baby
不改行为 · 改结构

Today's 3 Jobs · 今天这三件事
  1. 01
    提取 useSquad hook · lib/use-squad.ts
    state + 方法
  2. 02
    拆 4 个子组件
    header/roster/panel/save
  3. 03
    🌟 CI 全绿 = 重构没破
    护栏

CI 护栏装好 = 重构最安全的时候。fantasy 拆成 useSquad hook + 4 子组件。主页 50 行内。每个组件做一件事。CI 全绿 = 没破。

Concept

重构 · 不改行为

拆法
// 每个组件做一件事
hook
useSquad · state + 方法
4 组件
header / roster / panel / save
护栏
CI 全绿 = 安全
Half 2

hook · 拆 · 组合 · 验证

01useSquad hook
01Min

跑 CI 确认绿(基线)

重构前 baseline。
02Min

lib/use-squad.ts · 包 state + addPlayer/removePlayer/chemistry/errors

导出 hook。
024 子组件
03Min

components/fantasy/squad-header.tsx

标题 + 计数 + 化学度。
04Min

components/fantasy/player-roster.tsx

左边 22 张卡。
05Min

components/fantasy/squad-panel.tsx

右边阵容 + errors + 保存。
06Min

fantasy/page.tsx 重写 = 用 4 组件 + useSquad

主页 50 行内。
03CI + AI test
07Min

🌟 跑 CI · 绿 = 重构没破

重构成功的标志。
08Min

AI Trust:写 useSquad test(渲染 hook · 测 addPlayer/limit)

Cmd+K · '@testing-library/react renderHook test'。
09Min

📸 截图行数对比 + CI 绿

Phase 5 第 5 张。
讲给爸爸听

3 题

01重构是什么?Hint ↓

不改行为 · 改结构。

02拆组件原则?Hint ↓

每个组件做一件事。

03CI 在重构里干啥?Hint ↓

护栏 · 改坏立刻知道。

温度计

评分

今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨

代码组织清楚了 —— 别人能跟。

9 步没打勾。

Next · Lesson 61 · 性能基础 →