Perkara baharu dalam React 19

Tindakan

Kes penggunaan biasa dalam apl React ialah melakukan mutasi data dan kemudian mengemas kini keadaan sebagai tindak balas. Sebagai contoh, apabila pengguna menyerahkan borang untuk menukar nama mereka, anda akan membuat permintaan API, dan kemudian mengendalikan respons. Pada masa lalu, anda perlu mengendalikan keadaan belum selesai, ralat, kemas kini optimistik dan permintaan berurutan secara manual.

Sebagai contoh, anda boleh mengendalikan keadaan belum selesai dan ralat dalam useState:

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Dalam React 19, kami menambah sokongan untuk menggunakan fungsi async dalam peralihan untuk mengendalikan keadaan belum selesai, ralat, borang dan kemas kini optimistik secara automatik.

Sebagai contoh, anda boleh menggunakan useTransition untuk mengendalikan keadaan belum selesai untuk anda:

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Peralihan async akan segera menetapkan keadaan isPending kepada benar, membuat permintaan async(s) dan menukar isPending kepada false selepas sebarang peralihan. Ini membolehkan anda memastikan UI semasa responsif dan interaktif semasa data berubah.

Nota

Mengikut konvensyen, fungsi yang menggunakan peralihan tak segerak dipanggil "Tindakan".
Tindakan mengurus penyerahan data untuk anda secara automatik:

Keadaan belum selesai: Tindakan menyediakan keadaan belum selesai yang bermula pada permulaan permintaan dan ditetapkan semula secara automatik apabila kemas kini keadaan terakhir dilakukan.
Kemas kini optimistik: Tindakan menyokong cangkuk useOptimistic baharu supaya anda boleh menunjukkan maklum balas segera kepada pengguna semasa permintaan diserahkan.
Pengendalian ralat: Tindakan menyediakan pengendalian ralat supaya anda boleh memaparkan Sempadan Ralat apabila permintaan gagal dan mengembalikan kemas kini optimistik kepada nilai asalnya secara automatik.
Borang: elemen kini menyokong fungsi hantaran ke props tindakan dan formAction. Menghantar fungsi kepada prop tindakan menggunakan Tindakan secara lalai dan menetapkan semula borang secara automatik selepas penyerahan.

Membina di atas Tindakan, React 19 memperkenalkan useOptimistic untuk mengurus kemas kini optimistik dan cangkuk baharu React.useActionState untuk mengendalikan kes biasa untuk Actions. Dalam react-dom kami menambah

Tindakan untuk mengurus borang secara automatik dan menggunakanFormStatus untuk menyokong kes biasa untuk Tindakan dalam borang.

Dalam React 19, contoh di atas boleh dipermudahkan kepada:

// Using <form> Actions and 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>
  );
}

Dalam bahagian seterusnya, kami akan memecahkan setiap ciri Tindakan baharu dalam React 19.

Cangkuk baharu: useActionState

Untuk memudahkan kes biasa untuk Actions, kami telah menambah cangkuk baharu yang dipanggil useActionState:

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

useActionState menerima fungsi ("Tindakan") dan mengembalikan Tindakan yang dibungkus untuk memanggil. Ini berfungsi kerana Tindakan mengarang. Apabila Tindakan yang dibungkus dipanggil, useActionState akan mengembalikan hasil terakhir Tindakan sebagai data dan keadaan belum selesai Tindakan sebagai belum selesai.

Nota

React.useActionState sebelum ini dipanggil ReactDOM.useFormState dalam keluaran Canary, tetapi kami telah menamakannya semula dan tidak lagi menggunakan useFormState.

Lihat #28491 untuk maklumat lanjut.
Untuk mendapatkan maklumat lanjut, lihat dokumen untuk useActionState.

React DOM: Tindakan

Tindakan juga disepadukan dengan baharu React 19; ciri untuk react-dom. Kami telah menambah sokongan untuk menghantar fungsi sebagai prop tindakan dan formAction bagi , dan elemen untuk menyerahkan borang secara automatik dengan Tindakan:

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Apabila Tindakan berjaya, React akan menetapkan semula borang secara automatik untuk komponen yang tidak terkawal. Jika anda perlu menetapkan semula secara manual, anda boleh memanggil requestFormReset React DOM API baharu.

Untuk mendapatkan maklumat lanjut, lihat dokumen react-dom untuk , dan .

React DOM: Cangkuk baharu: useFormStatus

Dalam sistem reka bentuk, adalah perkara biasa untuk menulis komponen reka bentuk yang memerlukan akses kepada maklumat tentang mereka masuk, tanpa menggerudi prop ke komponen. Ini boleh dilakukan melalui Konteks, tetapi untuk memudahkan kes biasa, kami telah menambah cangkuk baharu useFormStatus:

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

useFormStatus membaca status seolah-olah borang itu adalah pembekal Konteks.

Untuk mendapatkan maklumat lanjut, lihat dokumen react-dom untuk useFormStatus.

Cangkuk baharu: useOptimistic

Satu lagi corak UI biasa apabila melakukan mutasi data ialah menunjukkan keadaan akhir secara optimis semasa permintaan async sedang dijalankan. Dalam React 19, kami menambah cangkuk baharu yang dipanggil useOptimistic untuk memudahkan perkara ini:

// Using <form> Actions and 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>
  );
}

Kait useOptimistic akan segera memaparkan optimisticName semasa permintaan updateName sedang dijalankan. Apabila kemas kini selesai atau ralat, React akan bertukar kembali secara automatik kepada nilai currentName.

Untuk mendapatkan maklumat lanjut, lihat dokumen untuk kegunaanOptimistic.

API baharu: gunakan

Dalam React 19 kami memperkenalkan API baharu untuk membaca sumber dalam render: use.

Sebagai contoh, anda boleh membaca janji dengan menggunakan, dan React akan Digantung sehingga janji itu diselesaikan:

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

Nota

penggunaan tidak menyokong janji yang dibuat dalam pemaparan.
Jika anda cuba meluluskan janji yang dibuat dalam render untuk digunakan, React akan memberi amaran:

<form action={actionFunction}>

Untuk membetulkan, anda perlu meluluskan janji daripada pustaka atau rangka kerja berkuasa saspens yang menyokong caching untuk janji. Pada masa hadapan kami merancang untuk menghantar ciri untuk memudahkan anda menyimpan janji dalam paparan.

Anda juga boleh membaca konteks dengan penggunaan, membolehkan anda membaca Konteks secara bersyarat seperti selepas pemulangan awal:

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

API Prapaparan akan menunggu semua data dimuatkan sebelum mengembalikan strim HTML statik. Strim boleh ditukar kepada rentetan, atau dihantar dengan respons penstriman. Mereka tidak menyokong kandungan penstriman semasa ia dimuatkan, iaitu

Komponen Pelayan Bertindak balas

Komponen Pelayan

Komponen Pelayan ialah pilihan baharu yang membenarkan pemaparan komponen lebih awal, sebelum digabungkan, dalam persekitaran yang berasingan daripada aplikasi klien anda atau pelayan SSR. Persekitaran yang berasingan ini ialah "pelayan" dalam Komponen Pelayan React. Komponen Pelayan boleh dijalankan sekali pada masa binaan pada pelayan CI anda, atau ia boleh dijalankan untuk setiap permintaan menggunakan pelayan web.

React 19 merangkumi semua ciri Komponen Pelayan React yang disertakan daripada saluran Canary. Ini bermakna perpustakaan yang dihantar dengan Komponen Pelayan kini boleh menyasarkan React 19 sebagai pergantungan rakan sebaya dengan syarat eksport pelayan tindak balas untuk digunakan dalam rangka kerja yang menyokong Seni Bina Reaksi Timbunan Penuh.

Atas ialah kandungan terperinci Perkara baharu dalam React 19. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!