Bertindak balas 19

Ciri Baharu dalam React 19

Apa yang Baharu dalam REACT 19?

1. REACT COMPILER

Apa yang Baharu?

• React mengoptimumkan penyampaian semula secara automatik tanpa campur tangan manual.

• Tidak perlu lagi: useMemo(), useCallBack(), React.memo

Kenapa React Compiler?

• Pengoptimuman Manual membosankan untuk pembangun.

• React sekarang mengendalikan perubahan keadaan dan logik penyampaian semula secara automatik.

Faedah

• React memutuskan perkara yang hendak dipaparkan semula dan bila.

• Mengurangkan usaha pembangun.

• pangkalan kod yang lebih bersih, lebih ringkas.

• pada masa ini menjana instagram dalam pengeluaran.

2. KOMPONEN SERVER

Apa yang Baharu?

• komponen yang berjalan pada pelayan bukan klien.

• Sebelum ini dipelopori oleh Next.js (lalai dalam V13).

• Dalam React 19, komponen pelayan disepadukan secara asli.

Faedah

• Mesra SEO: Meningkatkan Pengoptimuman Enjin Carian.

• Peningkatan Prestasi: Halaman awal yang lebih pantas dimuatkan.

• Pelaksanaan Bahagian Pelayan: Mengendalikan tugas dengan cekap seperti panggilan API.

Bagaimana untuk menggunakan Komponen Pelayan ?

1. Pihak Pelanggan (lalai): Semua komponen React dijalankan pada bahagian pelanggan.

2. Sisi Pelayan: Tambahkan 'gunakan Pelayan' sebagai baris pertama komponen anda:
   

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

Nota Penting

• Komponen Pelayan tidak dijalankan pada klien.

• Digabungkan dengan Tindakan, mereka menyelaraskan tugas seperti pengendalian borang dan permintaan API.

• Pengguna Next.js sudah boleh memanfaatkan komponen pelayan; React 19 membawa ini terus kepada React.

3. TINDAKAN

• Sebelum React19: Pengendalian Manual keadaan Async.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

• Selepas React19: Menggunakan useActionsState untuk pengendalian tak segerak yang bersih.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• Mengendalikan Kemas Kini Pemuatan, Ralat dan Keadaan secara automatik.

4. KACANG BARU

NEGERI KEGUNAAN: PENGENDALIAN BORANG

Menguruskan keadaan penyerahan dan pengesahan borang secara automatik.

• SEBELUM REACT19:

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

• SELEPAS REACT19:

useActionState memudahkan penyerahan borang.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

STATUS GUNA: STATUS BORANG JEJAK

Borang akses menyatakan seperti belum selesai, kejayaan atau ralat.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

USEOPTIMISTIK: KEMASKINI UI OPTIMIS

Memudahkan kemas kini optimistik untuk UX yang lebih baik.

• SEBELUM REACT19:

Anda mengemas kini UI secara optima, mereka mengendalikan pengembalian.

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

• SELEPAS REACT19:

useOptimistic menjadikannya deklaratif.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

5. PENGGUNAAN() KACIL

Apakah kegunaan()?

Kait use() memudahkan pengambilan data tak segerak dan penggunaan konteks dengan mengendalikan janji secara terus.

• SEBELUM REACT19: MENGGUNAKAN USEEFFECT

Pengendalian manual keadaan tak segerak.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• SELEPAS REACT19: PENGGUNAAN() CENGKEL

Ambil data tak segerak dan selesaikan janji

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

Kelebihan:

• Tidak perlu useEffect atau useState.
• Kod yang lebih bersih dan lebih pengisytiharan.
• Mengendalikan janji dengan lancar.

6. KOMPONEN SERVER

Apakah Komponen Pelayan?

Komponen Pelayan dipaparkan pada pelayan dan menghantar hasil yang ringan kepada pelanggan, meningkatkan prestasi.

• SEBELUM REACT19: KLIEN TRADISIONAL - PENYERAHAN SISI

Anda terpaksa menggunakan useEffect untuk pengambilan data dan SSR memerlukan alatan kompleks.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

• SELEPAS REACT19: SERVER - RENDERING SISI

Komponen Pelayan Bertindak balas disepadukan dengan lancar.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

Kelebihan:

• Pemuatan halaman yang lebih pantas (tiada JS berat sebelah pelanggan).
• SEO dipertingkatkan dan saiz berkas dikurangkan.

7. PEMBATAN ASET YANG DIPERTINGKATKAN

React19 menambah baik cara aset seperti imej dan skrip dimuatkan di latar belakang.

• SEBELUM REACT19:

Anda memerlukan konfigurasi manual.

function handleClick() {
 setItems([...items, newItem]);
 saveItem(newItem).catch(() => setItems(items)); // Revert on error
}

• SELEPAS REACT19: NATIVE LAZY LOADIING

Aset kini dimuatkan dengan cekap tanpa campur tangan.

const [optimisticItems, addOptimisticItem] = useOptimistic(items);

function handleClick() {
 addOptimisticItem(newItem);
}

Kelebihan:

• Masa muat lebih cepat.
• Pengalaman pengguna yang lebih baik dengan kelewatan yang dikurangkan.

KESIMPULAN

React 19 membawa:

• Pengurusan keadaan async dipermudahkan dengan Tindakan.
• Kait baharu seperti useActionState,
• useFormStatus dan UseOptimistic.
• gunakan cangkuk() untuk pengendalian data async yang mudah.
• Komponen Pelayan Lancar untuk prestasi yang lebih baik.
• Pengurusan ref yang lebih bersih dan pemuatan aset dipertingkatkan.

Atas ialah kandungan terperinci Bertindak balas 19. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!