第七章：组件之城 · 重构世界的拼图术

剧情引入：废墟中的拼图城市

事件风暴结束，林昊被导师零号引领至一座断壁残垣的城市——传说中的组件之城（Component City）。这里曾是一座井然有序、功能强大的前端文明遗迹，但如今却被混乱的“复制粘贴开发法”摧毁。

零号说：“林昊，你要重建这座城，用组件拼图术将前端世界重新组装！”

什么是组件？

在前端中，组件（Component）是一块具有特定功能、样式、结构的可复用单元。每个按钮、表单、导航栏都可以封装成组件。

就像拼图，页面可以由多个组件拼接而成：

[Header]
[Sidebar]  [Content]
[Footer]

用函数封装组件：从重复中解放

林昊发现页面中有许多重复的“用户卡片”：

<div class="card">
  <h3>林昊h3>
  <p>冒险者 · 编号001p>
div>

<div class="card">
  <h3>艾拉h3>
  <p>前端女巫 · 编号002p>
div>

导师零号提示他：“提取成函数，减少重复！”

function createUserCard(name, title, id) {
  return `
    

      
${name}
      
${title} · 编号${id}
    
  `;
}

document.body.innerHTML += createUserCard("林昊", "冒险者", "001");
document.body.innerHTML += createUserCard("艾拉", "前端女巫", "002");

函数式组件 是组件化思想的起点！

Props：传递组件的灵魂

每一个组件都应该从外界接收数据，这就是 props（属性） 的思想雏形。

function Button(text, color) {
  return `${color};">${text}`;
}

document.body.innerHTML += Button("点击我", "tomato");

组件就像函数，输入 props → 输出结构，变得灵活、通用。

组件嵌套：拼图之间的协作

林昊学会封装多个组件，再组合成页面：

function Header(title) {
  return `
${title}`;
}

function Footer() {
  return `
© 组件之城 · 林昊`;
}

function Layout(content) {
  return `
    ${Header("欢迎来到组件之城")}
    
${content}
    ${Footer()}
  `;
}

document.body.innerHTML = Layout("
这里是主内容区域
");

组件可以组合、嵌套，构成更复杂的界面。

组件拆分原则：保持小而美

导师零号授予三条“拼图圣律”：

1. 单一职责（Single Responsibility）：每个组件只做一件事
2. 可复用（Reusable）：组件应能传参复用
3. 独立封装（Encapsulation）：组件内部结构应对外透明

例子：不要写一个 300 行的 ，而要拆成

,

,

等。

迈向现代组件化：React 的影子

林昊远远望见一道奇特光门，上面刻着 “React” 的符号。

导师微笑着说：“这只是你掌握拼图术的开始，前方还有 JSX、生命周期、状态管理……不过你已具备了构建组件世界的基本能力。”

---

实战任务 · 组件训练营

1. 编写一个 createCard(name, job, level) 组件函数，展示角色卡片；
2. 编写一个 Button(label, color) 组件，可复用多个不同颜色的按钮；
3. 创建一个 Page(content) 组件组合 Header + Footer + 主体内容；
4. 按单一职责原则，将页面拆成多个小组件组合而成；
5. 试着用纯 JS 模拟 props 的传入与数据变化的影响。

---

预告：第八章《数据幻域》

组件搭建好后，林昊将前往神秘的“数据幻域”，探索状态（state）、数据绑定与响应式世界的奥秘……