React 19 發生了什麼變化
React 19 不是一個小更新，而是一個範式轉移。穩定的伺服器元件、新的鉤子和 React 編譯器從根本上改變了開發人員編寫應用程式的方式。
穩定的伺服器元件
React 伺服器元件 (RSC) 現已投入生產。透過在伺服器上渲染並將 HTML 發送到客戶端，它們可以顯著減小包的大小。
// app/page.jsx — Server Component (default)
export default async function Home() {
const posts = await db.query('SELECT * FROM posts');
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
使用 useState 或 useEffect 的元件必須在頂部宣告「use client」。
use() 鉤子
最值得注意的新功能是 use() 鉤子，它允許您直接在元件內部解析 Promise。
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(c => <p key={c.id}>{c.text}</p>);
}
與傳統的鉤子不同，use() 在條件語句和迴圈內部工作。
表單的伺服器操作
伺服器操作讓您無需編寫客戶端 JavaScript 即可處理表單提交。
export default function CreatePost() {
async function handleSubmit(formData) {
'use server';
const title = formData.get('title');
await db.execute('INSERT INTO posts (title) VALUES (?)', [title]);
revalidatePath('/');
}
return (
<form action={handleSubmit}>
<input name="title" required />
<button type="submit">Create</button>
</form>
);
}
反應編譯器
React Compiler（以前稱為 React Forget）會自動插入 useMemo 和 useCallback 呼叫。在 v19 相容的程式碼庫中不再需要手動優化掛鉤。
已棄用的 API
- 完全刪除了像 componentWillMount 這樣的舊生命週期方法
- ReactDOM.render() 完全被 createRoot() 取代
- PropTypes官方支援結束
從 React 18 遷移通常需要一天到一周的時間，具體取決於專案規模。