0

0

React 19.2.0 发布

霞舞

霞舞

发布时间:2025-10-09 16:15:10

|

536人浏览过

|

来源于php中文网

原创

react 19.2.0 现已发布,具体更新内容如下:

React 的新功能

 

允许你将应用程序拆分为“活动”,这些活动可以被控制和优先排序。你可以使用 Activity 作为有条件地渲染应用程序部分的替代方法:

// Before
{isVisible && }

// After

  

在 React 19.2 中,Activity 支持两种模式:visiblehidden

  • hidden:隐藏子项,卸载效果,并推迟所有更新,直到 React 没有剩余工作可做。
  • visible:显示子项、安装效果并允许正常处理更新。

这意味着你可以预渲染并继续渲染应用程序的隐藏部分,而不会影响屏幕上可见内容的性能。可以使用 Activity 来渲染应用中用户接下来可能导航到的隐藏部分,或者保存用户导航离开的部分的状态。这有助于通过在后台加载数据、CSS 和图片来加快导航速度,并允许返回导航保留输入字段等状态。

将来,开发团队计划为 Activity 添加更多模式以适应不同的用例。

有关如何使用 Activity 的示例,可查看Activity 文档。


useEffectEvent 

使用 useEffect 时,一个常见的模式是通知应用程序代码关于来自外部系统的某种“事件”。例如,当聊天室连接时,你可能希望显示一个通知:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]);
  // ...

上述代码的问题在于,任何在这样的“事件”中使用的值的更改都会导致周围 Effect 重新运行。例如,更改 theme 会导致聊天室重新连接。对于与 Effect 逻辑本身相关的值(如 roomId)来说,这很合理,但对于 theme 来说则不合理。

为了解决这个问题,大多数用户只是禁用 lint 规则并排除依赖项。但这可能导致错误,因为如果以后需要更新 Effect,linter 就无法帮助你保持依赖项的更新。

使用 useEffectEvent,你可以将这种逻辑的“事件”部分从发出它的 Effect 中分离出来:

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies)
  // ...

与 DOM 事件类似,Effect 事件总是“看到”最新的 props 和 state。

Effect 事件不应声明在依赖数组中。你需要升级到 eslint-plugin-react-hooks@6.1.1,以便 linter 不会尝试将其作为依赖项插入。请注意,Effect 事件只能在同一组件或 Hook 中声明“它们”的 Effect。这些限制由 linter 验证。


cacheSignal 

cacheSignal仅适用于React Server Components。

cacheSignal让你知道cache()生命周期何时结束:

import {cache, cacheSignal} from 'react';
const dedupedFetch = cache(fetch);

async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

这允许你在结果不再用于缓存时清理或中止工作,例如:

  • React 已成功完成渲染
  • 渲染已中止
  • 渲染失败

欲了解更多信息,参阅cacheSignal文档。


Performance Tracks 

React 19.2 为 Chrome DevTools 性能配置文件添加了一组新的自定义轨道,以提供有关 React 应用程序性能的更多信息:

React 19.2.0 发布

React Performance Tracks 文档解释了轨道中包含的所有内容。

调度器

调度器跟踪显示 React 在不同优先级下正在做什么,例如“阻塞”用于用户交互,或“过渡”用于 startTransition 内的更新。在每个跟踪中,你会看到正在进行的工作类型,例如安排更新的事件,以及该更新的渲染发生的时间。

还显示信息,例如当更新因等待不同优先级而被阻塞,或者当 React 在继续之前等待绘制时。调度器跟踪帮助你理解 React 如何将你的代码拆分为不同的优先级,以及完成工作的顺序。

参阅 Scheduler track 文档以了解所包含的所有内容。

组件

组件跟踪显示 React 正在处理的组件树,无论是为了渲染还是运行效果。在里面,你会看到诸如“Mount”标签,表示子组件挂载或效果挂载,或者“Blocked”标签,表示由于让步给 React 外部的工作而阻止渲染。

组件跟踪帮助你了解组件何时被渲染或运行效果,以及完成该工作的所需时间,以帮助识别性能问题。

Veo
Veo

Google 最新发布的 AI 视频生成模型

下载

参阅组件轨道文档以查看包含的所有内容。


React DOM 的新功能

部分预渲染

在 19.2 中新增了一个能力,可以在提前渲染应用的一部分,然后稍后恢复渲染。这个功能称为“部分预渲染”,允许你预先渲染应用的静态部分并从 CDN 提供,然后稍后恢复渲染外壳以填充动态内容。

要预渲染一个稍后可恢复的应用,首先调用 prerender 并传入一个 AbortController:

const {prelude, postponed} = await prerender(, {
  signal: controller.signal,
});

// Save the postponed state for later
await savePostponedState(postponed);

// Send prelude to client or CDN.

然后,可以将preludeshell 返回给客户端,稍后调用resume“resume”到 SSR 流:

const postponed = await getPostponedState(request);
const resumeStream = await resume(, postponed);

// Send stream to client.

或者可以调用resumeAndPrerenderresume 来获取 SSG 的静态 HTML:

const postponedState = await getPostponedState(request);
const { prelude } = await resumeAndPrerender(, postponedState);

// Send complete HTML prelude to CDN.

有关更多信息,参阅新 API 的文档:

  • react-dom/server
    • resume:用于 Web 流。
    • resumeToPipeableStream用于 Node 流。
  • react-dom/static
    • resumeAndPrerender用于 Web 流。
    • resumeAndPrerenderToNodeStream用于 Node 流。

此外,预渲染 API 现在返回一个postpone状态以传递给resumeAPI。


显著变化

SSR 中的 Suspense 边界批处理

修复了一个行为性错误,该错误导致 Suspense 边界会根据是在客户端渲染还是从服务器端渲染流式传输而显示不同的内容。从 19.2 开始,React 将在短时间内批量显示服务器渲染的 Suspense 边界,以允许更多内容一起显示并与客户端渲染的行为保持一致。

React 19.2.0 发布  

以前,在流式传输服务器端渲染期间,Suspense 内容会立即替换后备内容。

React 19.2.0 发布  

在 React 19.2 中,Suspense 边界会在短时间内进行批处理,以允许一起揭示更多内容。

此修复还为支持 SSR 中的  准备了应用程序。通过一起揭示更多内容,动画可以在更大的内容批次中运行,并避免链式动画内容流接近在一起。

注意:React 使用启发式方法来确保节流不会影响核心网页指标和搜索排名。例如,如果页面总加载时间接近 2.5 秒(这是被认为是 LCP 的“良好”时间),React 将停止批处理并立即揭示内容,以确保节流不会成为错过指标的原因。


SSR:Node 的 Web Streams 支持

React 19.2 增加了对 Web Streams 的支持,用于在 Node.js 中流式传输 SSR:

  • renderToReadableStream现在可用于 Node.js
  • prerender现在可用于 Node.js

以及新的resumeAPI:

  • resume适用于 Node.js。
  • resumeAndPrerender适用于 Node.js。
在 Node.js 中优先使用 Node Streams 进行服务器端渲染 在 Node.js 环境中,官方仍然强烈建议使用 Node Streams API: renderToPipeableStream resumeToPipeableStream prerenderToNodeStream resumeAndPrerenderToNodeStream 这是因为 Node Streams 比 Node 中的 Web Streams 快得多,并且 Web Streams 默认不支持压缩,导致用户意外错过了流式传输的好处。

eslint-plugin-react-hooksv6

还发布了eslint-plugin-react-hooks@6.1.1,默认情况下在 recommended 预设中使用扁平配置,并为新的 React 编译器驱动规则启用选择加入。

要继续使用旧配置,可以更改为recommended-legacy

- extends: ['plugin:react-hooks/recommended']
+ extends: ['plugin:react-hooks/recommended-legacy']

查看eslint-plugin-react-hooks 变更日志以获取完整的变更列表。


更新默认useId前缀

在 19.2 中,将默认useId前缀从:r:(19.0.0) 或«r»(19.1.0) 更新为_r_


变更日志

其他显著变化

  • react-dom:允许在可提升样式上使用 nonce #32461
  • react-dom:如果 React 拥有的节点也包含文本内容,则警告将其用作容器#32774

值得注意的错误修复

  • react:将上下文字符串化为“SomeContext”而不是“SomeContext.Provider” #33507
  • react:修复 popstate 事件中的无限 useDeferredValue 循环#32821
  • react:修复将初始值传递给 useDeferredValue 时出现的错误#34376
  • react修复提交带有 Client Actions 的表单时的崩溃问题#33055
  • react如果 dehydrated suspense boundaries 重新暂停,则隐藏/显示其内容 #32900
  • react:避免热重载期间宽树上的堆溢出#34145
  • react:改进各处的组件堆栈#33629、#33724、#32735、#33723
  • react:修复 React.lazy-ed 组件中 React.use 的一个错误#33941
  • react-dom:使用 ARIA 1.3 属性时停止警告#34264
  • react-dom:修复 Suspense fallbacks 中深度嵌套 Suspense 的错误#33467
  • react-dom:在渲染过程中发生中止后进行挂起操作时,避免出现卡顿现象#34192

有关更改的完整列表,可参阅变更日志。

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

524

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

263

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

757

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

539

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

760

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

605

2023.08.10

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

560

2023.08.21

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

395

2023.08.22

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

23

2026.01.19

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 20.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号