红宝书第四十讲：React 核心概念：组件化 & 虚拟 DOM 简单教程

---

红宝书第四十讲：React 核心概念：组件化 & 虚拟 DOM 简单教程

资料取自《JavaScript高级程序设计（第5版）》。

查看总目录：红宝书学习大纲

---

一、组件化：像搭"乐高积木"一样做界面

1. 核心思想

• 组件 = 独立、可复用的代码模块（例如按钮、导航条、表单）
• 组合多个组件 → 构建完整页面（类似拼乐高积木）

2. 举个🌰：按钮组件

// 创建可复用的按钮组件
function MyButton() {
  return <button>点击我！</button>;
}

// 使用组件（无限复用！）
function App() {
  return (
    <div>
      <MyButton />
      <MyButton />
    </div>
  );
}

输出效果：

[ 点击我！ ] [ 点击我！ ]

---

3. 数据传递（组件间通信）

// 通过 props 传递参数
function MyButton({ color }) {
  return <button style={{color: color}}>自定义颜色按钮</button>;
}

function App() {
  return (
    <div>
      <MyButton color="red" />
      <MyButton color="blue" />
    </div>
  );
}

效果：红色按钮、蓝色按钮各一个

---

二、虚拟 DOM：React 的高速公路调度员

1. 为什么需要虚拟 DOM？

直接操作真实 DOM 很慢（想象手工拆装整个乐高城堡 → 虚拟 DOM 像"设计图纸对比器"）

2. 更新流程图解

---

3. 实战例子：计数器

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

虚拟 DOM 优势：

• 首次渲染完整生成 DOM
• 后续每次点击 → 仅修改变化部分文本（而不是重建整个按钮）

---

三、组件化+虚拟 DOM 组合拳优势

特性	组件化优势	虚拟 DOM 辅助
开发效率	模块自由组合	自动优化视图更新
维护成本	独立调试修改	避免手动操作 DOM 错误
性能表现	局部重新渲染	最小化 DOM 操作次数

---

总结记忆卡

// 1. 组件定义 → 函数返回JSX
function 组件名(props) { 
  return <标签>内容</标签> 
}

// 2. 组件复用 → 像使用HTML标签
<组件名 属性={值} />

// 3. 虚拟DOM → 自动优化渲染的秘密武器
真实DOM更新 → React会自动找最优路径

---

目录：总目录

上篇文章：红宝书第三十九讲：写给新手的性能优化实战指南：代码拆分与缓存策略
下篇文章：红宝书第四十一讲：关于Vue3的入门解读和与Vue2的区别

脚注

《JavaScript高级程序设计（第5版）》描述DOM树的层次结构

《JavaScript高级程序设计（第5版）》讨论DOM扩展与CSS样式接口

《JavaScript高级程序设计（第5版）》展示Image对象的事件绑定