React 是什么？

一、网页怎么组成的。

在学习 React 之前需要先了解最基础的网页三件套：HTML，CSS 和 JavaScript。
HTML 负责网页的结构。例如：

<h1>我的博客</h1>
<p>这是我的第一篇文章</p>
<button>点击我</button>

这些代码决定网页上有什么内容，比如标题，段落按钮等。
CSS负责网页的样式，可以控制文字的颜色，大小，间距，布局，背景等。例如：

h1{
  color: blue;
  font-size: 32px;
}

JavaScript的负责网页的交互。例如：

const button = document.querySelector("button");
button.onclick = function () {
  alert("你点击了按钮");
}

JavaScript 可以将网页动起来.比如点击按钮弹出提示、输入内容后实时显示切换页面内容、请求后端数据等。
所以可以这样理解：HTML 决定网页有什么，CSS 决定网页长什么样，JavaScript 决定网页能做什么，而 React 是建立在 JavaScript 之上的。它不是用来代替 HTML 、CSS 和 JavaScript，而是让我们更方便的组织页面结构和交互逻辑。

二、为什么会出现 React ？

如果网页很简单，只用 HTML，CSS 和 JavaScript 就可以完成。比如一个静态博客页面，可能只需要标题，文章内容和几个链接，这样的页面没有太多交互代码，也不会很复杂。但是现在网页通常不是这么简单，比如一个购物网站页面中可能有:

• 商品列表
• 商品搜索
• 商品分类
• 加入购物车按钮
• 购物车数量
• 用户登录状态
• 订单信息
• 弹窗提示
• 页面切换

用户每操作一次，页面上的内容都可能发生变化。
例如：

• 用户点击“加入购物车”，购物车数量要增加。
• 用户搜索商品，商品列表要更新。
• 用户登录成功，页面右上角要显示用户名。
• 用户点击删除商品，购物车列表要重新渲染。

如果用传统 JavaScript 的手动操作页面，每次数据变化后，都要需开发者自己找到对应的 DOM 元素，然后手动修改它。例如：

document.querySelector(".cart-count").innerText = 3;

当页面简单时，这种写法可以接受。但当页面越来越复杂时，代码就会变得混乱。开发者需要关心很多细节：哪个元素需要修改、什么时候修改、数据和页面是否同步、某个地方修改后会不会影响其他地方？

React 的出现就是为了解决这类复杂界面开发的问题。它提供了一种新的思路：不要手动一步步修改页面，而是先描述页面应该是什么样子。当数据变化时，让 React 自动更新页面，这就是 React 的核心价值。

三、React 是什么？

React 是一个用于构建用户界面的 JavaScript 库。这句话里有几个关键词。

首先 React 是 JavaScript 的库，不是一门新语言。也就是说学习 React 之前 JavaScript 的基础很重要，React 的代码本质上还是 JavaScript。

其次，React用来构建用户界面。他主要关注的是页面中用户能看到和操作的部分。

再次，React是库，不是完整框架。库和框架的区别可以简单理解为库是一个工具箱，你需要什么工具就拿什么工具来用。框架是一整套解决方案，它通常规定的项目结构，路由，数据处理方式等。

React 本身主要负责界面部分，如果需要做页面路由，状态管理，服务端渲染等功能，通常还需要搭配其他工具。比如 React rooter、Redux、Zustand、Next.js 等。所以 React 可以理解为一个专门帮助我们构建复杂网页界面的 JavaScript 的工具。

四、React 的核心思想：组件化

React 最重要的思想之一是组建化。组件可以理解成页面中的一个小模块。一个网页看起来是一个整体，但实际上可以拆成很多部分。比如一个博客页面可以拆成：

• Header 顶部导航栏
• Sidebar 侧边栏
• ArticleList 文章列表
• ArticleCard 文章卡片
• Comment 评论区
• Footer 底部信息

这些部分都可以做成React组件。例如，一个简单的标题组件：

function Title() {
  return <h1>我的博客</h1>;
}

这段代码定义了一个叫 title 的组件，它的作用是在页面上显示一个标题。再比如，一个文章卡片组件：

function ArticleCard() {
  return (
    <div>
      <h2>React 是什么？</h2>
      <p>这是一篇关于 React 的入门文章。</p>
    </div>
  );
}

这个组件负责显示一篇文章的标题和简介。

组件化的好处是代码更清晰，以前我们可能把整个页面的HTML，CSS和JavaScript混在一起写，页面越复杂，代码越难维护，而 React 可以把页面拆成一个个组件。把每个组件只负责自己的一小块内容，这就像搭积木一样。一个完整页面不是一次性写出来的，而是由很多小组件组合起来的。例如：

function App() {
  return (
    <div>
      <Title />
      <ArticleCard />
    </div>
  )
}

这里的APP组件使用了 Title 和 ArticleCard 两个组件，所以 React 的开发方式不“是写一整个页面”，而是“写很多组件，再把组件组合成页面”。

五、什么是 JSX？

在 React 代码中，经常会看到类似 HTML 的写法：

function Hello() {
  return <h1>你好，React</h1>;
}

这里的 <h1>你好，React</h1> 看起来像 HTML，但它其实不是普通 HTML，而是 JSX。JSX 是 JavaScript 的一种语法扩展。
简单来说，JSX 允许我们在 JavaScript 代码中写类似 HTML 的结构。这对于写界面非常方便。
如果没有 JSX，我们用 JavaScript 创建页面元素会比较麻烦。例如：

const title = document.createElement("h1");
title.innerText = "你好，React";

而使用 JSX 后，可以直接这样写：

<h1>你好，React</h1>

这样更直观，也更接近我们平时理解的页面结构。
不过需要注意，JSX 虽然像 HTML，但它和 HTML 还是有一些区别。
例如，在 HTML 中写 class：

<div class="box"></div>

在 JSX 中要写成 className：

<div className="box"></div>

这是因为 class 在 JavaScript 中是一个关键字，所以 React 使用 className 来表示 CSS 类名。
再比如，在 JSX 中写 JavaScript 表达式，需要使用大括号：

function User() {
  const name = "张三";

  return <h1>你好，{name}</h1>;
}

页面最终会显示：

你好，张三

JSX 的作用就是让我们更方便地描述页面结构。

六、什么是 props？

props 可以理解为组件接收的参数。
组件如果只能写死内容，就不够灵活。
例如下面这个组件：

function UserCard() {
  return (
    <div>
      <h2>张三</h2>
      <p>前端学习者</p>
    </div>
  );
}

这个组件只能显示张三的信息。
如果我还想显示李四、王五的信息，就不能每个人都重新写一个组件。
这时就可以使用 props。

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.description}</p>
    </div>
  );
}

使用组件时，可以这样传入数据：

<UserCard name="张三" description="前端学习者" />
<UserCard name="李四" description="后端开发者" />
<UserCard name="王五" description="UI 设计师" />

这样，同一个 UserCard 组件就可以显示不同人的信息。
props 的作用就是让组件变得可复用。
可以把组件想象成一个模板，把 props 想象成传入模板的数据。
同一个模板，传入不同的数据，就能生成不同的内容。

七、什么是 state？

state 中文通常叫“状态”。
状态就是页面中会变化的数据。
比如：

• 按钮点击次数
• 输入框中的内容
• 用户是否登录
• 弹窗是否打开
• 商品是否被加入购物车
• 当前选中的菜单
• 当前显示第几页数据

这些数据都会随着用户操作而变化，所以它们都可以叫状态。
React 中常用 useState 来定义状态。
例如，一个计数器：

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      点击了 {count} 次
    </button>
  );
}

这段代码可以拆开理解。

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

这行代码的意思是：创建一个叫 count 的状态，它的初始值是 0。
count 表示当前的值。
setCount 用来修改这个值。

<button onClick={() => setCount(count + 1)}>

这行代码表示：当按钮被点击时，把 count 的值加 1。

点击了 {count} 次

这行代码表示：把当前的 count 显示到页面上。
当用户点击按钮时，count 会变化。React 发现状态变化后，会自动重新渲染页面。
这就是 React 的一个核心特点：
状态变化，页面自动更新。
开发者不需要手动找到按钮里的文字再修改它。只要修改状态，React 会负责更新界面。

八、React 的“数据驱动界面”

React 的开发方式可以理解为“数据驱动界面”。
意思是：页面显示什么，取决于数据是什么。
例如：

function LoginStatus() {
  const isLogin = true;

  return (
    <div>
      {isLogin ? <p>欢迎回来</p> : <p>请先登录</p>}
    </div>
  );
}

如果 isLogin 是 true，页面显示“欢迎回来”。
如果 isLogin 是 false，页面显示“请先登录”。
页面内容由数据决定。
再比如购物车数量：

function Cart() {
  const count = 3;

  return <p>购物车中有 {count} 件商品</p>;
}

页面显示的数字由 count 决定。
如果 count 变成 4，页面就应该显示“购物车中有 4 件商品”。

React 的思想就是：
我们不用频繁手动修改页面，而是修改数据。数据变了，界面自然跟着变。
这和传统 DOM 操作的思路不同。

传统写法更像是：
找到某个页面元素，然后修改它。

React 写法更像是：
定义好数据和界面之间的关系，然后让 React 根据数据自动生成页面。

九、React 中的事件处理

网页中的很多交互都和事件有关。

比如：

• 点击按钮
• 输入文字
• 提交表单
• 鼠标移动
• 键盘按下

React 中也可以处理这些事件。
例如点击事件：

function Button() {
  function handleClick() {
    alert("按钮被点击了");
  }

  return <button onClick={handleClick}>点击我</button>;
}

这里的 onClick 表示点击事件。
当用户点击按钮时，会执行 handleClick 函数。
再比如输入框事件：

function InputExample() {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
      <p>你输入的是：{text}</p>
    </div>
  );
}

这段代码表示：
输入框中的内容由 text 控制。
当用户输入内容时，onChange 会触发，然后通过 setText 更新 text。
text 更新后，下面的文字也会自动更新。
这也是 React 数据驱动界面的体现。

十、React 如何渲染列表？

网页中经常需要展示列表。
比如文章列表、商品列表、评论列表、消息列表等。
在 React 中，可以使用数组的 map 方法渲染列表。
例如：

function ArticleList() {
  const articles = [
    { id: 1, title: "React 是什么？" },
    { id: 2, title: "如何学习 JavaScript？" },
    { id: 3, title: "前端开发入门路线" }
  ];

  return (
    <div>
      {articles.map((article) => (
        <h2 key={article.id}>{article.title}</h2>
      ))}
    </div>
  );
}

这里的 articles 是一个数组。
map 会遍历数组中的每一项，然后为每一篇文章生成一个标题。
key 是 React 用来识别列表中每一项的标记。一般会使用数据中的唯一 id 作为 key。
列表渲染是 React 中非常常见的写法。

十一、React 和传统 JavaScript 写法有什么区别？

传统 JavaScript 操作页面时，通常需要手动操作 DOM。
例如：

const countText = document.querySelector(".count");
countText.innerText = "点击了 1 次";

这种写法关注的是“怎么修改页面”。
而 React 更关注“页面应该根据数据长什么样”。

例如：

<p>点击了 {count} 次</p>

当 count 是 1 时，页面显示“点击了 1 次”。
当 count 是 2 时，页面显示“点击了 2 次”。
开发者只需要管理 count 这个数据，不需要每次手动修改页面文字。

所以两者的思路不同：
传统 JavaScript 更偏向直接操作页面元素。
React 更偏向通过数据描述页面。
这就是为什么在复杂项目中，React 的代码通常更容易组织和维护。

十二、什么是虚拟 DOM？

学习 React 时，经常会看到一个概念：虚拟 DOM。
DOM 是浏览器中的页面结构。
例如一个网页：

<div>
  <h1>标题</h1>
  <p>正文内容</p>
</div>

浏览器会把这些 HTML 解析成 DOM 树。
传统 JavaScript 可以直接操作 DOM，比如修改文字、添加节点、删除节点等。
但是频繁操作真实 DOM 可能会影响性能，尤其是在复杂页面中。
React 的做法是：先在内存中创建一个虚拟 DOM。
虚拟 DOM 可以理解成真实 DOM 的 JavaScript 对象版本。
当状态变化时，React 会先比较新的虚拟 DOM 和旧的虚拟 DOM，找出需要变化的部分，然后再尽量高效地更新真实 DOM。

简单理解就是：
React 不会每次都粗暴地重建整个页面，而是尽量只更新需要变化的部分。
不过对于初学者来说，不需要一开始就深入虚拟 DOM 的底层原理。先理解它的作用即可：
虚拟 DOM 是 React 用来提高界面更新效率的一种机制。

十三、React 项目通常长什么样？

一个 React 项目通常会有很多组件文件。
例如：

src/
  App.jsx
  main.jsx
  components/
    Header.jsx
    Footer.jsx
    ArticleCard.jsx
    ArticleList.jsx

main.jsx 通常是项目入口文件。
App.jsx 通常是整个应用的主组件。
components 文件夹通常用来放各种小组件。
例如 App.jsx 可能长这样：

import Header from "./components/Header";
import ArticleList from "./components/ArticleList";
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Header />
      <ArticleList />
      <Footer />
    </div>
  );
}

export default App;

这段代码可以看出，React 页面是由组件组合出来的。

每个组件负责一部分页面，最后由 App 组件把它们组合起来。

十四、React 常见生态工具

React 本身主要负责构建界面。
但真实项目通常还需要其他能力，比如页面路由、全局状态管理、请求后端接口、项目打包等。
所以 React 经常会搭配其他工具使用。

常见工具包括：
React Router：用于页面路由。比如从首页跳转到文章详情页。
Redux、Zustand、Jotai：用于状态管理。适合处理多个组件之间共享的数据。
Axios、Fetch：用于请求后端接口。
Vite：用于创建和启动前端项目。
Next.js：基于 React 的框架，可以做服务端渲染、静态站点生成、全栈开发等。

对于初学者来说，不需要一开始就全部掌握。可以先学习 React 本身，再逐步了解这些工具。

十五、学习 React 的建议路线

对于零基础学习者来说，不建议直接学习 React。
因为 React 建立在 JavaScript 之上，如果 JavaScript 基础不扎实，学习 React 时会很吃力。

比较合理的学习路线是：
第一步，学习 HTML。需要掌握常见标签，比如标题、段落、链接、图片、列表、表单等。
第二步，学习 CSS。需要掌握选择器、颜色、字体、盒子模型、Flex 布局、Grid 布局、响应式布局等。
第三步，学习 JavaScript 基础。需要掌握变量、数据类型、函数、数组、对象、条件判断、循环、事件、DOM 操作等。
第四步，学习现代 JavaScript。需要了解 let、const、箭头函数、模板字符串、解构赋值、数组方法、模块化、Promise、async/await 等。
第五步，学习 React 基础。需要掌握组件、JSX、props、state、事件处理、条件渲染、列表渲染、表单处理等。
第六步，学习 React 进阶。可以继续学习 useEffect、组件通信、自定义 Hook、性能优化、状态管理、路由、项目结构等。
第七步，做项目练习。可以从简单项目开始，比如：

• 计数器
• 待办事项列表
• 简单博客页面
• 商品列表页面
• 登录表单
• 天气查询页面
• 后台管理系统页面

学习 React 最重要的不是只看概念，而是动手写代码。

十六、用一句话理解 React

React 是一个用 JavaScript 构建网页界面的工具。
它的核心思想是组件化和数据驱动。
组件化让我们可以把复杂页面拆成一个个小模块。
数据驱动让我们可以通过修改数据来更新界面，而不是手动操作页面元素。
当数据发生变化时，React 会自动帮助我们更新页面。
所以，React 特别适合用来开发交互复杂、页面结构复杂的现代网页应用