一、React 的主要“版本阶段”

1️⃣ React 15 及以前（已过时 ❌）

特点

• 只支持 Class Component
• 生命周期复杂（componentWillMount 等）
• 无 Hooks

结论

❌ 不建议学习 现在只在老项目中见到，用来“维护”而不是“学习”。

---

2️⃣ React 16（重要转折点 ⭐）

真正现代 React 的起点

关键版本

• 16.0（2017）：Fiber 架构
• 16.8（2019）：🔥 Hooks 发布（革命性）

新增核心能力

• useState
• useEffect
• useContext
• useReducer
• 函数组件成为主流

地位

📌 必学基础（99% 教程从这里开始）

---

3️⃣ React 17（过渡版本 🚧）

特点

• 几乎没有新 API
• 主要是升级策略调整
• 事件系统重构（对库作者重要）

结论

学习时可以忽略存在感，当作 React 16 的延续

---

4️⃣ React 18（当前主流 ⭐⭐⭐）

现在学习 React = 学 React 18

发布时间

• 2022 年

核心变化

✅ 并发特性（Concurrent Features）

• createRoot
• 自动批处理（Automatic Batching）

✅ 新 Hooks

• useTransition
• useDeferredValue
• useId

✅ 严格模式更严格

• StrictMode 下 effect 会执行两次（开发环境）

地位

📌 必须掌握（面试 + 实战）

---

二、React 不是“版本”，而是“范式在变”

学习 React，更重要的是下面这些范式升级：

🧠 1. 组件写法变化

// ❌ 过去（Class）
class App extends React.Component {
  state = { count: 0 }
}

// ✅ 现在（Function + Hooks）
function App() {
  const [count, setCount] = useState(0)
}

---

🧠 2. 状态管理演进

• useState / useReducer

• Context

• 第三方：

  • Redux Toolkit（主流）
  • Zustand（轻量）
  • Jotai / Recoil

---

🧠 3. 渲染模式升级

• CSR（传统）
• SSR（Next.js）
• RSC（React Server Components）

---

三、我建议你的学习顺序（重要 ⭐⭐⭐）

结合你之前在学 Vue3 / 响应式 / 编译器，推荐你这样学 👇

🚀 第一阶段：React 18 基础（⭐⭐⭐）

必须掌握：

• JSX

• 函数组件

• Hooks：

  • useState
  • useEffect
  • useRef
  • useMemo
  • useCallback

• 组件通信（props / children）

---

🚀 第二阶段：进阶（⭐⭐⭐）

• 自定义 Hooks
• Context
• 性能优化（memo / useMemo）
• 受控 / 非受控组件

---

🚀 第三阶段：生态（⭐⭐）

• React Router v6
• 状态管理（Redux Toolkit / Zustand）
• React Query / TanStack Query

---

🚀 第四阶段：框架（⭐⭐）

• Next.js（App Router）
• SSR / SSG / Streaming

---

四、结论一句话

React 没有“几个版本要学”的问题 你要学的是：React 18 + Hooks + 现代生态

如果你愿意，我可以：

• 给你一份 「从 Vue3 转 React 的对照学习表」
• 或者 直接给你一个 React 18 学习路线 + Demo 项目结构

你更想走 工程实战 还是 原理派？

好，这个表我给你按 「心智模型 → API → 底层机制」 三层来做，对 Vue3 → React 18（Hooks） 一一对照，专门给 Vue3 已经会响应式 / 编译器 / runtime 的人 用的。

你会发现： Vue3 = 编译期友好 React = 运行时可控

---

Vue3 → React 对照学习表（核心必会）

---

一、核心心智模型对照（最重要 ⭐⭐⭐）

维度	Vue 3	React 18
框架定位	渐进式框架	UI Library
核心思想	响应式依赖收集	状态驱动重新执行
更新触发	setter → trigger	setState → rerender
编译器	强（SFC + 模板）	弱（JSX 直出）
diff 粒度	静态提升 / PatchFlags	Fiber + Scheduler
推荐范式	声明式模板	函数即 UI
设计哲学	尽量少 rerender	rerender 是常态

关键转变：

• Vue：“数据变了，谁用谁更新”
• React：“状态变了，组件函数重跑”

---

二、响应式系统 vs Hooks（⭐⭐⭐）

1️⃣ state

Vue3	React
ref()	useState()
reactive()	useState(object)
.value	直接变量

// Vue
const count = ref(0)
count.value++

// React
const [count, setCount] = useState(0)
setCount(c => c + 1)

⚠️ React 状态是 immutable 思维

// ❌ 错误
state.count++

// ✅ 正确
setState(prev => ({ ...prev, count: prev.count + 1 }))

---

2️⃣ computed

Vue3	React
computed()	useMemo()

// Vue
const total = computed(() => a.value + b.value)

// React
const total = useMemo(() => a + b, [a, b])

🧠 本质差异：

• Vue：自动依赖收集
• React：手动依赖数组

---

3️⃣ watch / watchEffect

Vue3	React
watch()	useEffect()
watchEffect()	useEffect()

useEffect(() => {
  console.log(count)
}, [count])

⚠️ React 的 useEffect = 生命周期 + 副作用

• 不是 watch
• 不保证同步

---

三、生命周期对照（⭐⭐）

Vue3	React
onMounted	useEffect(() => {}, [])
onUpdated	useEffect(() => {})
onUnmounted	return cleanup
nextTick	useLayoutEffect / flushSync

---

四、组件通信（⭐⭐⭐）

1️⃣ 父 → 子

Vue	React
props	props

<Child count={count} />

---

2️⃣ 子 → 父

Vue	React
$emit	props callback

<Child onChange={setCount} />

---

3️⃣ 插槽 vs children

Vue	React
<slot />	{props.children}
具名插槽	render props

---

五、v-if / v-for / 指令对照（⭐⭐）

Vue 指令	React
v-if	condition && <Comp />
v-for	array.map()
v-model	受控组件
v-bind	{...props}
v-on	onClick

---

六、模板 vs JSX（核心思维差异 ⭐⭐⭐）

Vue

<div>{{ count }}</div>

React

<div>{count}</div>

🧠 React JSX 本质：

JS 表达式 + 函数调用

---

七、ref & DOM 操作（⭐⭐）

Vue3	React
ref="el"	useRef()

const el = useRef(null)

useEffect(() => {
  el.current.focus()
}, [])

---

八、状态管理对照（⭐⭐）

Vue	React
Pinia	Redux Toolkit
provide/inject	Context
Vuex	Redux（老）

---

九、性能优化思路（⭐⭐⭐）

Vue3	React
自动依赖追踪	手动 memo
v-memo	memo()
静态提升	useMemo / useCallback

---

十、你需要“反直觉”的地方（必看 ⚠️）

❗ React 中：

1. rerender 不等于 DOM 更新
2. 函数每次都会重新执行
3. 闭包是性能 & bug 根源
4. 依赖数组必须写全