React 19 實戰指南 2026

React 19

⚛️ React 19 是什麼？ 2024 年底正式發佈的 React 19 是 React 自 18 以來最大的一次更新——它不只是修修補補，而是把 Actions（動作）、Server Components（服務端組件） 和 文檔元數據原生支持 這三個長期存在於實驗階段的能力，正式推向穩定。這意味著「表單提交」、「數據請求」、「SEO 元數據」這三件前端最頻繁的事，終於有了框架級的標準答案。

本文將帶你從 0 到 1 掌握 React 19：

✅ React 19 核心變化（與 React 18 完整對比）
✅ 四大新 Hook：useActionState / useOptimistic / useFormStatus / use
✅ Actions 與表單處理（告別手寫 useState + fetch）
✅ Server Components 實戰（'use client' / 'use server' 心智模型）
✅ 文檔元數據 <title> / <meta> 原生支持
✅ ref 作為 prop、Context 優化、資源預加載
✅ Vite + React 19 項目實戰（待辦 + 儀表盤）
✅ 與 Vue 的選型對比（本站技術思考）
✅ 18 → 19 升級遷移指南（破壞性變更清單）
✅ 常見問題與解決方案

一、React 19 核心變化

React 19 的設計哲學可以概括為一句話：讓框架替你做更多「樣板代碼」的髒活。下面這張對比表是理解全部新特性的鑰匙。

1.1 React 18 vs 19 關鍵差異

能力	React 18	React 19	影響
表單提交	手寫 `useState` + `fetch` + `useEffect`	Actions 原生支持	減少 70% 樣板
樂觀更新	手寫 `useState` + `try/catch` 回滾	`useOptimistic` Hook	一行搞定
表單狀態	手動管理 `pending` / `error`	`useActionState` / `useFormStatus`	框架託管
服務端組件	實驗（`next/font` 等）	穩定 API	RSC 進生產
文檔元數據	需 `react-helmet` / `next/head`	`<title>` / `<meta>` 原生	不再依賴庫
`ref` 用法	只能 `useRef` + `forwardRef`	可直接作為 prop 傳遞	刪除 `forwardRef`
Context	值變化全量重渲染	`use(Context)` 支持條件調用	優化粒度更細
資源加載	手動 `<link>` / `preload`	`use(preload)` / `use(ressource)`	原生預加載
錯誤兜底	`componentDidCatch`	`useEffect` 可返回清理	錯誤恢復更順
包大小	較大	移除 `prop-types` 等遺留代碼	更小

💡 一句話總結：React 19 把「數據寫入」（表單/Actions）、「服務端渲染邊界」（RSC）、「文檔頭」（Metadata）這三件事正式收編進框架，讓 React 從一個「純 UI 庫」進化為「全棧應用框架」。

1.2 誰該升級？

場景	建議	理由
新項目	直接用 19	沒有任何歷史包袱
Next.js / Remix 項目	跟隨框架版本	框架已適配 RSC
老 SPA（純 CSR）	可漸進升級	新 Hook 是漸進增強
大量第三方庫未適配	暫緩	見 §9 兼容性清單

二、四大新 Hook 詳解

React 19 引入了 4 個與 Actions 深度綁定的 Hook。它們解決的是同一個問題：異步狀態管理。

2.1 `useActionState` —— 表單狀態機

替代「手寫 loading + error + value」三件套。它接收一個 Action 函數，返回 [state, formAction, isPending]。

tsx

// actions.ts
'use server'
async function subscribe(prevState: { error?: string }, formData: FormData) {
  const email = formData.get('email')
  if (!email || !email.includes('@')) {
    return { error: '郵箱格式不正確' }
  }
  await db.subscribe(email) // 假設的後端調用
  return { success: true }
}

tsx

// SubscribeForm.tsx
'use client'
import { useActionState } from 'react'

export function SubscribeForm() {
  const [state, formAction, isPending] = useActionState(subscribe, {
    error: undefined,
  })

  return (
    <form action={formAction}>
      <input name="email" type="email" disabled={isPending} />
      <button disabled={isPending}>
        {isPending ? '提交中…' : '訂閱'}
      </button>
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state.success && <p>訂閱成功！</p>}
    </form>
  )
}

關鍵點：

第一個參數是「上一次的狀態」，非常適合做錯誤兜底和重試。
isPending 由框架自動管理，你不再需要 setLoading(true/false)。
<form action={formAction}> —— 注意這裡直接把函數傳給 action，這是 HTML 原生表單提交的 React 版。

2.2 `useOptimistic` —— 樂觀更新

在做「點贊」「評論」這類交互時，你希望 UI 立刻響應，再等服務器確認。useOptimistic 讓這個流程變得極其簡潔。

tsx

'use client'
import { useOptimistic, useRef } from 'react'

type LikeState = { count: number; liked: boolean }

function LikeButton({ initial }: { initial: LikeState }) {
  const [optimistic, addOptimistic] = useOptimistic(
    initial,
    (state, _delta: number) => ({
      ...state,
      count: state.count + 1,
      liked: !state.liked,
    }),
  )
  const formRef = useRef<HTMLFormElement>(null)

  async function likeAction() {
    addOptimistic(1) // 立刻更新 UI
    await fetch('/api/like', { method: 'POST' }) // 真實請求
  }

  return (
    <form action={likeAction} ref={formRef}>
      <button>👍 {optimistic.count}</button>
    </form>
  )
}

⚠️ 如果服務器失敗，React 會自動把 UI 回滾到真實狀態——你不需要手寫回滾邏輯。這就是「樂觀」二字的代價由框架承擔。

2.3 `useFormStatus` —— 在子組件讀取表單狀態

useFormStatus 的巧妙之處在於：它不需要從父組件透傳 props，只要在 <form> 內部的任意子組件裡調用，就能拿到整個表單的提交狀態。

tsx

'use client'
import { useFormStatus } from 'react'

function SubmitButton() {
  const { pending, data, method, action } = useFormStatus()
  return (
    <button disabled={pending}>
      {pending ? '處理中…' : '提交'}
    </button>
  )
}

// 使用：SubmitButton 不需要任何 props
<form action={someAction}>
  <input name="title" />
  <SubmitButton />  {/* 自動感知 pending */}
</form>

這在「按鈕被抽成獨立組件」的場景下特別有用——不用再 props.pending 層層透傳。

2.4 `use` —— 讀取資源與 Context

use 是一個全新的 API，可以在 渲染期間 讀取 Promise 或 Context，且支持條件調用（不像 useContext 必須在頂層）。

tsx

import { use } from 'react'

// 讀取 Promise（配合 Suspense）
function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise) // 直接 await 風格的讀取
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>
}

// 條件讀取 Context
function Toolbar({ showUser }: { showUser: boolean }) {
  if (showUser) {
    const user = use(UserContext) // ✅ 條件調用，合法
    return <span>{user.name}</span>
  }
  return null
}

🚀 use(Promise) 配合 <Suspense> 是 RSC 數據流的核心。它讓「邊渲染邊等待數據」成為標準模式。

三、Actions 與表單處理

Actions 是 React 19 的靈魂。它本質上是「一個會在提交時執行的函數」，框架負責接管 loading、錯誤、重新驗證。

3.1 三種 Actions 來源

類型	定義位置	適用場景
客戶端 Action	組件內普通 `async function`	純前端交互
服務端 Action	文件頂部 `'use server'`	需要操作數據庫/密鑰
庫提供 Action	如表單庫封裝	複用邏輯

3.2 完整表單示例（含校驗 + 錯誤）

tsx

'use client'
import { useActionState } from 'react'

type State = { error?: string; values?: { name: string } }

async function createUser(_prev: State, formData: FormData): Promise<State> {
  const name = String(formData.get('name') || '').trim()
  if (name.length < 2) return { error: '用戶名至少 2 個字符' }

  const res = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify({ name }),
  })
  if (!res.ok) return { error: '創建失敗，請重試' }

  return { values: { name } }
}

export function UserForm() {
  const [state, action, pending] = useActionState(createUser, {})
  return (
    <form action={action}>
      <input name="name" aria-invalid={!!state.error} />
      {state.error && <span role="alert">{state.error}</span>}
      <button disabled={pending}>創建</button>
    </form>
  )
}

3.3 Actions 的優勢總結

自動 Pending：不用手寫 loading 態。
請求去重：React 會自動取消過期請求（如快速點擊）。
與 RSC 協作：服務端 Action 可直接操作數據庫，繞過了傳統的 API 層。
漸進增強：即使 JS 未加載，原生 <form action> 仍可提交。

四、Server Components 實戰

Server Components（RSC）是 React 19 最具顛覆性的能力，但也是心智負擔最重的部分。

4.1 核心心智模型

維度	Server Component	Client Component
執行位置	服務端（Node/Bun）	瀏覽器 + 服務端（hydration）
能訪問數據庫	✅ 直接	❌ 需經過 API
能用 `useState` / `useEffect`	❌	✅
包體積	0 KB（不進 bundle）	計入 bundle
文件標記	默認（無 `'use client'`）	頂部加 `'use client'`

4.2 `'use client'` 與 `'use server'` 邊界

tsx

// app/page.tsx —— 這是一個 Server Component（默認）
import { db } from '@/lib/db'
import { LikeButton } from './LikeButton' // 這個組件是客戶端組件

export default async function Page() {
  const posts = await db.post.findMany() // 直接在服務端讀數據庫
  return (
    <main>
      <h1>文章列表</h1>
      {posts.map(p => (
        <article key={p.id}>
          <h2>{p.title}</h2>
          <LikeButton initialCount={p.likes} /> {/* 把服務端數據傳給客戶端組件 */}
        </article>
      ))}
    </main>
  )
}

tsx

// LikeButton.tsx
'use client' // ← 標記邊界：從這裡往下都是客戶端組件
import { useOptimistic } from 'react'

export function LikeButton({ initialCount }: { initialCount: number }) {
  // 這裡可以用 hooks
  return <button>👍 {initialCount}</button>
}

邊界規則（重要）：

'use client' 是 單向向下 的：被標記的組件及其所有子組件都變成客戶端組件。
服務端組件不能 import 客戶端組件後再把函數作為 props 傳回去（只能傳可序列化的值）。
'use server' 標記的函數只能 return 可序列化的值（不能返回 JSX 裡的函數）。

4.3 何時用 RSC？

場景	推薦
數據獲取 + 渲染（博客/列表）	Server Component
交互（按鈕/表單/動畫）	Client Component
既要數據又要交互	服務端取數 → props 傳給客戶端組件
第三方庫含 `window` 訪問	必須 `'use client'`

五、文檔元數據原生支持

在 React 19 之前，要在 SPA 裡改 <title> 必須用 react-helmet 或框架方案。現在 原生支持。

5.1 在組件裡直接寫 `<title>` / `<meta>`

tsx

function BlogPost({ post }: { post: Post }) {
  return (
    <article>
      <title>{post.title}</title>          {/* ✅ 原生支持 */}
      <meta name="description" content={post.excerpt} />  {/* ✅ 原生支持 */}
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  )
}

React 會自動把這些標籤「提升」到 <head>，並在組件卸載時清理。這在 SEO 場景 下價值巨大——每個頁面可以聲明自己的標題和描述，無需額外庫。

📌 本站實踐：本站（y-m.top）是 VitePress 技術棧，文章 frontmatter 自帶 title / description，構建時注入結構化數據。React 19 的元數據方案與這種「每頁獨立 SEO」思路一致，對有 SEO 需求的 React 項目是直接利好。詳見 VitePress SEO 優化指南。

六、其他重要更新

6.1 `ref` 可直接作為 prop

告別 forwardRef！

tsx

// React 18
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />)

// React 19 —— ref 就是普通 prop
function Input({ ref, ...props }: { ref?: Ref<HTMLInputElement> } & InputHTMLAttributes<HTMLInputElement>) {
  return <input ref={ref} {...props} />
}

// 使用
<Input ref={myRef} />

forwardRef 已被官方標記為 可棄用（deprecated），新代碼不要再用了。

6.2 `use(Context)` 條件調用

見 §2.4，use 讓 Context 讀取不再受「必須在頂層 Hook 規則」限制，便於做條件分支。

6.3 資源預加載

React 19 提供 use(preload)、use(preinit) 等原生資源提示：

tsx

import { use } from 'react'

function Avatar({ userPromise }: { userPromise: Promise<User> }) {
  // 預加載腳本/樣式，優化首屏
  use(preload, 'https://cdn.example.com/avatar.js', { as: 'script' })
  const user = use(userPromise)
  return <img src={user.avatar} />
}

6.4 `useDeferredValue` 與 `useTransition` 增強

這兩個 18 引入的 Hook 在 19 中更穩定，配合 useOptimistic 可構建絲滑的搜索/篩選體驗。

七、項目實戰：Vite + React 19

我們用 Vite 搭建一個最小但完整的 React 19 應用，包含「待辦列表 + 儀表盤」兩個頁面。

7.1 初始化

bash

pnpm create vite@latest my-app --template react-ts
cd my-app
pnpm add react@19 react-dom@19
pnpm dev

📌 Vite 是 React 19 的最佳開發搭檔，詳見 Vite 構建工具完全指南。本實戰也用 Tailwind CSS v4 做樣式。

7.2 待辦列表（Actions + useOptimistic）

tsx

// TodoForm.tsx
'use client'
import { useOptimistic, useState } from 'react'

type Todo = { id: number; text: string; done: boolean }

export function TodoList({ initial }: { initial: Todo[] }) {
  const [todos, setTodos] = useState(initial)
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo: Todo) => [...state, newTodo],
  )

  async function addTodo(formData: FormData) {
    const text = String(formData.get('text') || '')
    const temp: Todo = { id: Date.now(), text, done: false }
    addOptimistic(temp) // 樂觀插入
    const saved = await fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify({ text }),
    }).then(r => r.json())
    setTodos(prev => [...prev.filter(t => t.id !== temp.id), saved])
  }

  return (
    <>
      <form action={addTodo}>
        <input name="text" placeholder="新任務…" />
        <button>添加</button>
      </form>
      <ul>
        {optimisticTodos.map(t => (
          <li key={t.id} className={t.done ? 'line-through' : ''}>{t.text}</li>
        ))}
      </ul>
    </>
  )
}

7.3 儀表盤（Suspense + use）

tsx

// Dashboard.tsx
import { Suspense, use } from 'react'

function Stats({ dataPromise }: { dataPromise: Promise<Stat[]> }) {
  const data = use(dataPromise) // 讀取服務端流式數據
  return (
    <div className="grid grid-cols-3 gap-4">
      {data.map(s => (
        <div key={s.label} className="p-4 rounded-lg bg-white shadow">
          <p className="text-gray-500">{s.label}</p>
          <p className="text-2xl font-bold">{s.value}</p>
        </div>
      ))}
    </div>
  )
}

export function Dashboard({ dataPromise }: { dataPromise: Promise<Stat[]> }) {
  return (
    <Suspense fallback={<div>加載中…</div>}>
      <Stats dataPromise={dataPromise} />
    </Suspense>
  )
}

7.4 目錄結構建議

src/
├── app/
│   ├── page.tsx          # Server Component（默認）
│   └── actions.ts        # 'use server' 服務端動作
├── components/
│   ├── TodoList.tsx      # 'use client' 交互組件
│   └── Dashboard.tsx     # 混合組件
├── lib/
│   └── db.ts             # 數據庫訪問（僅服務端）
└── main.tsx              # 客戶端入口

八、React vs Vue 選型對比

本站是 Vue / VitePress 技術棧，但 React 19 的更新也值得前端同學關注。下面是客觀對比。

8.1 能力對比表

維度	React 19	Vue 3	說明
心智模型	JSX + Hooks	模板 + Composition API	各有所愛
服務端組件	RSC 正式穩定	無原生 RSC（Nuxt 有 SSR）	React 領先
表單/狀態	Actions + useOptimistic	`ref` + `reactive` 天然響應式	Vue 心智更輕
元數據	原生 `<title>`	需 `@vueuse/head` / Nuxt	旗鼓相當
生態	最大（庫最多）	適中（官方庫質量高）	React 勝
學習曲線	中（Hooks 規則多）	低（模板直觀）	Vue 勝
跨端	React Native 成熟	uni-app / Taro	各有所長

8.2 互轉建議

Vue → React：重點突破「Hooks 依賴數組」和「RSC 邊界」，其餘 API 概念基本一一對應（ref≈useRef，computed≈useMemo，watch≈useEffect）。
React → Vue：重點適應「模板語法」和「響應式自動追蹤」，會發現很多 Redux 樣板可以刪掉。

💡 本站觀點：內容型站點（如博客、文檔）用 Vue + VitePress 更省心；需要複雜數據交互的中後臺或全棧應用，React 19 + RSC 的體驗已非常成熟。兩者並非零和，按團隊儲備選即可。更多 Vue 實踐見 Vue 3 Composition API 最佳實踐。

九、18 → 19 升級遷移指南

9.1 破壞性變更清單

變更	影響	處理
`forwardRef` 棄用	大量舊組件	改為 `ref` prop（§6.1）
`ReactDOM.render` 移除	極老項目	用 `createRoot`
`propTypes` 移除	舊代碼警告	刪除或轉 TS
`useRef` 默認值語義變化	邊界情況	檢查 `undefined` 判斷
`StrictMode` 雙調用更嚴格	副作用	確保冪等
`useEffect` 清理時機調整	定時器/訂閱	完善 cleanup
JSX 命名空間組件移除	罕見	改顯式導入
`react-test-renderer` 棄用	測試	轉 `@testing-library/react`

9.2 升級步驟

bash

# 1. 升級核心包
pnpm add react@^19 react-dom@^19

# 2. 升級類型（如用 TS）
pnpm add -D @types/react@^19 @types/react-dom@^19

# 3. 升級官方庫（必須兼容 19）
pnpm add react-dom@19        # react-dom/client 已穩定
pnpm update @tanstack/react-query react-router-dom  # 確保版本支持 19

# 4. 跑 codemod（官方提供）
npx react-codemod@latest react-19 <path>

9.3 第三方庫兼容性

升級前先確認依賴已支持 19：

bash

# 檢查 peerDependencies 衝突
pnpm install 2>&1 | grep -i "react"

常見已適配庫：react-router-dom@7、@tanstack/react-query@5、zustand@5、framer-motion@11。仍未適配的庫可用 --legacy-peer-deps 臨時繞過，但建議等官方更新。

十、常見問題（FAQ）

Q1：Server Components 會不會讓前端變複雜？

會的，這是 RSC 最大的爭議點。它引入了新的心智邊界（'use client' / 'use server'），初學者容易困惑「為什麼這個 hook 用不了」。建議：先用純 Client Component 跑通功能，再逐步把「只讀數據展示」下沉到 Server Component。不要過度使用 RSC。

Q2：Suspense 和 use(Promise) 是什麼關係？

use(promise) 會「掛起」當前組件，直到 Promise 完成或失敗；而 <Suspense fallback> 負責捕獲這個「掛起」狀態並顯示佔位。簡單說：use 觸發等待，Suspense 決定等待時顯示什麼。兩者配合實現流式渲染。

Q3：React 19 還需要 Redux / Zustand 嗎？

看規模。React 19 的 useActionState + 服務端 Action 已經能替代大量「表單/請求」類的 Redux 場景。但對於跨頁面全局狀態（如用戶登錄態、主題），Zustand / Redux Toolkit 仍然更合適。推薦組合：Actions 管「寫入」，輕量 store 管「全局讀」。

Q4：React 19 的 Actions 能在純 CSR（無框架）下用嗎？

可以。useActionState / useOptimistic 都是純客戶端 Hook，不需要 Next.js。只要你的 action 函數里自己寫 fetch 調用即可（如 §3.2 示例）。RSC 才需要框架支持。

Q5：從 Vue 轉 React 19，最難的坑是什麼？

兩個：① Hooks 依賴數組——忘記加依賴會導致閉包拿到舊值；② RSC 邊界——在 Server Component 裡誤用 useState。建議初期把所有組件都標 'use client'，跑通後再優化。

Q6：useOptimistic 失敗後會怎樣？

React 會自動將 UI 回滾到 useOptimistic 調用前的真實狀態，你無需手寫回滾。如果希望展示錯誤，可以在 Action 裡 throw 或在 useActionState 的 state 中返回錯誤信息。

Q7：React 19 對 SEO 有什麼實質幫助？

兩點：① 原生 <title> / <meta> 讓每頁獨立元數據更簡單；② RSC 默認在服務端渲染 HTML，搜索引擎能直接抓到內容（無需等待 JS hydrate）。對內容站點是直接利好。配合結構化數據效果更好，參考 VitePress SEO 指南。

Q8：學習 React 19 的推薦路徑？

先精通 React 18 的 Hooks（useState / useEffect / useContext）。
再學 Actions 三件套（useActionState / useOptimistic / useFormStatus）。
最後理解 RSC（從「Server 取數 → props 下發」的簡單模式開始）。
用 Vite 跑一遍 §7 實戰，比看文檔效率高 3 倍。

總結

React 19 把「表單提交」「服務端數據」「文檔元數據」三件最高頻的事收編進框架，標誌著 React 從 UI 庫向全棧框架的跨越。對新項目應直接採用；對老項目可漸進升級，優先享受 ref prop 和 Actions 的紅利。

延伸閱讀：

Vite 構建工具完全指南 — React 19 開發環境最佳實踐
Tailwind CSS v4 實戰指南 — 配合 React 的樣式方案
Vue 3 Composition API 最佳實踐 — Vue 側技術選型對照
TypeScript 高級類型與實戰技巧 — React + TS 類型安全
VitePress SEO 優化指南 — 本站同款 SEO 思路

⚛️ React 19 不是終點，而是「全棧 React」的起點。先用起來，再慢慢吃透 RSC——別被邊界規則嚇退，絕大多數應用用 Client Component 就夠。

延伸阅读

免责声明

本文仅供技术交流和学习参考。涉及第三方服务的链接可能包含 sponsored 标记，请自行核实服务条款、价格和可用性，并遵守当地法律法规。

React 19 實戰指南 2026 ​

一、React 19 核心變化 ​

1.1 React 18 vs 19 關鍵差異 ​

1.2 誰該升級？ ​

二、四大新 Hook 詳解 ​

2.1 useActionState —— 表單狀態機 ​

2.2 useOptimistic —— 樂觀更新 ​

2.3 useFormStatus —— 在子組件讀取表單狀態 ​

2.4 use —— 讀取資源與 Context ​

三、Actions 與表單處理 ​

3.1 三種 Actions 來源 ​

3.2 完整表單示例（含校驗 + 錯誤） ​

3.3 Actions 的優勢總結 ​

四、Server Components 實戰 ​

4.1 核心心智模型 ​

4.2 'use client' 與 'use server' 邊界 ​

4.3 何時用 RSC？ ​

五、文檔元數據原生支持 ​

5.1 在組件裡直接寫 <title> / <meta> ​

六、其他重要更新 ​

6.1 ref 可直接作為 prop ​

6.2 use(Context) 條件調用 ​

6.3 資源預加載 ​

6.4 useDeferredValue 與 useTransition 增強 ​

七、項目實戰：Vite + React 19 ​

7.1 初始化 ​

7.2 待辦列表（Actions + useOptimistic） ​

7.3 儀表盤（Suspense + use） ​

7.4 目錄結構建議 ​

八、React vs Vue 選型對比 ​

8.1 能力對比表 ​

8.2 互轉建議 ​

九、18 → 19 升級遷移指南 ​

9.1 破壞性變更清單 ​

9.2 升級步驟 ​

9.3 第三方庫兼容性 ​

十、常見問題（FAQ） ​

總結 ​

延伸阅读 ​

React 19 實戰指南 2026

一、React 19 核心變化

1.1 React 18 vs 19 關鍵差異

1.2 誰該升級？

二、四大新 Hook 詳解

2.1 `useActionState` —— 表單狀態機

2.2 `useOptimistic` —— 樂觀更新

2.3 `useFormStatus` —— 在子組件讀取表單狀態

2.4 `use` —— 讀取資源與 Context

三、Actions 與表單處理

3.1 三種 Actions 來源

3.2 完整表單示例（含校驗 + 錯誤）

3.3 Actions 的優勢總結

四、Server Components 實戰

4.1 核心心智模型

4.2 `'use client'` 與 `'use server'` 邊界

4.3 何時用 RSC？

五、文檔元數據原生支持

5.1 在組件裡直接寫 `<title>` / `<meta>`

六、其他重要更新

6.1 `ref` 可直接作為 prop

6.2 `use(Context)` 條件調用

6.3 資源預加載

6.4 `useDeferredValue` 與 `useTransition` 增強

七、項目實戰：Vite + React 19

7.1 初始化

7.2 待辦列表（Actions + useOptimistic）

7.3 儀表盤（Suspense + use）

7.4 目錄結構建議

八、React vs Vue 選型對比

8.1 能力對比表

8.2 互轉建議

九、18 → 19 升級遷移指南

9.1 破壞性變更清單

9.2 升級步驟

9.3 第三方庫兼容性

十、常見問題（FAQ）

總結

延伸阅读