一、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）

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

🚀 第一阶段：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