React Suspense: Išsamus duomenų gavimo ir kodo skaidymo vadovas

React Suspense yra galinga funkcija, pristatyta React 16.6 versijoje, leidžianti „sustabdyti“ komponentų atvaizdavimą, kol laukiama kažko, pavyzdžiui, kol bus įkelti duomenys arba atsisiųstas kodas. Tai suteikia deklaratyvų būdą valdyti įkėlimo būsenas ir pagerinti vartotojo patirtį, elegantiškai tvarkant asinchronines operacijas. Šis vadovas supažindins jus su Suspense koncepcijomis, jos naudojimo atvejais ir praktiniais pavyzdžiais, kaip ją įdiegti savo React programose.

Kas yra React Suspense?

Suspense yra React komponentas, kuris apgaubia kitus komponentus ir leidžia jums rodyti atsarginę vartotojo sąsają (pvz., įkėlimo suktuką), kol tie komponentai laukia, kol bus išspręstas pažadas. Šis pažadas gali būti susijęs su:

• Duomenų gavimas: Laukiama, kol duomenys bus gauti iš API.
• Kodo skaidymas: Laukiama, kol JavaScript moduliai bus atsisiųsti ir išanalizuoti.

Prieš Suspense, įkėlimo būsenų valdymas dažnai apėmė sudėtingą sąlyginį atvaizdavimą ir rankinį asinchroninių operacijų tvarkymą. Suspense tai supaprastina, pateikdamas deklaratyvų požiūrį, todėl jūsų kodas tampa švaresnis ir lengviau prižiūrimas.

Pagrindinės koncepcijos

• Suspense komponentas: Pats <Suspense> komponentas. Jis priima fallback savybę, kuri nurodo vartotojo sąsają, kurią reikia rodyti, kol apvynioti komponentai yra sustabdyti.
• React.lazy(): Funkcija, kuri leidžia atlikti kodo skaidymą dinamiškai importuojant komponentus. Ji grąžina Promise, kuris išsprendžiamas, kai komponentas yra įkeliamas.
• Promise integravimas: Suspense sklandžiai integruojasi su Promises. Kai komponentas bando atvaizduoti duomenis iš Promise, kuris dar nebuvo išspręstas, jis „sustabdo“ ir rodo atsarginę vartotojo sąsają.

Naudojimo atvejai

1. Duomenų gavimas su Suspense

Vienas iš pagrindinių Suspense naudojimo atvejų yra duomenų gavimo valdymas. Užuot rankiniu būdu valdę įkėlimo būsenas su sąlyginiu atvaizdavimu, galite naudoti Suspense, kad deklaratyviai rodytumėte įkėlimo indikatorių, kol laukiama duomenų atvykimo.

Pavyzdys: Vartotojo duomenų gavimas iš API

Tarkime, turite komponentą, kuris rodo vartotojo duomenis, gautus iš API. Be Suspense, galite turėti tokį kodą:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

Šis kodas veikia, bet jis apima kelių būsenos kintamųjų (isLoading, error, user) ir sąlyginės atvaizdavimo logikos valdymą. Su Suspense, galite tai supaprastinti naudodami duomenų gavimo biblioteką, tokią kaip SWR arba TanStack Query (anksčiau React Query), kurios yra sukurtos sklandžiai veikti su Suspense.

Štai kaip galite naudoti SWR su Suspense:

import React from 'react';
import useSWR from 'swr';

// A simple fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Loading user data...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

Šiame pavyzdyje:

• Mes naudojame useSWR, kad gautume vartotojo duomenis. suspense: true parinktis nurodo SWR išmesti Promise, jei duomenys dar nėra prieinami.
• UserProfile komponentui nereikia aiškiai valdyti įkėlimo ar klaidų būsenų. Jis tiesiog atvaizduoja vartotojo duomenis, kai jie yra prieinami.
• <Suspense> komponentas pagauna Promise, kurį išmeta SWR, ir rodo atsarginę vartotojo sąsają (<p>Loading user data...</p>), kol duomenys yra gaunami.

Šis požiūris supaprastina jūsų komponento logiką ir leidžia lengviau argumentuoti duomenų gavimą.

Globalūs duomenų gavimo aspektai:

Kuriant programas globaliai auditorijai, apsvarstykite šiuos dalykus:

• Tinklo delsa: Skirtingose geografinėse vietovėse esantys vartotojai gali patirti skirtingą tinklo delsą. Suspense gali padėti užtikrinti geresnę vartotojo patirtį, rodant įkėlimo indikatorius, kol duomenys yra gaunami iš atokių serverių. Apsvarstykite galimybę naudoti turinio pristatymo tinklą (CDN), kad talpintumėte duomenis arčiau savo vartotojų.
• Duomenų lokalizavimas: Įsitikinkite, kad jūsų API palaiko duomenų lokalizavimą, leidžiantį teikti duomenis vartotojo pageidaujama kalba ir formatu.
• API prieinamumas: Stebėkite savo API prieinamumą ir našumą iš skirtingų regionų, kad užtikrintumėte nuoseklią vartotojo patirtį.

2. Kodo skaidymas su React.lazy() ir Suspense

Kodo skaidymas yra technika, skirta suskaidyti jūsų programą į mažesnius blokus, kurie gali būti įkeliami pagal poreikį. Tai gali žymiai pagerinti pradinį jūsų programos įkėlimo laiką, ypač dideliems ir sudėtingiems projektams.

React pateikia React.lazy() funkciją kodo skaidymo komponentams. Kai naudojama su Suspense, ji leidžia rodyti atsarginę vartotojo sąsają, kol laukiama, kol komponentas bus atsisiųstas ir išanalizuotas.

Pavyzdys: Tingus komponento įkėlimas

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

Šiame pavyzdyje:

• Mes naudojame React.lazy(), kad dinamiškai importuotume OtherComponent. Tai grąžina Promise, kuris išsprendžiamas, kai komponentas yra įkeliamas.
• Mes apvyniojame <OtherComponent /> su <Suspense> ir pateikiame fallback savybę.
• Kol OtherComponent yra įkeliamas, bus rodoma atsarginė vartotojo sąsaja (<p>Loading...</p>). Kai komponentas bus įkeltas, jis pakeis atsarginę vartotojo sąsają.

Kodo skaidymo privalumai:

• Pagerintas pradinis įkėlimo laikas: Įkeliant tik reikiamą kodą pradiniam rodiniui, galite sumažinti laiką, per kurį jūsų programa tampa interaktyvi.
• Sumažintas rinkinio dydis: Kodo skaidymas gali padėti sumažinti bendrą jūsų programos JavaScript rinkinio dydį, o tai gali pagerinti našumą, ypač esant mažo pralaidumo ryšiams.
• Geresnė vartotojo patirtis: Suteikdami greitesnį pradinį įkėlimą ir įkeldami kodą tik tada, kai reikia, galite sukurti sklandesnę ir jautresnę vartotojo patirtį.

Pažangios kodo skaidymo technikos:

• Maršruto pagrindu pagrįstas kodo skaidymas: Skaidykite savo programą pagal maršrutus, kad kiekvienas maršrutas įkeltų tik jam reikalingą kodą. Tai galima lengvai pasiekti su bibliotekomis, tokiomis kaip React Router.
• Komponentų pagrindu pagrįstas kodo skaidymas: Skaidykite atskirus komponentus į atskirus blokus, ypač didelius arba retai naudojamus komponentus.
• Dinaminiai importai: Naudokite dinaminius importus savo komponentuose, kad įkeltumėte kodą pagal poreikį, atsižvelgiant į vartotojo sąveikas ar kitas sąlygas.

3. Vienalaikis režimas ir Suspense

Suspense yra pagrindinis React vienalaikio režimo ingredientas – naujų funkcijų rinkinys, leidžiantis React vienu metu atlikti kelias užduotis. Vienalaikis režimas leidžia React teikti pirmenybę svarbiems atnaujinimams, pertraukti ilgai trunkančias užduotis ir pagerinti jūsų programos jautrumą.

Su vienalaikiu režimu ir Suspense, React gali:

• Pradėti atvaizduoti komponentus, kol dar ne visi duomenys yra prieinami: React gali pradėti atvaizduoti komponentą, net jei kai kurios jo duomenų priklausomybės vis dar yra gaunamos. Tai leidžia React anksčiau parodyti dalinę vartotojo sąsają, pagerinant suvokiamą jūsų programos našumą.
• Pertraukti ir atnaujinti atvaizdavimą: Jei React atvaizduojant komponentą įvyksta didesnio prioriteto atnaujinimas, jis gali pertraukti atvaizdavimo procesą, apdoroti didesnio prioriteto atnaujinimą ir vėliau atnaujinti komponento atvaizdavimą.
• Išvengti pagrindinės gijos blokavimo: Vienalaikis režimas leidžia React atlikti ilgai trunkančias užduotis neblokuojant pagrindinės gijos, o tai gali neleisti vartotojo sąsajai tapti nejautria.

Norėdami įjungti vienalaikį režimą, galite naudoti createRoot API React 18:

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

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

Geriausia Suspense naudojimo praktika

• Naudokite duomenų gavimo biblioteką: Apsvarstykite galimybę naudoti duomenų gavimo biblioteką, tokią kaip SWR arba TanStack Query, kurios yra sukurtos sklandžiai veikti su Suspense. Šios bibliotekos teikia tokias funkcijas kaip talpyklos, automatiniai pakartotiniai bandymai ir klaidų tvarkymas, kurie gali supaprastinti jūsų duomenų gavimo logiką.
• Pateikite prasmingą atsarginę vartotojo sąsają: Atsarginė vartotojo sąsaja turėtų aiškiai parodyti, kad kažkas įkeliama. Naudokite suktukus, eigos juostas arba skeleto įkėliklius, kad sukurtumėte vizualiai patrauklią ir informatyvią įkėlimo patirtį.
• Tvarkykite klaidas elegantiškai: Naudokite klaidų ribas, kad pagautumėte klaidas, kurios įvyksta atvaizduojant. Tai gali neleisti sugriūti visai jūsų programai ir suteikti geresnę vartotojo patirtį.
• Optimizuokite kodo skaidymą: Naudokite kodo skaidymą strategiškai, kad sumažintumėte pradinį jūsų programos įkėlimo laiką. Identifikuokite didelius arba retai naudojamus komponentus ir suskaidykite juos į atskirus blokus.
• Išbandykite savo Suspense diegimą: Kruopščiai išbandykite savo Suspense diegimą, kad įsitikintumėte, jog jis veikia tinkamai ir kad jūsų programa elegantiškai tvarko įkėlimo būsenas ir klaidas.

Klaidų tvarkymas su klaidų ribomis

Nors Suspense tvarko *įkėlimo* būseną, klaidų ribos tvarko *klaidų* būseną atvaizdavimo metu. Klaidų ribos yra React komponentai, kurie pagauna JavaScript klaidas bet kur savo vaikų komponentų medyje, registruoja tas klaidas ir rodo atsarginę vartotojo sąsają, o ne sugriauna visą komponentų medį.

Štai pagrindinis klaidų ribos pavyzdys:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Norėdami naudoti klaidų ribą, apvyniokite ją aplink komponentą, kuris gali išmesti klaidą:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Derindami Suspense ir klaidų ribas, galite sukurti tvirtą ir atsparią programą, kuri elegantiškai tvarko įkėlimo būsenas ir klaidas.

Realūs pavyzdžiai

Štai keletas realių pavyzdžių, kaip Suspense gali būti naudojamas siekiant pagerinti vartotojo patirtį:

• El. prekybos svetainė: Naudokite Suspense, kad rodytumėte įkėlimo indikatorius gaunant išsamią produkto informaciją arba vaizdus. Tai gali neleisti vartotojui matyti tuščią puslapį, kol laukiama duomenų įkėlimo.
• Socialinės žiniasklaidos platforma: Naudokite Suspense, kad tingiai įkeltumėte komentarus arba įrašus, kai vartotojas slenka žemyn puslapiu. Tai gali pagerinti pradinį puslapio įkėlimo laiką ir sumažinti duomenų kiekį, kurį reikia atsisiųsti.
• Prietaisų skydelio programa: Naudokite Suspense, kad rodytumėte įkėlimo indikatorius gaunant duomenis diagramoms arba grafikams. Tai gali užtikrinti sklandesnę ir jautresnę vartotojo patirtį.

Pavyzdys: Tarptautinė el. prekybos platforma

Apsvarstykite tarptautinę el. prekybos platformą, parduodančią produktus visame pasaulyje. Platforma gali pasinaudoti Suspense ir React.lazy(), kad:

• Tingiai įkeltų produktų vaizdus: Naudokite React.lazy(), kad įkeltumėte produktų vaizdus tik tada, kai jie matomi peržiūros srityje. Tai gali žymiai sumažinti pradinį produktų sąrašo puslapio įkėlimo laiką. Apvyniokite kiekvieną tingiai įkeltą vaizdą su <Suspense fallback={<img src="placeholder.png" alt="Loading..." />}>, kad būtų rodomas vietos rezervavimo vaizdas, kol įkeliamas tikrasis vaizdas.
• Skaidykite kodą šalies specifiniams komponentams: Jei platforma turi šalies specifinių komponentų (pvz., valiutos formatavimas, adreso įvedimo laukai), naudokite React.lazy(), kad įkeltumėte šiuos komponentus tik tada, kai vartotojas pasirenka konkrečią šalį.
• Gaukite lokalizuotus produktų aprašymus: Naudokite duomenų gavimo biblioteką, tokią kaip SWR su Suspense, kad gautumėte produktų aprašymus vartotojo pageidaujama kalba. Rodykite įkėlimo indikatorių, kol gaunami lokalizuoti aprašymai.

Išvada

React Suspense yra galinga funkcija, kuri gali žymiai pagerinti jūsų React programų vartotojo patirtį. Pateikdama deklaratyvų būdą valdyti įkėlimo būsenas ir kodo skaidymą, Suspense supaprastina jūsų kodą ir leidžia lengviau argumentuoti asinchronines operacijas. Nesvarbu, ar kuriate mažą asmeninį projektą, ar didelę įmonės programą, Suspense gali padėti jums sukurti sklandesnę, jautresnę ir našesnę vartotojo patirtį.

Integruodami Suspense su duomenų gavimo bibliotekomis ir kodo skaidymo technikomis, galite išnaudoti visą React vienalaikio režimo potencialą ir sukurti tikrai šiuolaikiškas ir patrauklias žiniatinklio programas. Pasinaudokite Suspense ir pakelkite savo React kūrimą į kitą lygį.

Papildomas mokymasis

• React Suspense dokumentacija
• SWR dokumentacija
• TanStack Query dokumentacija
• React 18 pranešimas (vienalaikis režimas)