react 原理与进阶

如果你已经有 7 年前端经验，并且做过 React 项目，那么学习 React 不应该停留在：

useState
useEffect
useMemo
useCallback

而是应该深入到 React 原理 + 源码 + 性能优化 + 架构设计。

---

React 进阶学习路线

第一阶段：React 核心原理

1. JSX 本质

很多人写：

const App = () => {
  return <h1>Hello React</h1>;
}

实际上经过编译：

import { jsx } from "react/jsx-runtime";

const App = () => {
  return jsx("h1", {
    children: "Hello React"
  });
};

React 最终创建的是：

{
  type: "h1",
  props: {
    children: "Hello React"
  }
}

即：

JSX
↓
ReactElement
↓
Virtual DOM
↓
真实DOM

---

2. Virtual DOM

理解：

真实DOM
↓
Virtual DOM
↓
Diff算法
↓
Patch更新

例如：

<div>1</div>

变成：

<div>2</div>

React 不会销毁整个 DOM。

只会更新：

textContent

---

3. Fiber 架构（重点）

React16 以后最大的升级。

以前：

Render
↓
一次性执行
↓
页面阻塞

现在：

Fiber Tree
↓
可中断
↓
可恢复
↓
可调度

本质：

FiberNode

结构类似：

{
  type,
  stateNode,
  child,
  sibling,
  return
}

形成：

链表树

而不是传统递归树。

---

4. React 调度器 Scheduler

React18 核心。

优先级：

Immediate
UserBlocking
Normal
Low
Idle

例如：

用户输入：

<input />

优先级高。

图表渲染：

<Echarts />

优先级低。

React 会先保证输入流畅。

---

第二阶段：Hooks 原理

---

useState 原理

写：

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

底层类似：

hook = {
  memoizedState: 0,
  queue: []
}

更新：

setCount(1)

进入：

queue.push(1)

下次 render：

重新计算 state

---

为什么 Hooks 不能写在 if 中

错误：

if(flag){
  useState()
}

React 内部：

hook1
hook2
hook3

依赖执行顺序。

顺序变化：

hook错位

导致状态混乱。

---

useEffect 原理

执行流程：

Render
↓
Commit
↓
useEffect

所以：

useEffect(()=>{
  console.log("effect")
})

一定晚于页面渲染。

---

第三阶段：React18 新特性

---

Concurrent Rendering

并发渲染。

startTransition(() => {
  setList(bigData)
})

低优先级任务：

可暂停
可恢复

避免页面卡顿。

---

useTransition

const [pending, startTransition] = useTransition();

典型：

搜索框

输入优先：

用户输入
↓
立即更新

搜索结果：

后台更新

---

useDeferredValue

const deferredKeyword =
  useDeferredValue(keyword);

适用于：

搜索联想
大列表过滤

---

第四阶段：性能优化

这是面试高频。

---

React.memo

export default React.memo(Component)

避免：

父组件更新
↓
子组件重新渲染

---

useMemo

缓存计算结果：

const data = useMemo(() => {
  return heavyCalc()
}, [list])

---

useCallback

缓存函数：

const onClick = useCallback(() => {

}, [])

避免：

子组件重复render

---

虚拟列表

例如：

10000条数据

不要全部渲染。

推荐：

• react-window
• react-virtualized

---

第五阶段：源码必学模块

如果想达到高级前端水平：

建议研究：

React 源码目录

react
react-dom
scheduler
reconciler

重点：

FiberNode
beginWork
completeWork
commitRoot

---

第六阶段：企业级架构

你目前更应该学习：

状态管理

• Redux Toolkit
• Zustand
• Jotai

---

服务端状态管理

• TanStack Query

解决：

缓存
重试
预加载
分页

---

React 全栈

路线：

React
↓
TypeScript
↓
Next.js
↓
Node.js / NestJS
↓
PostgreSQL
↓
Redis

这是 2026 年最主流的 React 技术栈。

推荐学习资源

官方文档

• React 官方文档

源码学习

• React GitHub 仓库

书籍

1. 深入浅出React和Redux
2. React设计原理
3. React技术揭秘（源码方向非常推荐）

---

对于你目前的经验阶段，最值得投入时间的顺序是：

Fiber原理
↓
React18并发特性
↓
性能优化
↓
TanStack Query
↓
Next.js
↓
React源码

学完这些，基本就已经从"会写 React"进入到"能设计 React 架构、解决复杂性能问题"的层次了。