1. The main "version stage" of React

1️⃣ React 15 and before (obsolete ❌)

Features

• Only supports Class Component
• Complex life cycle (componentWillMount, etc.)
• No Hooks

Conclusion

❌ Not recommended for learning Now it is only seen in old projects and is used for "maintenance" rather than "learning".

2️⃣ React 16 (an important turning point ⭐)

The starting point of truly modern React

Critical Version

• 16.0 (2017): Fiber Architecture
• 16.8 (2019): 🔥 Hooks released (revolutionary)

New core capabilities

• useState
• useEffect
• useContext
• useReducer
• Functional components become mainstream

Status

📌 Must learn the basics (99% of tutorials start here)

3️⃣ React 17 (transitional version 🚧)

Features

• Few new APIs
• Mainly upgrade strategy adjustment
• Event system refactoring (important for library authors)

Conclusion

You can ignore the sense of existence when learning and treat it as a continuation of React 16

4️⃣ React 18 (current mainstream ⭐⭐⭐)

Learn React Now = Learn React 18

Release time

• 2022

Core Changes

✅ Concurrent Features

• createRoot
• Automatic Batching

✅ New Hooks

• useTransition
• useDeferredValue
• useId

✅ Strict mode is more strict

• Effect will be executed twice under StrictMode (development environment)

Status

📌 Must master (interview + practical)

2. React is not a “version”, but a “changing paradigm”

When learning React, the more important thing is the following paradigm upgrade:

🧠 1. Changes in component writing

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

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

🧠 2. Evolution of status management

• useState / useReducer

• Context

• Third party:

  • Redux Toolkit (mainstream)
  • Zustand (lightweight)
  • Jotai / Recoil

🧠 3. Rendering mode upgrade

• CSR (traditional)
• SSR（Next.js）
• RSC（React Server Components）

3. The order of study I recommend for you (Important ⭐⭐⭐)

🚀 Phase 1: React 18 Basics (⭐⭐⭐)

Must master:

• JSX

• function component

• Hooks：

  • useState
  • useEffect
  • useRef
  • useMemo
  • useCallback

• Component communication (props/children)

🚀 Stage 2: Advanced (⭐⭐⭐)

• Custom Hooks
• Context
• Performance optimization (memo/useMemo)
• Controlled/uncontrolled components

🚀 The third stage: Ecology (⭐⭐)

• React Router v6
• State Management (Redux Toolkit/Zustand)
• React Query / TanStack Query

🚀 Stage 4: Framework (⭐⭐)

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