React 19 稳定版发布：新特性介绍和升级方法_架构/框架

10 月 23 - 25 日，QCon 上海站即将召开，现在购票，享9折优惠了解详情 



 写点什么

React 19 已正式发布了稳定版，现已在 npm 上可用！它包含许多特性和增强，旨在简化开发、提高性能并简化常见 UI 模式的处理操作。本文将介绍 React 19 中的新特性以及如何在项目中采用这些特性。

React 19 中的关键新增特性

动作和异步转换

动作（Action）简化了很多异步操作（如数据突变、待处理状态、错误处理和乐观更新）的管理。你可以使用 useTransition 或新的 useActionState 钩子来：

自动处理待处理状态。

提供更好的错误处理。

使用 action 或 formAction 属性管理表单提交元素。

示例：使用 useActionState 简化表单

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>  );}

复制代码

使用 useOptimistic 进行乐观更新

新的 useOptimistic 钩子允许你在等待异步响应时向用户提供即时反馈。

function ChangeName({ currentName, onUpdateName }) {  const [optimisticName, setOptimisticName] = useOptimistic(currentName);  const submitAction = async (formData) => {    const newName = formData.get("name");    setOptimisticName(newName);    const updatedName = await updateName(newName);    onUpdateName(updatedName);  };  return (    <form action={submitAction}>      <p>Your name is: {optimisticName}</p>      <input type="text" name="name" />    </form>  );}

复制代码

use API

use API 允许你有条件地渲染 Promise 和上下文，从而实现更灵活的组件设计。

import { use } from 'react';function Comments({ commentsPromise }) {  const comments = use(commentsPromise);  return comments.map(comment => <p key={comment.id}>{comment}</p>);}

复制代码

原生元数据管理

React 19 支持直接在组件中渲染标签，并自动将它们提升到对应部分。

function BlogPost({ post }) {  return (    <article>      <title>{post.title}</title>      <meta name="author" content="Author Name" />    </article>  );}

复制代码

增强的样式表和脚本管理

React 19 引入了对以下项的内置支持：

使用可控优先级的样式表。

在组件树中渲染的异步脚本，确保重复数据删除和正确的执行顺序。

<link rel="stylesheet" href="styles.css" precedence="default" /><script async src="script.js"></script

复制代码

服务端组件和动作

React 服务端组件现已稳定，允许提前渲染组件。与服务端动作（通过“use server”指令启用）配对后，客户端组件可以无缝调用异步服务端函数。

改进的错误处理

React 19 整合了错误报告，提供简洁且可操作的错误消息。开发人员现在可以使用 onCaughtError、onUncaughtError 和 onRecoverableError 进行细粒度的错误处理。

Ref 作为 Prop

函数组件现在可以接受 ref 作为 prop，通过消除对 forwardRef 的需求来简化代码。

水合（Hydration）和第三方集成

React 19 改进了水合，可以优雅地处理浏览器扩展或第三方脚本插入的意外元素。

预加载资源

使用资源预加载 API（例如 preload 和 preinit）优化性能：

import { preload, preinit } from 'react-dom';preinit('script.js', { as: 'script' });preload('font.woff', { as: 'font' });

复制代码

两个用于预渲染的新 API 改进了现有的 renderToString 函数，它们会等待所有数据加载后再返回静态 HTML 流。这两个函数称为 prerender 和 prerenderToNodeStream。虽然它们是为流式传输环境设计的，但它们不会在内容加载时进行流式传输，后者在 renderToPipeableStream 和 renderToReadableStream 中已经能做到了。在这两种情况下，文档都指出这些函数通常由框架调用，并且“大多数组件不需要导入或使用它们”。

Suspense 也有所改进。React 19 中的预热特性意味着临时回退内容会立即渲染，而之前它会等待其他兄弟组件先渲染。

如何升级

请遵循 React 19 升级指南_（_https://react.dev/blog/2024/12/05/react-19），内有分步说明。主要注意事项包括：

重大更改（指南中有文档）。

测试应用程序的兼容性。

更新使用 React 作为对等依赖项的依赖项。

立即开始

通过 npm 将你的项目升级到 React 19：

npm install react@19 react-dom@19

复制代码

浏览官方 React 19 文档_（https://react.dev/blog/2024/12/05/react-19）_ 以深入了解这些新特性和最佳实践。

React 19 代表了一次飞跃，它为开发人员提供了强大的工具来创建动态、高性能和可访问的应用程序。立即开始探索吧！

原文链接：

https://dev.to/gladiatorsbattle/react-19-stable-release-whats-new-and-how-to-upgrade-299d

发布

暂无评论

创作场景

React 19 稳定版发布：新特性介绍和升级方法

React 19 中的关键新增特性

动作和异步转换

使用 useOptimistic 进行乐观更新

use API

原生元数据管理

增强的样式表和脚本管理

服务端组件和动作

改进的错误处理

Ref 作为 Prop

预加载资源

如何升级

立即开始

评论

从云原生视角看 AI 原生应用架构的实践

活动回顾丨云原生技术实践营 Serverless + AI 专场 (深圳站) 回顾 & PPT 下载

GitHub爆赞！最适合新手入门的教程——笨方法学Python 3

软件测试学习笔记丨JUnit5结合数据驱动-json

数仓还是湖仓？专家圆桌深度解析

心理咨询行业的现状与未来：AI+心理咨询的显著成长性

mac竞速游戏：狂野飙车8:极速凌云 for Mac 安装包

京东商品列表数据接口（JD.item_search）

程序员"计算机之子"的职场反思

【HDC.2024】华为云Astro低代码平台开启AI敏捷组装时代，探索低代码创新无限可能

他们说：优秀的程序员应该对代码保持追求

创作场景

React 19 稳定版发布：新特性介绍和升级方法

React 19 中的关键新增特性

动作和异步转换

使用 useOptimistic 进行乐观更新

use API

原生元数据管理

增强的样式表和脚本管理

服务端组件和动作

改进的错误处理

Ref 作为 Prop

预加载资源

如何升级

立即开始

评论

电子书

大厂实战PPT下载