React 19 正式发布及实用功能指南

介绍

React 19 代表了前端开发的重大范式转变。

以前仅限于 Next.js 等元框架的功能（例如用于表单处理的 React Server Components (RSC) 和 Actions API）现在已正式集成到稳定的核心 React 库中。

本指南重点介绍了 React 19 中最重要的功能，提供了实用的代码示例和升级技巧来清理您的代码库。

1. 使用 Actions API 简化异步状态

React 19 中的一个突出功能是引入 Actions，旨在简化管理异步突变、加载器覆盖和表单提交。

从历史上看，跟踪异步请求需要手动声明待处理状态 (isPending)、成功标志和错误响应。 React 19 使用标准钩子自动处理这些状态。

使用 `useActionState` 提交表单

import { useActionState } from 'react';

// Async form action handler
async function updateProfile(prevState, queryData) {
  try {
    await api.post("/profile", queryData);
    return { success: true, message: "Profile saved successfully!" };
  } catch (err) {
    return { success: false, message: err.message };
  }
}

function ProfileForm() {
  // state: return value from the action
  // formAction: handler passed to the HTML form action attribute
  // isPending: boolean tracking if the async action is currently executing
  const [state, formAction, isPending] = useActionState(updateProfile, null);

  return (
    <form action={formAction}>
      <input type="text" name="username" required />
      <button type="submit" disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>
      {state && <p>{state.message}</p>}
    </form>
  );
}

useActionState（以前在测试阶段称为 useFormState）将异步处理程序直接链接到本机表单属性，自动管理加载指示器。

使用 `useOptimistic` 进行乐观更新

对于聊天发送或“喜欢”按钮等交互操作，React 19 引入了 useOptimistic。这允许您在服务器请求完成之前立即更新 UI，并在请求失败时使用内置回滚功能。

2. 通过新的 `use` API 进行资源解析

React 19 引入了 use，这是一种新的类似钩子的 API，旨在解析 Promises 并在渲染期间动态读取 Context 值。

与标准 React 挂钩（如 useEffect 或 useContext）不同，use 可以有条件地（在 if 语句内）和循环内调用。

使用 `Suspense` 解决渲染中的 Promise

import { use, Suspense } from 'react';

// Promise defined outside rendering loop
const dataPromise = fetchData();

function Content() {
  // Directly read value from Promise inside render
  const data = use(dataPromise);
  return <div>Loaded Profile: {data.name}</div>;
}

function App() {
  return (
    // Render loading indicator until Promise resolves
    <Suspense fallback={<p>Loading profile...</p>}>
      <Content />
    </Suspense>
  );
}

当您将 Promise 传递给 use API 时，React 会暂停渲染，直到 Promise 解析为止，将加载状态委托给最近的 <Suspense> 包装器。

3. ref 作为标准 Prop（弃用forwardRef）

React 19 中一个令人欢迎的生活质量变化是简化了子组件的引用传递 (refs)。

以前，将 ref 向下传递给子元素需要将组件包装在 forwardRef() 中，这会添加不必要的样板。在 React 19 中， ref 被视为标准属性。

简化的引用语法

// No forwardRef needed! Access 'ref' directly from props
function MyInput({ label, ref }) {
  return (
    <label>
      {label}
      <input ref={ref} />
    </label>
  );
}

// Parent rendering usage remains identical
function Parent() {
  const inputRef = useRef(null);
  return <MyInput label="Username" ref={inputRef} />;
}