第一章：组件 —— 万物皆空调零件

1 分钟 147 字第 23 / 962 个阅读单元

React 的核心思想：把页面拆成一个个独立的零件（组件），拼起来就是完整页面。

text

🏠 智能家居 App
├── 🌡️ 温度显示器 (TemperatureDisplay)
├── 🎛️ 遥控器 (RemoteControl)
├── ❄️ 空调主机 (AirConditioner)
│   ├── 🌀 风扇 (Fan)
│   ├── 📊 显示面板 (Panel)
│   └── 🔧 压缩机 (Compressor)
└── 📋 电费账单 (ElectricBill)

每个零件就是一个函数，返回它长什么样（JSX）：

tsx

function TemperatureDisplay() {
  return <div>当前室温: 28°C</div>;
}

JSX 是什么？ 就是在 JavaScript 里写 HTML。看着像 HTML，实际是 JS 对象。React 把它转成真实的 DOM 节点显示到页面上。