组件
Component也常被叫作：界面组件UI 组件部件积木块控件
「把一块界面连同它的样子和反应打包成一块积木，哪里要用就搬一块，改一处全部跟着变。」
组件 Component
可复用的界面积木：界面 + 样式 + 行为打包成一块，写一次、用很多处。
组件是把「一块界面 + 它的样式 + 它的行为」打包成的一块积木。比如「用户卡片」：头像、名字、简介、关注按钮，连点击后的反应一起做成一个组件。页面哪里需要用户卡片，就放一块这个积木。
组件最大的好处是「改一处，处处生效」。你要把卡片上的按钮文案改掉，只需要改组件这一处，全站所有用到它的地方一起变——不用在十个页面里各找各改。这同时保证了长得一致：不会出现十个长得不一样的用户卡片。
组件靠「输入」区分彼此：同一块积木，喂给它不同的数据（谁的名字、谁的简介），显示就不同；它自己也能记住内部状态（比如「已关注」还是「未关注」）。所以对 AI 说「做成组件」，意思是：能复用、能传数据、改一处全变——而不是在每个页面各抄一份。
长什么样 真实可交互，不是截图
两张卡片用的是同一份组件代码，只是喂了不同的数据。这就是组件和复制粘贴的区别：改一处，全站所有用到它的地方同步变。
拆开看，里面有这几块
-
1
可配置项 Props
从外部传给组件的数据，决定这块积木显示什么（名字、图片、文案）。
-
2
内部状态 State
组件自己记住的东西，如「已关注 / 未关注」「展开 / 收起」。
-
3
外观 Style
组件自带的长相，保证每个使用处长得一致。
-
4
使用位置 Usage
页面里放置这块积木的地方，可以有多个。
常见的有哪几种
只按传入数据显示，自己不记任何东西。
用在：头像、标签、卡片
记住自己的状态并响应点击和输入。
用在：开关、折叠面板、表单控件
容易搞混？这样区分
组件是积木，页面是拼好的成品。一个页面由很多组件组成；组件可以跨页面反复用，页面不行。
组件管「界面怎么显示」，模块管「代码怎么组织」。做网页时你听到最多的会是组件——它直接对应你看见的那块界面。
什么时候用得上
头像、名字、按钮做成一个组件，一处定义，处处生效。
一个确认弹窗组件，所有删除、危险操作都调它，文案按场景传入。
注册、编辑、邀请共用一套输入组件，改一处全站一致。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【范围】把 [页面里反复出现的某块界面：用户卡片 / 确认弹窗 / 搜索栏] 做成可复用组件，并替换现有使用处 【目标】 - 组件能通过「可配置项」接收数据（名字、图片、文案），不要写死内容 - 组件自带自己的样式和行为，不依赖外部页面给它贴样式 - 替换所有现有使用处，视觉和行为和原来保持一致 【边界】 - 不要改页面的整体布局和配色，不要动我没提到的功能 - 不要用复制粘贴代替组件：每个使用处必须引用同一个组件 - 需要外部数据时，先告诉我组件要接收哪些可配置项，确认后再动手 【交付】 1. 组件文件路径，以及它暴露了哪些可配置项 2. 全站一共几个使用处、各在哪个文件 3. 改组件一处（比如按钮文案），刷新后列出你验证过的所有使用处是否一起变 4. 哪部分你没验证，明确说
「不要用复制粘贴代替组件」是核心——AI 最容易把三处一样的界面抄三遍然后声称「组件化」。交付第 3 条「改一处全变」是组件唯一硬验收。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 找到至少两个使用该组件的位置，确认它们外观、行为一致。
- 改组件一处（比如按钮文案或背景色），刷新后所有使用处一起变——这是复用的硬证据。
- 给组件换不同数据（不同名字、不同图片），确认显示跟着数据走，不是写死的。
- 打开元素面板看两个使用处的结构是否来自同一来源；让 AI 指出组件文件路径，你自己核对。
- 改完组件后，全站主要页面走一遍，确认没有把无关页面带崩。
它常这么糊弄你
- 「已经组件化了」——其实每个页面各抄了一份代码，改一处只有一处变。用「改一处全变」当场验证。
- 「三处长得一样」——一样可能是复制粘贴的结果，不是组件。复制粘贴改起来要改三遍，组件只改一遍。
- 「组件没问题，是页面的事」——两处显示不一致时，先查是不是同一个组件、参数传没传对，别接受甩锅。
- 把一个巨型页面整个叫「组件」——那只是给页面换了名字，没有可复用单元。要求拆出真正能跨处复用的块。
组件能验到「主路径」层：「改一处、多处全变」是在真实页面上可以亲手验证的动作。到「生产」层，只是把同样的检查放到线上环境再跑一遍。
考考你 选一个你觉得对的
怎么证明 AI 真的把「用户卡片」做成了组件，而不是复制了三份？
「改一处全变」是复用的唯一硬证据。三个卡片一样长，可能是复制粘贴的结果；口头保证和代码长短都不是复用证明。