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


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

资料取自《JavaScript高级程序设计(第5版)》

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


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

1. 核心思想

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

2. 举个🌰:按钮组件

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

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

输出效果

复制代码
[ 点击我! ] [ 点击我! ]

3. 数据传递(组件间通信)

javascript 复制代码
// 通过 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. 实战例子:计数器

javascript 复制代码
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 操作次数

总结记忆卡

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

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

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

目录:总目录

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

脚注

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

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

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

相关推荐
遇见尚硅谷6 分钟前
C语言:20250728学习(指针)
c语言·开发语言·数据结构·c++·笔记·学习·算法
☆璇10 分钟前
【C++】C/C++内存管理
c语言·开发语言·c++
Aronup17 分钟前
NLP学习开始01-线性回归
学习·自然语言处理·线性回归
愿你天黑有灯下雨有伞20 分钟前
枚举策略模式实战:优雅消除支付场景的if-else
java·开发语言·策略模式
网络安全打工人25 分钟前
CentOS7 安装 rust 1.82.0
开发语言·后端·rust
楚轩努力变强26 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端28 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python36 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
梦想的初衷~1 小时前
MATLAB近红外光谱分析技术及实践技术应用
开发语言·支持向量机·matlab
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js