当前位置：首页 > news >正文

第三章支线五 ·组件之城 · 构建与复用的魔法工坊

news 2025/6/13 0:25:58

主线回顾

第三章：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	组件内部状态，可变，影响渲染
组合	组件嵌套，实现复杂界面