React 19.3 正式发布｜稳定ViewTransition动画与Fragment Refs

React 19.3 正式发布了。

如果放在几年前，这条消息足以让前端圈热闹好几天。新 API 怎么用，旧项目要不要升级，React 和 Vue 谁又领先了一步，开发者能从发布当天一直聊到周末。

这次最抢眼的却是围绕发布消息出现的几句感慨。

有人开玩笑，如果 React 新版本获得的关注还赶不上 GPT-6 Astra，那编程问题大概已经解决了。

也有人怀念 Angular、React 和 Vue 每次发布新版本都能引发热议的日子。

另一条转发说得更直白。过去框架发新版是大事，现在大家都在盯着 AI 模型。

玩笑里有几分真实。前端框架还在更新，开发者的兴奋点已经换了。以前能刷屏的版本发布，如今很可能只在前端社区里短暂热闹一下。

React 19.3 就是在这种气氛里来了。

我把官方博客和更新列表从头看了一遍。这次没有新的 Hooks 大礼包，也没有重新教大家写组件。React 团队把 View Transitions 和 Fragment Refs 转成稳定 API，又补上了 browser()、Trusted Types 支持，以及 Server Components 里的 Context 用法。

热度或许不如从前，这些改动依然值得前端开发者看一眼。

页面过渡动画终于能放心用了

React 19.3 最显眼的变化，是 <ViewTransition> 结束实验状态。

组件进入、退出、移动、改变尺寸时，可以用它接入浏览器的 View Transition API。默认效果是平滑的交叉淡入淡出，也能分别设置 enter、exit、update 和 share 动画。

import { ViewTransition, startTransition, useState } from 'react';

function Demo() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button
        onClick={() => {
          startTransition(() => setVisible(v => !v));
        }}
      >
        切换
      </button>

      {visible && (
        <ViewTransition>
          <ProfileCard />
        </ViewTransition>
      )}
    </>
  );
}

这里有个容易漏掉的条件。普通的紧急更新不会触发动画，更新需要由 startTransition、Suspense 内容揭示或 useDeferredValue 这类 Transition 引起。React 这样处理很合理，按钮点击后的关键反馈应该立刻出现，动画不能抢在响应速度前面。

addTransitionType 也一起稳定了。轮播图向前翻和向后翻，状态更新看起来很像，动画方向却应该相反。现在可以在更新时标记 next 或 previous，同一个<ViewTransition>再按类型选择不同动画，不用为了方向硬拆两套组件。

我更喜欢它和 Suspense 的配合。加载占位内容可以马上出现，真实内容准备好以后再平滑切入。图片和字体也能进入这套等待流程，页面不用看着资源什么时候加载完，再突然闪一下。

官方也给了一个克制的提醒。已经缓存、能够立即出现的内容，不适合反复加动画。动画用在加载状态到最终内容的变化上，效果会更自然。

Fragment Refs 少了一个多余的 div

很多 React 开发者都碰过这种小麻烦。组件返回一组并列元素，你想监听它们、测量位置或控制焦点，Fragment 又没有真实 DOM 节点。最后只好在外面套一层<div>，随后再去处理它给 Grid、Flex 或 CSS 选择器带来的影响。

React 19.3 允许把 ref 直接传给<Fragment>。

import { Fragment, useEffect, useRef } from 'react';

function Results({ items }) {
  const fragmentRef = useRef(null);

  useEffect(() => {
    fragmentRef.current.focus();
  }, []);

  return (
    <Fragment ref={fragmentRef}>
      {items.map(item => (
        <ResultCard key={item.id} item={item} />
      ))}
    </Fragment>
  );
}

拿到的 FragmentInstance 可以把这一组子节点当成整体操作。它支持事件监听、焦点移动、IntersectionObserver 和 ResizeObserver，也能读取位置、滚动到视图中。DOM 结构没有变化，行为却能挂上去。

这个功能不会让页面一夜之间快多少，却会删掉一批纯粹为了拿 ref 而存在的包裹节点。对组件库、无障碍交互和复杂列表来说，这类改动很耐用。

browser() 把客户端专属组件写明白了

服务端渲染里还有一个常见补丁。组件依赖 localStorage、浏览器时区或其他客户端 API 时，大家通常会在 useEffect 里设置 mounted，或者判断 window 是否存在。

19.3 在 react-dom 中加入了 browser()。

import { use } from 'react';
import { browser } from 'react-dom';

function LocalTimeZone() {
  use(browser());
  const timeZone = new Intl.DateTimeFormat()
    .resolvedOptions()
    .timeZone;

  return <p>{timeZone}</p>;
}

组件在服务端调用use(browser())时会触发 Suspense，由最近的边界输出 fallback。到了客户端，它不再暂停，组件可以正常渲染。这个 API 还能放在条件判断或提前返回之后，已有初始数据时继续服务端渲染，缺少数据时再留到浏览器处理。

它解决的场景并不宽，写法却比typeof window !== 'undefined'更能表达意图。看到这行代码，维护者马上知道这个分支为什么不参加服务端渲染。

安全与 Server Components 也补了两块

React DOM 现在支持浏览器的 Trusted Types API。启用相应 CSP 策略后，传给 innerHTML 等注入位置的内容需要是经过策略创建的 TrustedHTML、TrustedScript 或 TrustedScriptURL。

旧版本会先把这些对象强制转成普通字符串，浏览器随即拒绝。19.3 会保留对象类型，交给浏览器按站点的 Trusted Types 策略检查。对已经在认真收紧 XSS 防护的大型项目，这个修复来得很实际。

Server Components 里的 Context 也少了一层样板代码。Server Component 仍然不能创建 Context，但可以从带有 ‘use client’ 的模块导入 Context，并直接渲染<UserContext value={currentUser}>。过去那个只负责转交 value 的 UserProvider 包装组件，可以删掉了。

更新列表里还有一些不太抢镜的改动。不同 Transition 可以独立渲染，慢任务不会再拖住无关的 Transition。React DOM 增加了全屏事件、maskType SVG 属性和 iframe 的credentialless布尔属性，服务端错误也能把Error.cause与AggregateError.errors传到客户端。

这批修复覆盖了 Suspense、Activity、Fast Refresh、表单状态、FragmentInstance 监听器，以及 Mobile Safari 中 View Transition 崩溃等问题。准备升级的项目，依然应该先跑完整测试，尤其要留意 SSR、Suspense 和动画交叉出现的页面。

前端框架已经过了每次升级都要重学一遍的阶段。React 19.3 省掉一层包裹节点，少写一次客户端判断，还让页面过渡更容易接进 React 的渲染流程。这类改动很难制造热搜，却更符合成熟框架该有的样子。

项目暂时用不到这些能力，不必为了追版本立刻升级。正在做页面过渡、组件库、SSR 或严格 CSP 的团队，可以开始认真评估了。

以上关于React 19.3 正式发布｜稳定ViewTransition动画与Fragment Refs的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。