Ink 驱动的 React CLI 指南

要解决的问题

写命令行工具时，很多人要重新学一套终端范式：原始的字符串拼接、手工管理光标位置、自己解析按键，最后代码散成一地。React 工程师手里明明有组件、状态和钩子，却只能另起炉灶。

终端 UI 也是 UI——这句话就是本技能的起点。它想让你用写 React 的心智模型去做交互式 CLI，而不是把前端经验丢掉。

技能如何工作

核心基于 Ink：把 React 渲染到终端，底层由 Yoga 负责 Flexbox 布局。技能把它拆成四步：

• 声明组件：用函数组件返回 JSX，元素直接对应终端里的布局和文字。
• 管理状态：用 useState / useReducer 持有交互状态，重渲染会自动反映到终端。
• 布局用 Flexbox：flexDirection、justifyContent 这些属性照搬前端经验，布局思维不用重学。
• 副作用与输入：用 useEffect 跑异步任务，用 useInput 捕获键盘，把交互拼起来。

适用场景包括带进度条、表单、列表的交互式 CLI，团队里 React 人多想复用技能，以及需要可组合的命令界面。

注意点与适用边界

几个常见的坑，值得提前知道：

• 把 CLI 当网页：终端没有 hover 和点击坐标，交互只能靠键盘，照搬 DOM 事件会失效。
• 重渲染抖动：频繁 setState 会让整屏刷新闪烁，需要节流或做局部更新。
• 异步阻塞：长任务没让出主循环，界面直接卡住；要拆成副作用加状态。
• 依赖体积：为一个小工具引入整套 React 生态，启动会变慢，按需精简。

收尾时对照一份检查清单：组件拆分清晰、键盘交互完整、长任务不阻塞渲染、退出时清理副作用。

需要说明的是，本技能属于开发方法论，AI 生成的内容应以 Ink 官方文档为准；复杂交互场景下，可维护性和退出清理比功能完成度更重要。