01 它是干嘛的
React 是一个用来搭建网页界面的工具。它带来两个观念革命：一是「声明式 UI」，你只需要描述界面此刻应该长什么样，而不用手写「先删哪个元素、再插哪个元素」的步骤；二是「状态驱动视图」，界面被数据决定，数据一变界面就自动重画。它 2013 年开源后几乎重塑了整个前端行业。
02 为什么会有它
2013 年之前：界面一复杂，改起来就像在迷宫里找线头
在 React 出现之前，前端开发者用 jQuery 这类工具直接指挥浏览器：找到某个元素、把它删掉、再新建一个插进去、手动更新页面上六个地方的数字。页面简单时还好，一旦界面有几十处联动，代码就变成一团互相牵动的乱麻，改一个地方常常弄坏另一个地方。
Facebook 自己的动态信息流就是这种复杂界面：新消息不断涌入、点赞数实时变化、已读状态四处同步。团队发现，最难的不是把界面画出来，而是保证「数据和界面永远一致」——往往某处的数字忘了更新，用户就会看到一个自相矛盾的页面。
React 的思路是换掉整个工作方式：你别再去命令浏览器「怎么改」，而是只声明「数据是这样时，界面应该长这样」。剩下的事交给框架。Meta 在 2013 年把它开源，等于把公司内部解决这一痛点的方法送给了整个行业，从此「组件化」成了前端默认的思考方式。
03 它怎么工作
React 把界面拆成一棵组件树，每次数据变化都重新算出「界面应该长什么样」的虚拟描述，再和上一次的描述逐节点对比，只把真正变化的那一小部分同步到真实页面上。
数据一变界面就更新：组件树、虚拟 DOM 对比与最小化改动
- 1① 把界面拆成组件树
一个页面由页面、列表、按钮等一层层小组件拼成，每个组件只关心自己那一小块界面和它自己的数据。
- 2② 数据（状态）发生变化
用户点了按钮、收到了新消息，对应组件的状态被更新，这一步就是「状态驱动视图」的起点。
- 3③ 生成新的界面描述
React 重新执行受影响的组件，得到一份描述「现在界面该是什么样」的虚拟结构，也就是虚拟 DOM。
- 4④ 与上一次的描述做对比
把新旧两份虚拟结构逐层比较，找出到底哪个节点变了、哪个没变，这一步通常叫差异比对。
- 5⑤ 只把差异写回真实页面
没变的地方完全不碰，只更新真正变化的那几个节点，因此改动量最小、页面不闪不卡。
04 谁在用它
后台管理台、在线编辑器这类界面状态多变的应用，用组件化管理数据与视图的关系。
组件像积木一样可复用、可分工，不同团队各写各的组件，拼起来就是一个完整产品。
同一套组件思路可以延伸到手机 App 与桌面端，减少为不同平台重写界面的成本。
实时聊天、股票行情、协作白板等场景，靠状态驱动让界面跟着数据自动刷新。
05 怎么用
门槛不高：会一点 JavaScript 就能开始，但要从「手动改界面」切换到「声明界面」的思维方式。
- 01安装 Node.js，用官方脚手架创建项目（如 Vite 的 React 模板）。
- 02理解组件的写法：一个函数返回界面结构，就是最小组件。
- 03学会用状态来存会变的数据，数据一变界面就自动更新，不要手动去改页面元素。
- 04把大界面拆成小组件，通过参数把数据从上层传给下层。
- 05列表渲染时记得给每一项一个稳定且唯一的标识，帮助框架快速比对。
- 06需要页面跳转时接入路由库，需要跨页面共享数据时再引入状态管理方案。
import { useState } from 'react'
// 一个组件 = 一块可复用的界面积木
function Counter() {
// 状态：这个数字一旦变化，下面的界面会自动重画
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
你点了 {count} 次
</button>
)
}
export default Counter避坑提示
- !不要把「会变的数据」随手塞进普通变量，那样界面不会更新，应该用状态来存。
- !状态能少则少：能算出来的就别再存一份，两份数据迟早会不一致。
- !列表每一项都要有稳定的标识，用下标当标识会在增删时引发错位。
06 关键概念
- 组件
- 一块封装好界面与逻辑的积木，可以反复使用，也可以互相嵌套拼装。
- 声明式 UI
- 你只描述界面应该长什么样，具体怎么一步步改由框架负责，不用自己写更新步骤。
- 虚拟 DOM
- 界面在内存里的一份轻量描述，比真实页面元素轻得多，用来快速比较差异。
- 状态（State）
- 组件自己会变的数据，它一变，界面就跟着重新渲染。