写这篇文章的时候，React 19还在RC阶段，正式版预计今年晚些时候发布。但很多人已经开始在项目中试用了，官方文档也更新了大部分新特性的说明。

关于React 19的新特性，网上已经有很多介绍文章了，比如Actions、useOptimistic、useActionState、ref作为prop、文档元数据API等等。但很多文章只讲了基础用法，没有深入讲一些进阶的技巧和最佳实践。

这篇文章就来聊聊React 19中那些容易被忽略但非常实用的进阶技巧。假设你已经了解了React 19的基本新特性，我们直接深入。

Actions的进阶用法

Actions是React 19最重要的新特性之一。基础用法很简单：把一个异步函数传给form的action属性，或者用useTransition包裹，React会自动管理pending状态。

但Actions的能力远不止于此。

第一个进阶用法是在Actions中进行乐观更新。配合useOptimistic，你可以在提交Action的时候立即更新UI，然后等服务端响应回来之后再同步最终状态。这个模式在表单提交、点赞、收藏等场景下非常实用。

function LikeButton({ post }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes,
    (state, newLike) => state + (newLike ? 1 : -1)
  );
  const [isPending, startTransition] = useTransition();

  async function toggleLike() {
    startTransition(async () => {
      addOptimisticLike(!post.liked);
      await fetch(`/api/posts/${post.id}/like`, { method: 'POST' });
    });
  }

  return (
    <button onClick={toggleLike} disabled={isPending}>
      {optimisticLikes} 赞
    </button>
  );
}

这里的关键是：addOptimisticLike在startTransition内部调用，这样乐观更新和异步操作是在同一个过渡中，React会把它们当作一个原子操作来处理。如果操作失败，乐观更新会自动回滚。

第二个进阶用法是Actions的错误处理。在React 19中，Action抛出的错误可以被ErrorBoundary捕获。这意味着你可以用统一的错误边界来处理表单提交、数据获取等异步操作的错误，而不需要在每个组件里写try-catch。

function MyForm() {
  async function submitAction(formData) {
    const res = await fetch('/api/submit', { method: 'POST', body: formData });
    if (!res.ok) throw new Error('提交失败');
  }

  return (
    <ErrorBoundary fallback={<FormError />}>
      <form action={submitAction}>
        {/* 表单内容 */}
      </form>
    </ErrorBoundary>
  );
}

第三个进阶用法是Actions和Server Components的配合。在Server Components中，你可以直接把一个服务端函数作为action传给客户端组件的form。这个函数会在服务端执行，不需要写API接口。这就是React所谓的"Server Actions"，它极大地简化了前后端的数据交互。

useActionState的隐藏能力

useActionState（之前叫useFormState）是React 19新增的Hook，用来管理表单提交的状态。很多人只知道它的基本用法，但它有一些隐藏的能力。

首先，useActionState返回的state可以是任何类型，不一定是字符串。你可以用它来返回表单提交后的复杂数据，比如验证错误信息、提交后的实体ID、重定向URL等等。

function SignupForm() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      const errors = validate(formData);
      if (Object.keys(errors).length > 0) {
        return { errors };
      }
      const user = await createUser(formData);
      return { userId: user.id };
    },
    { errors: {} }
  );

  return (
    <form action={formAction}>
      {state.errors?.email && <p>{state.errors.email}</p>}
      <input name="email" />
      <button disabled={isPending}>注册</button>
    </form>
  );
}

其次，useActionState的第二个参数（初始状态）可以是一个函数，用来惰性初始化。这和useState的惰性初始化类似，如果初始状态的计算成本比较高，可以用函数的形式。

第三，useActionState可以和useOptimistic配合使用，实现更复杂的乐观更新模式。比如在表单提交的时候，既显示乐观的UI状态，又保留服务端返回的真实状态。

ref作为prop的进阶用法

React 19让ref成为了一个普通的prop，不需要forwardRef了。这看起来是个小改动，但实际上带来了一些新的可能性。

首先，你可以给组件传多个ref了。以前forwardRef只能转发一个ref，现在ref只是一个普通的prop，你可以传任意多个：

function MyComponent({ ref, innerRef, ...props }) {
  return (
    <div ref={ref}>
      <input ref={innerRef} {...props} />
    </div>
  );
}

其次，ref可以和其他prop一样有默认值、可以做条件判断、可以传递给深层组件。这让ref的使用更加灵活。

第三，ref cleanup函数。React 19支持在ref回调中返回一个清理函数，当ref被移除或替换时会调用这个函数。这在管理第三方库实例的时候非常有用：

function Chart({ data }) {
  const ref = useRef(null);

  return (
    <div
      ref={(node) => {
        if (!node) return;
        const chart = new Chart(node, { data });
        return () => chart.destroy();
      }}
    />
  );
}

以前你需要在useEffect里做初始化和清理，现在可以直接在ref回调里完成，代码更简洁。

useContext的改进

React 19对useContext做了一个重要的改进：支持了context selector。这意味着你可以只订阅context中的部分数据，而不是整个context，从而减少不必要的重渲染。

const theme = useContext(ThemeContext, (c) => c.theme);
const setTheme = useContext(ThemeContext, (c) => c.setTheme);

在这个例子中，theme变化的时候组件会重渲染，但setTheme变化的时候不会（因为setTheme通常是稳定的）。而在以前，只要context的任何一部分变化，所有使用这个context的组件都会重渲染。

这个特性看起来简单，但对于大型应用的性能优化非常重要。以前为了避免context导致的重渲染，我们需要用各种hack（比如拆分context、用useMemo包裹、用第三方状态管理库）。现在有了context selector，这些问题都迎刃而解了。

需要注意的是，selector函数应该是纯函数，而且不要在selector里创建新对象（比如useContext(Ctx, (c) => ({ a: c.a, b: c.b }))），否则每次渲染都会返回新对象，导致无限重渲染。

文档元数据API

React 19新增了文档元数据API，允许你在组件中直接渲染title、meta、link等标签，React会自动把它们提升到document的head中。

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <link rel="canonical" href={post.url} />
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

这个特性在SSR场景下特别有用。以前你需要用react-helmet之类的第三方库来管理head标签，现在React原生支持了。而且React会自动处理优先级和去重，比如多个组件渲染了同一个meta标签，最后一个会生效。

进阶用法是在Server Components中使用元数据API。因为Server Components在服务端渲染，元数据可以直接输出到HTML的head中，不需要客户端JavaScript，对SEO非常友好。

use和资源加载

React 19引入了一个新的Hook叫use，它可以读取Promise和Context的值。这个Hook最强大的地方在于，它可以在循环和条件语句中调用，不像其他Hook那样受规则限制。

use最常见的用法是配合Suspense做数据获取：

function Comments({ postId }) {
  const comments = use(fetchComments(postId));
  return comments.map(c => <Comment key={c.id} comment={c} />);
}

当fetchComments返回的Promise还在pending的时候，use会抛出这个Promise，Suspense会捕获并显示fallback。Promise resolve之后，组件会重新渲染，use返回resolve的值。

进阶用法是use和缓存的配合。为了避免重复请求，你可以把Promise缓存起来：

const cache = new Map();

function fetchData(id) {
  if (!cache.has(id)) {
    cache.set(id, fetch(`/api/data/${id}`).then(res => res.json()));
  }
  return cache.get(id);
}

这样即使组件多次渲染，也只会发起一次请求。React官方也在开发一个内置的缓存API（React.cache），未来会成为标准方案。

Server Components的实用模式

Server Components是React 19的重头戏。很多人知道它的基本概念，但在实际项目中怎么用好它，还需要一些经验。

第一个实用模式是"数据获取放在Server Component，交互逻辑放在Client Component"。Server Component可以直接访问数据库、文件系统等服务端资源，不需要写API接口。把数据获取的逻辑放在Server Component里，把需要交互的部分（按钮、表单、状态管理）抽成Client Component，这样可以最小化客户端的JS体积。

第二个模式是"Server Component作为数据提供者"。你可以写一个Server Component，它负责获取数据，然后把数据作为props传给子组件。这样子组件不需要关心数据从哪里来，可以是纯展示组件，也可以是Client Component。

async function PostPage({ id }) {
  const post = await db.posts.findUnique({ where: { id } });
  return (
    <div>
      <PostHeader post={post} />
      <PostContent post={post} />
      <Comments postId={id} />
    </div>
  );
}

第三个模式是"渐进式 hydration"。通过把大的Client Component拆成小的、独立的Client Component，React可以按需hydrate，不需要一次性hydrate整个页面。这可以大幅提升首屏交互性能。

第四个模式是"Server Actions做表单处理"。在Server Component中定义一个async函数，直接作为form的action。这个函数在服务端执行，可以直接操作数据库，不需要API层。配合useActionState和useOptimistic，可以实现非常流畅的表单提交体验。

性能优化的新工具

React 19带来了一些新的性能优化工具。

第一个是useDeferredValue的改进。在React 19中，useDeferredValue支持了一个initialValue参数，可以在首次渲染时使用初始值而不是延迟值。这对于SSR场景很有用，可以避免首次渲染的内容和hydration后的内容不一致。

第二个是startTransition的批量更新优化。React 19改进了过渡更新的调度算法，使得在高优先级更新（比如用户输入）和低优先级更新（比如列表过滤）同时发生时，用户体验更加流畅。

第三个是memo的默认行为改进。在React 19中，React.memo默认会对props做浅比较，而且对于函数类型的props也会正确处理。以前如果父组件传了一个内联函数，memo会失效，因为每次渲染函数都是新的。现在React 19会自动处理这种情况（配合useCallback或者自动memoization）。

第四个是代码分割的改进。React 19对React.lazy做了优化，支持了更细粒度的代码分割，而且和Suspense、Server Components的配合更加紧密。

写在最后

React 19的新特性很多，这篇文章只覆盖了其中一部分进阶用法。还有很多细节值得深入研究，比如并发特性的高级用法、自定义Hook的新模式、和第三方库的兼容方案等等。

在试用React 19的过程中，我最大的感受是：React正在从一个"UI库"演变成一个"全栈框架"。Server Components、Server Actions、元数据API、资源加载API，这些特性让React不再只关心客户端的UI渲染，而是覆盖了从服务端数据获取到客户端交互的完整流程。

这个转变是渐进的，你不需要一下子把所有新特性都用上。可以先从Actions、useOptimistic这些客户端特性开始，然后逐步引入Server Components。React团队也一直在强调渐进式采用，老的代码不需要重写，新的代码可以用新特性。

当然，React 19还在RC阶段，有些API可能还会变化，生态也还在跟进中。在生产环境中使用需要谨慎，建议先在非核心项目中试用，积累经验之后再推广。

技术在不断进步，React也在不断进化。作为开发者，保持学习和关注是必要的。但同时也要理性看待新技术，不要为了用而用，要根据项目的实际需求来选择合适的技术方案。

希望这篇文章能帮你更深入地理解React 19的新特性。如果你有其他的进阶技巧，欢迎交流。