Suspen dalam React

React Suspense ialah ciri berkuasa yang membolehkan pembangun mengendalikan pemaparan tak segerak dengan anggun dengan memaparkan UI sandaran semasa komponen atau data sedang dimuatkan. Ia berfungsi seiring dengan penyelesaian React.lazy, Rendering Serentak dan Pengambilan Data seperti React Query, Relay atau pelaksanaan tersuai.

Bagaimana Suspens Berfungsi

1. Sandaran Pemegang Tempat: Suspens membalut komponen yang perlu menunggu operasi tak segerak. Semasa menunggu, ia memaparkan UI sandaran (cth., pemutar pemuatan).
2. Pemarahan Automatik: Setelah operasi tak segerak selesai, komponen atau data sebenar dipaparkan.

Sintaks Asas

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

• React.Suspense: Membungkus komponen yang dimuatkan malas.
• sandaran: Menentukan UI untuk ditunjukkan sementara menunggu komponen dimuatkan.

Gunakan Kes Saspens

1. Komponen Pemuatan Malas: Memuatkan komponen secara dinamik dengan React.lazy.
2. Pengambilan Data: Menguruskan pemuatan data tak segerak apabila digabungkan dengan perpustakaan seperti Relay atau React Query.
3. Rendering Serentak: Mengoptimumkan pemaparan dalam mod React serentak.

Contoh 1: Lazy Loading with Suspense

Tanpa Suspen

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

HeavyComponent dimuatkan secara serentak, meningkatkan masa pemuatan awal.

Dengan Suspen

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Kini, HeavyComponent dimuatkan hanya apabila diperlukan, menunjukkan sandaran semasa proses pemuatan.

Contoh 2: Suspens dengan Pelbagai Komponen Malas

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Components...</div>}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

UI sandaran dipaparkan sehingga kedua-dua komponen selesai dimuatkan.

Contoh 3: Penangguhan untuk Pengambilan Data (Percubaan)

React Suspense juga berguna untuk pengambilan data tak segerak apabila disepadukan dengan perpustakaan seperti Relay atau React Query.

Contoh dengan React Query

import React, { Suspense } from "react";
import { useQuery } from "react-query";

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

Ralat Mengendalikan dengan Suspens

Jika ralat berlaku semasa memuatkan komponen atau data, React Suspense tidak menyediakan pengendalian ralat terbina dalam. Gunakan Sempadan Ralat untuk tujuan ini.

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

Amalan Terbaik untuk Menggunakan Suspense

1. Kemunduran Mudah: Gunakan ruang letak ringan untuk mengelakkan overhed prestasi.
2. Gabungkan dengan Sempadan Ralat: Pastikan pengendalian kegagalan komponen atau beban data yang betul.
3. Chunk Intelligently: Bahagikan aplikasi anda kepada bahagian logik untuk prestasi yang lebih baik.

Kebaikan Suspen

1. Pengalaman Pengguna yang Dipertingkat: Memastikan apl kekal responsif dengan menunjukkan UI sandaran.
2. Saiz Himpunan Dikurangkan: Berfungsi dengan baik dengan pemisahan kod untuk saiz berkas yang dioptimumkan.
3. Pengendalian Asynchronous Ringkas: Mengurus keadaan pemuatan dengan cara yang lebih deklaratif.

Penggunaan Terperinci: Nested Suspense

Anda boleh menyusun berbilang komponen Suspense untuk kawalan berbutir ke atas keadaan mundur.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

Had Ketergantungan

1. Sokongan Pengambilan Data: Ciri percubaan untuk mengambil data secara terus.
2. Tiada Pengendalian Ralat: Memerlukan mekanisme pengendalian ralat tambahan seperti Ralat Sempadan.
3. Keserasian Pelayar: Memerlukan penyemak imbas moden dengan sokongan untuk modul dan janji ES6.

Kesimpulan

React Suspense ialah alat serba boleh untuk mengurus pemaparan tak segerak dalam aplikasi React. Ia memudahkan pengendalian keadaan pemuatan, meningkatkan prestasi dengan pemuatan malas dan mencipta pengalaman pengguna yang lebih lancar apabila digabungkan dengan teknik pemisahan kod dan pengendalian ralat.

Atas ialah kandungan terperinci Cara Menggunakan Suspense dalam Reaksi untuk Render Asynchronous yang Diperbaiki. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!