本章总览

Ink 终端 UI 专题深入渲染管线：React → Yoga → ANSI。理解后你才知道为何 TUI 也会「重渲染」。

总览图

渲染图表中…

学完本章你应该能

• 说出 REPL 核心屏幕
• 理解 resize 触发 re-render

核心概念（先读懂这些）

终端 UI 的状态管理

与 Web 不同，每帧可能全屏重绘。性能敏感，故大量 memo。

Ink 渲染管线

渲染图表中…

终端事件分发

渲染图表中…

Ink 渲染管线（文字版）

React Component Tree (REPL.tsx)
  → Ink reconciler
  → Yoga layout engine
  → ANSI escape sequence generation
  → stdout → 终端显示

核心屏幕

屏幕	文件	行数
REPL	screens/REPL.tsx	5006
Setup	setup.ts	—
Permission Dialog	components/permissions/	—

components 子目录

目录	文件	行数
permissions	53	12,214
messages	45	6,073
PromptInput	21	5,182
agents	27	4,552
tasks	14	3,958
mcp	14	3,941
CustomSelect	10	3,029
Settings	4	2,577
LogoV2	15	2,497
design-system	16	2,254
Spinner	13	1,488
FeedbackSurvey	11	1,394
hooks	6	1,250
diff	3	956
teams	2	795

本章小结与延伸

Ink 章 + module-ui 配合阅读。 继续学习：

• UI 层