No.26核心核对于 2026-09-262 条来源

组件Component

一句话

组件是把一块界面连同它的样式和行为打包成的可复用单元，比如按钮、卡片、导航栏。

大白话

组件像乐高积木：一块做好的“卡片”积木可以在首页、列表页反复拼，改一处，所有用到它的地方一起变。

比喻的边界

乐高积木块块一样，组件却能接收不同的数据，显示不同的标题和图片，还能有自己的内部状态；拆得太碎反而难找难改。

拿去就能用

开始做

我的页面里有好几处。帮我把它做成一个组件，列出它需要从外面传入的数据和自己管理的状态，先给我看组件的用法示例，确认后再替换页面里的旧代码。

还差：重复的界面块，发给 AI 前记得换掉

出错了

我在子组件里改了商品数量，界面上的数字变了，但父页面算出的总价没变。我怀疑数据只改在了子组件自己的状态里，没通知父组件。先帮我确认数据从哪来、在哪改，再给修正方案。

想做深

我的项目有二十多个组件，风格越来越不统一。帮我盘点现有组件，找出可以合并的重复组件，整理成一份基础组件清单和命名规则，先给清单让我确认，再分批改。

别这样说

帮我把页面组件化。

这样说

我的商品列表页和收藏页各写了一遍几乎一样的商品卡片，改样式要改两次。帮我把卡片抽成一个可复用的组件，说明它需要接收哪些数据，然后替换这两处，页面效果保持不变。

差别：指出了重复在哪、为什么要抽，以及“效果不变”这条验收。

容易误解：

误解组件是某个框架专有的东西。

其实是组件是组织界面的一种思路；各个前端框架都有自己的组件写法，浏览器原生的 Web Components 也能做可复用的自定义元素。

展开专业理解

组件通常包括三样东西：从外部传入的数据（常叫 props）、自己管理的状态（state），以及用户操作触发的事件。父组件把数据传给子组件，子组件通过事件把变化告诉父组件。拆分组件的标准是能复用、职责单一，不是越小越好。