React 19 已正式穩(wěn)定，現(xiàn)已在 npm 上提供！它具有豐富的功能和增強(qiáng)功能，旨在簡(jiǎn)化開(kāi)發(fā)、提高性能并簡(jiǎn)化常見(jiàn) UI 模式的處理。下面全面介紹了 React 19 中的新增功能以及如何在項(xiàng)目中采用這些功能。

React 19 中的關(guān)鍵新增內(nèi)容

1. 動(dòng)作和異步轉(zhuǎn)換

操作簡(jiǎn)化了異步操作的管理，例如數(shù)據(jù)突變、掛起狀態(tài)、錯(cuò)誤處理和樂(lè)觀更新。通過(guò)使用 useTransition 或新的 useActionState 鉤子，您可以：

自動(dòng)處理待處理狀態(tài)。

提供更好的錯(cuò)誤處理。

使用 action 或 formAction 屬性通過(guò)

元素管理表單提交。

示例：使用 useActionState 的簡(jiǎn)化表單

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 進(jìn)行樂(lè)觀更新

新的 useOptimistic 掛鉤允許您在等待異步響應(yīng)時(shí)向用戶提供即時(shí)反饋。

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 和上下文，從而實(shí)現(xiàn)更靈活的組件設(shè)計(jì)。

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

1. 原生元數(shù)據(jù)管理

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

、 和標(biāo)簽，自動(dòng)將它們提升到該部分。

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

1. 增強(qiáng)的樣式表和腳本管理

React 19 引入了以下內(nèi)置支持：

使用 .

控制優(yōu)先級(jí)的樣式表

在組件樹(shù)中渲染的異步腳本，確保重復(fù)數(shù)據(jù)刪除和正確的執(zhí)行順序。

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

1. 服務(wù)器組件和操作

React Server 組件現(xiàn)已穩(wěn)定，允許提前渲染組件。與服務(wù)器操作（通過(guò)“use server”指令啟用）配合使用，客戶端組件可以無(wú)縫調(diào)用異步服務(wù)器端函數(shù)。

1. 改進(jìn)的錯(cuò)誤處理

React 19 整合了錯(cuò)誤報(bào)告，提供簡(jiǎn)潔且可操作的錯(cuò)誤消息。開(kāi)發(fā)人員現(xiàn)在可以使用 onCaughtError、onUncaughtError 和 onRecoverableError 進(jìn)行精細(xì)錯(cuò)誤處理。

1. 參考作為道具

函數(shù)組件現(xiàn)在可以接受 ref 作為 prop，通過(guò)消除對(duì)forwardRef 的需要來(lái)簡(jiǎn)化代碼。

1. 補(bǔ)水和第三方集成

React 19 通過(guò)優(yōu)雅地處理瀏覽器擴(kuò)展或第三方腳本插入的意外元素來(lái)改善水合作用。

1. 預(yù)加載資源

通過(guò)資源預(yù)加載 API 優(yōu)化性能，例如 preload 和 preinit：

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

如何升級(jí)

按照 React 19 升級(jí)指南 (https://react.dev/blog/2024/12/05/react-19) 獲取分步說(shuō)明。主要考慮因素包括：

重大變更（記錄在指南中）。

測(cè)試您的應(yīng)用程序的兼容性。

更新使用 React 作為對(duì)等依賴項(xiàng)的依賴項(xiàng)。

今天開(kāi)始

通過(guò) npm 將項(xiàng)目升級(jí)到 React 19：

npm install React@19 React-dom@19

探索 React 19 官方文檔 (https://react.dev/blog/2024/12/05/react-19)，更深入地了解這些新功能和最佳實(shí)踐。

React 19 代表了一次飛躍，為開(kāi)發(fā)人員提供了強(qiáng)大的工具來(lái)創(chuàng)建動(dòng)態(tài)、高性能和可訪問(wèn)的應(yīng)用程序。從今天開(kāi)始探索！

以上是React 穩(wěn)定版本：新增功能以及如何升級(jí)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！