产品型网站案例外贸网站模板设计
主线回顾
第三章：JavaScript引擎 · 行为之火
支线
支线一 ·原能之核：语法起源
支线二 ·函数幻阶：语法召唤与逻辑封印
支线三 ·异步幻境 · 时间之缝的挑战
支线四 ·事件风暴 · 时序与响应的协奏
🎬 剧情设定：
组件之城是一座由无数独立却彼此协作的魔法建筑组成的都市。这里的建筑师们懂得“模块魔法”，他们能够把复杂的魔法体系拆解成独立组件，方便维护与复用。
城中有两大派系：
• 函数派，使用灵活、轻量的函数魔法
• 类派，传承古老、结构严谨的类魔法
林昊在城中拜访了两位大师：
• 函数派领袖·菲欧娜
• 类派长老·雷恩
🧩 组件基础：模块化的魔法构造
菲欧娜介绍了组件的基本理念：
“组件，就是能独立运作的小魔法器物。它们拥有输入（Props）和自身状态（State），并渲染输出。”
教学点：函数组件示范
function Greeting(props) {return <h1>你好，{props.name}！</h1>;
}// 使用
<Greeting name="林昊" />
- Props：组件的“输入”，只读
- 组件像函数，根据 Props 返回 UI 结构
⚔️ 类组件：古老而强大的魔法阵
雷恩展示了类组件的魔法架构：
class Greeting extends React.Component {render() {return <h1>你好，{this.props.name}！</h1>;}
}
- 通过 this.props 访问输入
- 类组件可以拥有生命周期和状态（后续章节详解）
🌟 状态魔法（State）的觉醒
林昊想让组件不仅能接受外部输入，还能自己“记忆”。
菲欧娜讲解了函数组件中的状态钩子：
import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>计数：{count}</p><button onClick={() => setCount(count + 1)}>点击+1</button></div>);
}
- useState 返回一对值：当前状态和更新函数
- 组件状态改变会触发 UI 重新渲染
🧙♂️ 组合与复用：打造复杂魔法阵列
雷恩补充：“组件可以嵌套与组合，造就无限可能。”
function App() {return (<div><Greeting name="林昊" /><Counter /></div>);
}
- 组件可以作为其他组件的子元素使用
- 组合是构建复杂页面的基石
⚙️ 第五节 · 练习任务：魔法工坊实操
- 创建一个函数组件 Welcome，接收 user 属性，显示欢迎语
- 编写一个计数器组件，支持增加和减少计数
- 设计一个组合组件，将欢迎组件和计数器放在一起渲染
- （进阶）尝试用类组件实现计数器，比较两者异同
📚 本章知识点总结
| 技能点 | 说明 |
|---|---|
| 组件概念 | UI 的模块化、可复用单元 |
| 函数组件 | 简洁，基于函数的组件定义 |
| 类组件 | 传统组件，拥有生命周期和状态 |
| Props | 组件输入，只读数据 |
| State | 组件内部状态，可变，影响渲染 |
| 组合 | 组件嵌套，实现复杂界面 |
🎖 林昊成就
获得称号：「构造师（Constructor）」
掌握技能：
- 设计独立且复用的组件
- 理解函数组件与类组件差异
- 应用状态管理，实现交互式 UI