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中文網其他相關文章！