跳到主要内容

阶段1：React 是什么

🎯 学习目标​

理解 React 的本质和优势,为后续学习打下认知基础。

一、通俗比喻：React 就像"智能装修工"​

传统 JavaScript 开发(原生 JS)​

想象你要装修房子:

  • 每次改动都要自己动手: 要换个灯泡?你得爬梯子、拆旧灯、装新灯、测试
  • 效率低: 改10个地方就要重复10次操作
  • 容易出错: 哪个步骤忘了,整个灯就不亮了
// 传统方式:手动操作每一步
document.getElementById('title').innerHTML = '新标题';
document.getElementById('count').innerHTML = count + 1;
document.querySelector('.button').style.color = 'red';
// 要改3个地方,写3行代码,手动查找每个元素

React 开发​

  • 智能装修工: 你只需说"我要现代风格",工人自动帮你搞定所有细节
  • 自动更新: 你说"把客厅灯换成暖色",工人自动找到客厅灯并更换
  • 高效: 工人知道哪些地方需要改,哪些不用动
// React方式:你只说"要什么",React自动帮你实现
<h1>{title}</h1>
<p>{count}</p>
<button style={{color: 'red'}}>点击</button>
// 数据变了,页面自动更新,不用手动操作DOM

二、React 核心优势(对比传统开发)​

1. 组件化开发 - 像搭积木一样写代码​

传统方式的痛点:

<!-- 写了10个页面,每个都要复制粘贴这段导航栏代码 -->
<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
  <a href="/contact">联系</a>
</nav>
<!-- 老板说改个链接,你要改10个文件... -->

React 方式:

// 一次定义,到处使用
function Navbar() {
  return (
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  );
}

// 在任何页面直接用
<Navbar />  // 就这么简单!改一处,所有页面都更新

比喻: 就像做菜时提前准备好"料包",用的时候直接倒,不用每次都切葱姜蒜。

2. 数据驱动视图 - 数据变,页面自动变​

传统方式的痛点:

let count = 0;
// 数据变了,要手动改页面
function addCount() {
  count++;  // 数据变了
  document.getElementById('num').innerHTML = count;  // 手动更新页面
  document.getElementById('tip').innerHTML = count > 5 ? '太多了!' : '';  // 还要手动改提示
  // 如果有10个地方显示count,要写10行更新代码...
}

React 方式:

function Counter() {
  const [count, setCount] = useState(0);  // 定义数据
  
  return (
    <div>
      <p>数量: {count}</p>  {/* 数据变了,这里自动更新 */}
      <p>{count > 5 ? '太多了!' : ''}</p>  {/* 这里也自动更新 */}
      <button onClick={() => setCount(count + 1)}>
        加1
      </button>
    </div>
  );
}
// 只需改数据,页面自动跟着变!

比喻: 传统JS像手动挡汽车(踩离合、换挡、给油,步步都要你操心); React像自动挡(你只管踩油门,其他自动搞定)。

3. 虚拟DOM - 聪明的"最小改动"机制​

什么是虚拟DOM?(通俗解释)

想象你要修改一篇Word文档:

传统方式(直接操作真实DOM):

  • 改一个字 → 整篇文档重新打印 → 效率低,很卡

React方式(虚拟DOM):

  • 改一个字 → React先在草稿纸(虚拟DOM)上改
  • 对比草稿纸和原文档,发现只有1个字不同
  • 只重新打印那1个字 → 快!
传统: 改1个字 → 刷新整个页面 → 慢
React: 改1个字 → 只更新那1个字 → 快

技术细节(了解即可,现在不懂没关系):

  • 虚拟DOM是用JavaScript对象模拟的页面结构
  • React会对比新旧虚拟DOM,找出差异
  • 只更新有变化的部分到真实DOM

三、React 适合做什么?​

✅ 适合的场景​

  1. 交互频繁的页面: 购物车、聊天室、仪表盘
  2. 数据经常变的应用: 社交媒体、新闻网站
  3. 复杂的单页应用: 后台管理系统、在线工具

❌ 不太适合的场景​

  1. 纯静态页面: 公司简介、产品介绍(用HTML/CSS更简单)
  2. SEO要求极高的页面: 新闻门户首页(需要服务端渲染)

四、学习React需要什么基础?​

✅ 你已经具备的(够用了!)​

  • HTML/CSS: 知道怎么写页面结构和样式
  • JavaScript基础: 变量、函数、数组、条件判断

📚 React会用到的JS知识(边学边掌握)​

  • 箭头函数: const add = (a, b) => a + b
  • 模板字符串: `你好,${name}`
  • 解构赋值: const {name, age} = person
  • 数组方法: map(), filter()

别担心! 这些在后面的实战中会反复用到,自然就学会了。

五、学习路线预览​

阶段1 (当前) ✓ 理解React是什么
    ↓
阶段2 → 安装工具,创建第一个项目
    ↓
阶段3 → 学会写"组件"(React的积木)
    ↓
阶段4 → 让页面"动起来"(状态管理)
    ↓
阶段5 → 响应用户操作(事件处理)
    ↓
阶段6 → 显示列表数据(渲染技巧)
    ↓
阶段7 → 做个TodoList(综合实战)
    ↓
阶段8 → 下一步学什么?(进阶方向)

✅ 阶段1总结​

核心要点:

  1. React是一个"智能装修工",帮你自动更新页面
  2. 三大优势:组件化(搭积木)、数据驱动(自动更新)、虚拟DOM(性能快)
  3. 适合做交互多、数据变化频繁的应用
  4. 你的JS基础已经足够开始学习

下一步: 准备好了吗?下一阶段我们将安装工具,创建你的第一个React项目!

💡 思考题(可选)​

回想你平时用的网站/App:

  • 哪些功能适合用React开发?(提示:想想哪些地方数据经常变)
  • 哪些页面用传统HTML/CSS更简单?

例如:

  • ✅ 微信朋友圈(不断刷新新消息) → 适合React
  • ❌ 公司官网首页(内容固定) → HTML/CSS就够了