第七章：组件之城 · 重构世界的拼图术
剧情引入：废墟中的拼图城市
事件风暴结束，林昊被导师零号引领至一座断壁残垣的城市——传说中的组件之城（Component City）。这里曾是一座井然有序、功能强大的前端文明遗迹，但如今却被混乱的“复制粘贴开发法”摧毁。
零号说：“林昊，你要重建这座城，用组件拼图术将前端世界重新组装！”
什么是组件？
在前端中，组件（Component）是一块具有特定功能、样式、结构的可复用单元。每个按钮、表单、导航栏都可以封装成组件。
就像拼图，页面可以由多个组件拼接而成：
[Header]
[Sidebar] [Content]
[Footer]
用函数封装组件：从重复中解放
林昊发现页面中有许多重复的“用户卡片”：
<div class="card"><h3>林昊</h3><p>冒险者 · 编号001</p>
</div><div class="card"><h3>艾拉</h3><p>前端女巫 · 编号002</p>
</div>
导师零号提示他：“提取成函数，减少重复！”
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（属性） 的思想雏形。
function Button(text, color) {return `<button style="background:${color};">${text}</button>`;
}document.body.innerHTML += Button("点击我", "tomato");
组件就像函数，输入 props → 输出结构，变得灵活、通用。
组件嵌套：拼图之间的协作
林昊学会封装多个组件，再组合成页面：
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）、数据绑定与响应式世界的奥秘……