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