← FC Coder · HomePhase 05 · Lesson 61 · 60 min
Lesson61
Phase Five · Showcase · Matchday 61 · Measure First
性能基础
测量先 · 优化后
Today's 3 Jobs · 今天这三件事
- 01React DevTools Profiler 录制测量先
- 02PlayerCard 加 React.memoprops 不变跳过
- 03🌟 useMemo 包 chemistry派生缓存
React DevTools Profiler 录一段 · 看哪个组件红色慢。React.memo 给 PlayerCard · useMemo 给 chemistry 派生缓存。心法:不瞎加 memo · 测量后才加。
Concept
测量 + memo
// 不瞎加 · 测了再加
Profiler
red / gray · 看真慢
React.memo
props 不变跳过
useMemo
deps 不变缓存
Half 2
装 · 测 · memo · 对比
01Profiler 测量
01Min
Chrome 装 React DevTools 扩展
(父亲提前装)。
02Min
/fantasy · Profiler tab · Record · 操作 · Stop
看哪个组件红 / 灰。
03Min
发现 22 个 PlayerCard 全部重渲(多余)
只 1 个改 · 其他白渲。
02memo + useMemo
04Min
PlayerCard = React.memo(function PlayerCard ...)
props 不变跳过。
05Min
fantasy: const chemistry = useMemo(() => calc(squad), [squad])
squad 不变跳过 55 对握手。
06Min
再 Profiler · 看对比
多数变灰 · 只改的红。
03AI 找慢点
07Min
AI Trust: 找另一个慢点 · 给优化建议
Cmd+K · '看 fantasy 还有什么慢的'。
08Min
📸 截图前后 Profiler
Phase 5 第 6 张。
讲给爸爸听
3 题
01Profiler 怎么用?Hint ↓
record → 操作 → stop → 看每组件渲染时间。
02memo 是什么?Hint ↓
props 不变跳过重渲。
03为什么不全加 memo?Hint ↓
复杂度。先测再加。心法:测量 → 优化。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0