React What's New, Mengapa Ia Penting, dan Petua Migrasi

Inilah kita sekali lagi—siaran lain tentang ciri baharu dalam React ?. Tetapi secara jujur, yang ini berbaloi. React 19 secara rasmi telah beralih daripada Release Candidate (RC), yang dilancarkan pada April 2024, kepada keluaran stabilnya, padat dengan kemas kini yang hebat! Daripada peningkatan prestasi kepada cangkuk dan alatan baharu, React 19 menawarkan sesuatu untuk semua orang, sama ada membina apl kecil atau penyelesaian gred perusahaan.

Mari kita mendalami perkara baharu, dengan contoh kod dan petua migrasi untuk membantu anda meningkatkan projek anda dengan lancar.

Apa yang Baharu dalam React 19

1. Pengoptimuman Prestasi

React 19 memperkenalkan:

• Peningkatan Penghidratan Terpilih: Mengoptimumkan penghidratan untuk apl yang diberikan pelayan dengan hanya menghidratkan bahagian UI seperti yang diperlukan.
• Saiz Himpunan Lebih Kecil: Pustaka React 19 lebih ringan, membawa kepada masa pemuatan yang lebih cepat dan penggunaan rangkaian yang berkurangan.

Contoh: Penghidratan yang Cekap

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
hydrateRoot(container, <App />);

2. Cangkuk Baharu dan Dipertingkat

a. useFormStatus: Pengurusan Negeri Borang Ringkas

Borang lebih mudah diurus dengan cangkuk useFormStatus baharu. Ia menjejaki keadaan belum selesai borang tanpa memerlukan konteks tersuai atau penggerudian prop.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>Submit</button>;
}

b. useDeferredValue: Pilihan InitialValue

Kait useDeferredValue yang dikemas kini memastikan peralihan UI yang lebih lancar dengan memberikan nilai sandaran awal semasa memproses data tertunda.

import { useDeferredValue } from 'react';

function Search({ deferredValue }) {
  const value = useDeferredValue(deferredValue, '');

  return <Results query={value} />;
}

c. useOptimistic: Mengendalikan Kemas Kini Optimis

Kait useOptimistic baharu menjadikan kemas kini UI optimistik menjadi mudah.

import { useOptimistic } from 'react';

function LikeButton() {
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(0);

  function handleLike() {
    setOptimisticLikes(prev => prev + 1);
    fetch('/api/like', { method: 'POST' });
  }

  return <button onClick={handleLike}>Likes: {optimisticLikes}</button>;
}

3. Pengangkatan Metadata Dokumen

React 19 secara automatik mengangkat metadata seperti