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

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

news 来源：原创 2025/6/17 17:33:23

红宝书第四十讲：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会自动找最优路径