React 19 新特性

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

1. Actions（动作）

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

javascript 复制代码

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 用于在异步进行时乐观地显示最终状态，提升用户体验。例如：

javascript 复制代码

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 和上下文，简化异步数据处理。例如：

javascript 复制代码

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。例如：

javascript 复制代码

// 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 组件。例如：

javascript 复制代码

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

6. 文档元数据支持

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

javascript 复制代码

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

7. 样式表优先级设置

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

javascript 复制代码

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 允许在任何组件中渲染异步脚本，自动处理去重，简化脚本管理。例如：

javascript 复制代码

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