React 19 新特性

React 19 引入了多项新特性和改进，旨在提升开发都体验和应用性能。

1. Actions（动作）

Actions 简化了异步操作的处理，自动管理待处理状态、错误、乐观更新和表单提交。开发者用 useTransition 来处理待处理状态，确保 UI 在数据变化时保持响应性。例如：

function UpdateName() {const [name, setName] = useState("");const [error, setError] = useState(null);const [isPending, startTransition] = useTransition();const handleSubmit = () => {startTransition(async () => {const error = await updateName(name);if (error) {setError(error);return;}redirect("/path");});};return (<div><input value={name} onChange={(event) => setName(event.target.value)} /><button onClick={handleSubmit} disabled={isPending}>Update</button>{error && <p>{error}</p>}</div>);
}

2. 新的 Hook: useOptimistic

useOptimistic 用于在异步进行时乐观地显示最终状态，提升用户体验。例如：

function ChangeName({ name, setName }) {const [error, submitAction, isPending] = useActionState(async (previousState, formData) => {const error = await updateName(formData.get("name"));if (error) {return error;}redirect("/path");return null;},null);return (<form action={submitAction}><input type="text" name="name" /><button type="submit" disabled={isPending}>Update</button>{error && <p>{error}</p>}</form>);
}

3. 新的 API: use

useAPI 允许在渲染中读取资源，如 Promise 和上下文，简化异步数据处理。例如：

import { use } from 'react';function Comments({ commentsPromise }) {const comments = use(commentsPromise);return comments.map(comment => <p key={comment.id}>{comment}</p>);
}function Page({ commentsPromise }) {return (<Suspense fallback={<div>Loading...</div>}><Comments commentsPromise={commentsPromise} /></Suspense>);
}

4. 服务器组件 (Server Components)

React 19 有了稳定服务器组件的支持，允许在服务器端渲染部分或全部，提升性能和 SEO。例如：

// ServerUserInfo.react.server.js
import { db } from './database';async function fetchUserData(userId) {return db.query('SELECT * FROM users WHERE id = $1', [userId]);
}function ServerUserInfo({ userId }) {const userData = fetchUserData(userId);return (<div><h1>User Information</h1><p>Name: {userData.name}</p><p>Email: {userData.email}</p></div>);
}

5. 支持自定义元素

React 19 完全支持自定义元素，允许无缝集成 Web 组件。例如：

function CustomElementWrapper() {return <my-custom-element prop="value" />;
}

6. 文档元数据支持

React 19 允许直接在组件中渲染 <title>、<meta> 等标签，自动提升到文档头部优化 SEO 管理。例如：

function SEOComponent() {return (<><title>页面标题</title><meta name="description" content="页面描述" /></>);
}

7. 样式表优先级设置

React 19 引入了样式表优先级设置，允许开发者控制样式表的应用顺序，确保预期应用。例如：

function ComponentOne() {return (<Suspense fallback="loading..."><link rel="stylesheet" href="foo" precedence="default" /><link rel="stylesheet" href="bar" precedence="high" /><article className="foo-class bar-class">{/* ... */}</article></Suspense>);
}

8. 在任何组件中渲染异步脚本

React 19 允许在任何组件中渲染异步脚本，自动处理去重，简化脚本管理。例如：

function MyComponent() {return (<div><script async src="..." />Hello World</div>);
}