前端
组件Component
你可能会问
组件到底是什么？为什么工程师总在说「把它拆成组件」？
简单来说
可独立复用的界面单元，例如按钮、导航栏或文章卡片。
Button.def
label加入购物车
color
导航栏加入购物车
文章卡片加入购物车
登录表单加入购物车
三个实例，跟着定义一起变01 · 先这样理解
把抽象概念放进真实场景
可独立复用的界面单元，例如按钮、导航栏或文章卡片。
换个角度想组件像乐高积木：同一款积木块可以拼进城堡，也可以拼进飞船。块的形状和拼法是固定的，拼在哪里、拼多少次由你决定。
02 · 点击演示
一个按钮组件，怎样复用出整个页面？
突出显示的部分，就是当前概念在整条流程中负责的位置。
- Button 组件定义
label按钮文字color主色onClick点击行为 labelcolor
导航栏Button
文章卡片Button
登录表单Button
- 同一个 Button · 三个位置导航栏文章卡片登录表单
1 / 4
Define · 把一段界面封装成组件
03 · 放进真实任务
什么时候会遇到它
保持一致
全站的按钮和弹窗长得一样，因为它们来自同一份定义。
快速搭建
新页面大多是把现成组件重新组合，而不是从零开始写。
隔离改动
改导航栏只动它自己的文件，不会波及页面的其他部分。
04 · 想一想
用一个问题检查理解
站点 20 个页面的按钮都要从直角改成圆角。用了组件和没用组件，工作量差在哪里？
查看答案
有按钮组件时，只改这一个组件的样式，20 个页面同时生效；没有组件，就要找出每一处按钮逐个修改，还很容易漏掉几个。
最容易踩的坑
拆组件是为了复用和隔离，不是越碎越好。只出现一次、也不会再变的界面，硬拆成一层层组件反而更难读。