Bertindak balas terhadap ciri baharu - cangkuk &#use'

React 19 (versi RC—sehingga September 2024) ialah keluaran terbaharu perpustakaan pembangunan web yang popular.
V19 ialah pencapaian penting, membawakan banyak ciri dan cangkuk baharu. Siaran ini akan membincangkan salah satu cangkuk ini, cangkuk guna.

Cangkuk guna

Kail ini membolehkan pembangun menggantung pemaparan komponen UI sehingga tugas tak segerak, seperti mengambil data atau memuatkan sumber, selesai dengan menggantung janji yang diterima, tanpa memerlukan pengurusan keadaan yang rumit.

Mengambil contoh data

Kami mempunyai komponen mudah yang menggunakan pendekatan klasik, cangkuk useEffect dan mengambil data daripada API palsu (saya menggunakan MSW).
Kami menguruskan keadaan setempat untuk menyimpan data, bersama dengan keadaan isLoading dan isError fetch:

const [users, setUsers] = useState<any>(null);
const [isError, setIsError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);

Apabila halaman mula-mula dimuatkan, kami menjalankan cangkuk useEffect ini untuk mengambil data, menyimpannya dan mengemas kini pelbagai keadaan:

const fetchData = async () => {
  const response = await fetch('/api/users');
  return response.json();
};


useEffect(() => {
  fetchData()
    .then(setUsers)
    .catch(() => setIsError(true))
    .finally(() => setIsLoading(false));
}, []);

Kami menunjukkan beberapa UI semasa permintaan sedang diproses atau jika kami menghadapi ralat:

if (isLoading) {
  return <h2>Loading...</h2>;
}
if (isError) {
  return <h2>Error</h2>;
}

dan akhirnya! Kami memberikan senarai pengguna:

return ( 
  <>
    {users.map((user) => {
      return (
        <div>
          {user.lastName}, {user.firstName}
        </div>
      );
    })}
  </>
);

Banyak kod boilerplate!

Sekarang, mari kita refactor!

Mari kita keluarkan cangkuk useState dan useEffect. Kami akan mengekalkan kaedah fetchData seperti sedia ada.
Sekarang kami akan mengambil data menggunakan cangkuk penggunaan baharu, yang mengambil janji dan mengembalikan sama ada data JSON atau ralat:

const users = use(fetchData());

Cara cangkuk ini berfungsi adalah serupa dengan melakukan sesuatu seperti ini:

const users = await fetchData();

Mengendalikan isLoading dan isError

Untuk mengendalikan perubahan keadaan ini, kami akan pergi ke komponen Apl kami. Kami akan menggunakan komponen React Suspense, yang direka bentuk untuk bertindak balas kepada peristiwa tak segerak. Ia memaparkan UI sandaran sehingga anak-anaknya selesai memuatkan.

Untuk pengendalian ralat semasa bekerja dengan Suspense, adalah amalan biasa untuk menggunakan ErrorBoundary. Kami akan menambah komponen ErrorBoundary yang melaksanakan kaedah getDerivedStateFromError() React.

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList />
  </Suspense>
</ErrorBoundary>

Beberapa tambahan

Peraturan biasa untuk cangkuk tidak terpakai di sini — anda boleh menggunakan cangkuk ini di mana-mana sahaja yang anda mahu!

Tidak seperti cangkuk biasa, cangkuk guna boleh digunakan secara bersyarat dengan pernyataan if, membolehkan anda memutuskan sama ada untuk mencetuskannya atau tidak. Contohnya, jika anda ingin membungkus permintaan API baharu dengan bendera ciri dan menogolnya untuk ujian, cuma hantar bendera ciri kepada komponen Senarai Pengguna dan balut cangkuk penggunaan. Semudah itu!

Sekarang, ubah suai komponen Apl:

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList testNewApi={true} />
  </Suspense>
</ErrorBoundary>

Ubah suai komponen Senarai Pengguna:

let users = [];
if(testNewApi){
  user = use(fetchData());
}

Anda juga boleh menggunakan cangkuk ini untuk mendapatkan objek Konteks, dan bukannya menggunakan kaedah biasa:

const data = useContext(myContext);

Anda boleh menggunakan cangkuk guna di sini, sebagai contoh, jika anda ingin mendapatkan semula konteks berdasarkan pernyataan bersyarat.

Kesimpulan

Dalam artikel ini, saya telah menggariskan sintaks penggunaan cangkuk dan memberikan contoh penggunaan. Ini sepatutnya membantu anda memahami cangkuk ini dan cara melaksanakannya dengan berkesan. Saya harap anda dapati maklumat ini bermanfaat untuk projek masa depan anda.

Atas ialah kandungan terperinci Bertindak balas terhadap ciri baharu - cangkuk &#use'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!