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

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

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

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

什么是组件？

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

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

javascript 复制代码

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

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

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

html 复制代码

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

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

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

javascript 复制代码

function createUserCard(name, title, id) {
  return `
    <div class="card">
      <h3>${name}</h3>
      <p>${title} · 编号${id}</p>
    </div>
  `;
}

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

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

Props：传递组件的灵魂

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

javascript 复制代码

function Button(text, color) {
  return `<button style="background:${color};">${text}</button>`;
}

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

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

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

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

javascript 复制代码

function Header(title) {
  return `<header><h1>${title}</h1></header>`;
}

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

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

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

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

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

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

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

例子：不要写一个 300 行的 <Page>，而要拆成 <Nav>, <Article>, <Footer> 等。

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

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

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

🧩 实战任务 · 组件训练营

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

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

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