React 稳定版本：新增功能以及如何升级

React 19 已正式稳定，现已在 npm 上提供！它具有丰富的功能和增强功能，旨在简化开发、提高性能并简化常见 UI 模式的处理。下面全面介绍了 React 19 中的新增功能以及如何在项目中采用这些功能。

React 19 中的关键新增内容

1. 动作和异步转换

操作简化了异步操作的管理，例如数据突变、挂起状态、错误处理和乐观更新。通过使用 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>
  );
}

1. 使用 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>
  );
}

1. 使用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>);
}

1. 原生元数据管理

React 19 支持直接在组件中渲染

、 和标签，自动将它们提升到该部分。

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

1. 增强的样式表和脚本管理

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

使用 .

控制优先级的样式表

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

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

1. 服务器组件和操作

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

1. 改进的错误处理

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

1. 参考作为道具

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

1. 补水和第三方集成

React 19 通过优雅地处理浏览器扩展或第三方脚本插入的意外元素来改善水合作用。

1. 预加载资源

通过资源预加载 API 优化性能，例如 preload 和 preinit：

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

如何升级

按照 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 代表了一次飞跃，为开发人员提供了强大的工具来创建动态、高性能和可访问的应用程序。从今天开始探索！

以上是React 稳定版本：新增功能以及如何升级的详细内容。更多信息请关注PHP中文网其他相关文章！