React Penggunaan API baharu(janji)

Dalam siaran ini, saya akan menunjukkan cara membaca nilai daripada janji menggunakan penggunaan.

Pautan

• Demo

• Pangkalan kod

Coretan

Mari lihat kod berikut:

import { Suspense } from "react";

export default function Page() {
  const messagePromise = fetchMessages();

  return (
    <Suspense fallback={<p>⌛ waiting for messages...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

Beberapa perkara yang perlu diberi perhatian:

• sedang digunakan, yang pada asasnya memaparkan sandaran, dalam kes ini: ⌛ menunggu mesej..., sehingga janji diselesaikan.

• messagePromise ialah janji yang diluluskan sebagai sokongan kepada .

Sekarang, mari lihat fetchMessages:

async function fetchMessages() {
  return [
    {
      id: 1,
      text: "message 1",
    },
    {
      id: 2,
      text: "message 2",
    },
  ];
}

Seperti yang anda lihat, ia adalah fungsi yang sangat mudah. Dalam contoh dunia nyata, ini boleh menjadi permintaan pengambilan, tetapi untuk kesederhanaan, fungsi itu hanya mengembalikan tatasusunan. Dengan menggunakan async, JavaScript secara automatik mengetahui bahawa fungsi itu mengembalikan janji.

Akhir sekali, mari lihat komponen:

function Message({ messagePromise }) {
  const comments = use(messagePromise);

  return comments.map((comment) => <p key={comment.id}>{comment.text}</p>);
}

Di sinilah ia menjadi menarik. komponen menerima messagePromise sebagai prop, yang, seperti yang kami nyatakan, adalah janji.

Biasanya, anda akan menggunakan wait dengan janji, tetapi dalam React 19, anda kini boleh menggunakan use untuk mencapai hasil yang sama pada dasarnya.

Satu perbezaan utama antara menunggu dan menggunakan ialah menunggu pemaparan blok sehingga janji diselesaikan, manakala penggunaan tidak menyekat pemaparan.

Begini rupa komponen sebelum janji diselesaikan:

Dan setelah janji itu diselesaikan:

Kesimpulan

penggunaan berfungsi sama seperti menunggu, dan jika aplikasi berjalan pada pelayan menggunakan SSR, hasilnya adalah sama: pelayan akan mengembalikan respons HTML yang sama dalam kedua-dua kes.

Walau bagaimanapun, jika kod dijalankan pada klien, pemaparan berkelakuan agak berbeza. menunggu pemaparan sekatan sehingga janji diselesaikan, manakala penggunaan membenarkan komponen untuk memaparkan semula sebaik sahaja janji diselesaikan.

Atas ialah kandungan terperinci React Penggunaan API baharu(janji). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!