商品卡、文章卡、用户条目：图片、标题、副标题、操作按钮结构相同，数据字段不同，用 props 传入。
界面与交互 · 网页基础
组件Component
把重复的界面和行为封装成独立单元；修改一次，所有使用它的地方都能同步更新。
改组件本体，看使用处同步变
组件把稳定结构和行为收拢，差异从 props 进入。改一处本体，所有使用处一起变——这就是「只维护一份」的来源。
场景：ProductCard 是商品卡的组件本体。改它的按钮文案或圆角，已有使用处立即同步；点「再加一处使用」看复用计数长在物件上。
组件本体ProductCard
image · title · price · action复用 2 处action = 加入清单圆角 = 开
- 首页加入清单帆布包¥29
props → title=帆布包 · price=¥29 - 搜索结果加入清单水杯¥49
props → title=水杯 · price=¥49
对照：组件本体的按钮文案「加入清单」、圆角（开），应与上方每个使用处实例的按钮完全一致；改一处，2 处一起变。
组件 ProductCard 现在被 2 处复用。改本体的按钮文案或圆角，已有使用处会同步；点「再加一处使用」看复用计数长。下一步：先试试改按钮文案或圆角。
抽组件时要盯这些
实验台证明的是机制；真正抽组件时，用这五条检查边界。
- 稳定结构 + 变化数据多处用同样的图片、标题、价格、按钮结构，只是数据不同——把结构抽成组件，数据设计成 props。
- 差异靠 props，不靠复制粘贴两处实例的 title、price 各自传入；按钮文案、圆角这类统一规则放组件本体，改一次全部同步。
- 复用次数要看得见一个组件被几处复用、改一处几处跟着变，是它值不值得抽的依据；实验台里复用计数就长在使用处列表上。
- 命名说用户看见的东西组件叫 ProductCard，不叫 FlexColumnBox；名字对应它渲染出的物件，而不是技术实现细节。
- 同一结构只出现一次时先不抽如果某段界面全站只出现一次，且没有第二处会复用的迹象，先写直白；强行抽反而多一层跳转。
什么时候抽组件，什么时候别硬抽
看结构和变化的规则，而不是看页面名字或元素标签是否相同。
多处都要「加入清单」，但成功后各自刷新不同列表；视觉和基础状态放组件，页面用回调决定后续。
两个区域都有一个标题，但信息层级、排版、操作规则都不同；硬合成万能组件会比复制更难维护。
某段布局只用在一处，且没有会复用的迹象；先写直白，等第二处真出现再抽，避免过早抽象。
怎么抽：从重复结构到可复用单元
从识别重复到验证同步的最短路径。
- 圈出重复结构：标出两处以上长得一样、行为一样的界面区块。
- 分清稳定与变化：固定不变的部分（版式、按钮规则）留给组件；会变的部分（标题、价格、图片）写成 props。
- 给组件起一个看名字就懂的名字（ProductCard），列出它的 props 清单（title、price、onAdd）。
- 在原来每处传入各自的 props 数据，删掉复制的重复结构。
- 改组件本体的一个细节（按钮文案或圆角），验证所有使用处一起变——和实验台里一样。
正反例：同一组商品展示，只改一个关键选择
目标都是展示商品。差别只在「是否真的复用了同一个组件」。
首页、搜索、推荐都渲染 ProductCard，只传入不同 title 与 price；按钮文案和圆角由组件统一。改按钮文案一次，三处同时更新。
这样抽侧栏推荐的信息层级、图片尺寸、操作规则都和商品卡不同，却为「少写代码」合并；改商品卡的按钮，侧栏的标签也跟着错位，改一处崩两处。
别硬塞快速自测
两处界面看起来有点像，下面哪种最值得抽成同一个组件？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。