React v 穩定版本與新增功能

React 19 正式落地，帶來了大量新功能和增強功能，可簡化開發並提高應用程式效能。從改進的狀態管理到更好的伺服器端集成，React 19 適合每個人。

---

React 19 的主要特性：

1.簡化非同步狀態管理的操作

管理 API 請求等非同步操作一直是 React 中常見的挑戰。 React 19 引入了 Actions，它可以自動執行掛起狀態、錯誤處理和樂觀更新。

範例：使用

簡化表單提交行動

import { useActionState } from "react";

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (prevState, formData) => {
      const name = formData.get("name");
      const error = await updateName(name);
      if (error) {
        return error;
      }
      redirect("/profile");
      return null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

這裡，useActionState 為您管理提交狀態和錯誤處理，使程式碼更乾淨，更容易維護。

---

2.使用 useOptimistic 進行樂觀更新

樂觀的 UI 更新讓使用者在非同步請求正在進行時立即看到變更。新的 useOptimistic 鉤子讓這個模式變得簡單。

範例：樂觀名稱變更

import { useOptimistic } from "react";

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName); // Show optimistic state
    const updatedName = await updateName(newName); // Wait for the async request
    onUpdateName(updatedName); // Update the actual state
  };

  return (
    <form action={submitAction}>
      <p>Your name: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Change Name</button>
    </form>
  );
}

useOptimistic 透過在伺服器回應之前顯示更新來確保無縫的使用者體驗。

---

3.增強了水合不匹配的錯誤回報

React 19 改善了錯誤處理，特別是水合錯誤。現在您可以獲得伺服器和用戶端之間不匹配內容的詳細差異，而不是模糊的錯誤。

例：水合誤差差異

Uncaught Error: Hydration failed because the server-rendered HTML didn’t match the client.
Tree mismatch:
+ Client: <span>Welcome</span>
- Server: <span>Hello</span>

這些清晰的訊息可協助開發人員快速且有效率地偵錯問題。

---

4.伺服器元件與伺服器操作

React 伺服器元件 (RSC) 允許在伺服器上渲染元件，從而提高效能。伺服器操作允許直接從客戶端元件呼叫伺服器上的非同步函數。

範例：使用伺服器操作

// Server Component
export const fetchComments = async () => {
  const response = await fetch("/api/comments");
  return await response.json();
};

// Client Component
import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

// Usage
function App() {
  return (
    <Suspense fallback={<p>Loading comments...</p>}>
      <Comments commentsPromise={fetchComments()} />
    </Suspense>
  );
}

伺服器操作簡化了客戶端元件中伺服器端資料的取得與呈現。

---

5.本機元資料與樣式表管理

React 19 現在支援

以上是React v 穩定版本與新增功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！