React v Keluaran Stabil dan Perkara Baharu

React 19 telah mendarat secara rasmi, membawakan banyak ciri baharu dan peningkatan yang memudahkan pembangunan dan meningkatkan prestasi aplikasi. Daripada pengurusan keadaan yang dipertingkatkan kepada penyepaduan sisi pelayan yang lebih baik, React 19 mempunyai sesuatu untuk semua orang.

---

Ciri Utama dalam React 19 :

1. Tindakan untuk Pengurusan Negeri Async Dipermudah

Mengurus operasi async seperti permintaan API sentiasa menjadi cabaran biasa dalam React. React 19 memperkenalkan Tindakan, yang mengautomasikan keadaan belum selesai, pengendalian ralat dan kemas kini yang optimistik.

Contoh: Penyerahan Borang Ringkas dengan Tindakan

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

Di sini, useActionState mengurus keadaan penyerahan dan pengendalian ralat untuk anda, menjadikan kod lebih bersih dan lebih mudah diselenggara.

---

2. Kemas Kini Optimis dengan penggunaanOptimistic

Kemas kini UI yang optimis membolehkan pengguna melihat perubahan serta-merta semasa permintaan async sedang dijalankan. Cangkuk useOptimistic baharu menjadikan corak ini mudah.

Contoh: Perubahan Nama Optimis

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 memastikan pengalaman pengguna yang lancar dengan menunjukkan kemas kini walaupun sebelum pelayan bertindak balas.

---

3. Pelaporan Ralat Dipertingkat untuk Ketidakpadanan Penghidratan

React 19 menambah baik pengendalian ralat, terutamanya untuk ralat penghidratan. Daripada ralat kabur, anda kini mendapat perbezaan terperinci kandungan tidak sepadan antara pelayan dan pelanggan.

Contoh: Perbezaan Ralat Penghidratan

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

Mesej yang jelas ini membantu pembangun nyahpepijat isu dengan cepat dan cekap.

---

4. Komponen Pelayan dan Tindakan Pelayan

Komponen Pelayan Bertindak balas (RSC) membenarkan komponen dipaparkan pada pelayan, meningkatkan prestasi. Tindakan Pelayan membolehkan panggilan fungsi async pada pelayan terus daripada Komponen Pelanggan.

Contoh: Menggunakan Tindakan Pelayan

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

Tindakan Pelayan menyelaraskan pengambilan dan memberikan data sisi pelayan dalam Komponen Pelanggan.

---

5. Metadata Asli dan Pengurusan Lembaran Gaya

React 19 kini menyokong