React Suspense'i laadimisseisundite kompositsioon: pesastatud laadimise haldamine

React Suspense, mis võeti kasutusele React 16.6-s, pakub deklaratiivset viisi rakenduse laadimisseisundite haldamiseks. See võimaldab komponendi renderdamise "peatada" seni, kuni selle sõltuvused (nt andmed või kood) on valmis. Kuigi selle põhikasutus on suhteliselt lihtne, hõlmab Suspense'i valdamine laadimisseisundite tõhusa komponeerimise mõistmist, eriti pesastatud laadimistsenaariumide korral. See artikkel pakub põhjalikku juhendit React Suspense'i ja selle täiustatud kompositsioonitehnikate kohta sujuvaks ja kaasahaaravaks kasutajakogemuseks.

React Suspense'i põhitõdede mõistmine

Oma olemuselt on Suspense Reacti komponent, mis aktsepteerib fallback prop'i. See fallback renderdatakse ajal, mil Suspense'i poolt ümbritsetud komponent(id) ootavad millegi laadimist. Kõige tavalisemad kasutusjuhud hõlmavad:

• Koodi jagamine React.lazy abil: Komponentide dünaamiline importimine esialgse paketi suuruse vähendamiseks.
• Andmete hankimine: Andmete ootamine API-st enne sellest sõltuva komponendi renderdamist.

Koodi jagamine React.lazy abil

React.lazy võimaldab teil Reacti komponente nõudmisel laadida. See võib oluliselt parandada rakenduse esialgset laadimisaega, eriti suurte ja paljude komponentidega rakenduste puhul. Siin on põhinäide:

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

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

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

export default App;

            

              
                Copy
              
            
          

Selles näites laaditakse MyComponent ainult siis, kui seda on vaja. Selle laadimise ajal kuvatakse fallback (sel juhul lihtne "Laadimine..." sõnum).

Andmete hankimine Suspense'iga

Kuigi React.lazy töötab Suspense'iga koheselt, nõuab andmete hankimine veidi teistsugust lähenemist. Suspense ei integreeru otseselt standardsete andmehankimise teekidega nagu fetch või axios. Selle asemel peate kasutama teeki või mustrit, mis suudab komponendi andmete ootamise ajal "peatada". Populaarne lahendus hõlmab andmehankimise teegi nagu swr või react-query kasutamist või kohandatud ressursside haldamise strateegia rakendamist.

Siin on kontseptuaalne näide kohandatud ressursside haldamise lähenemisviisi abil:

            // Resource.js
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } catch (e) { throw e; } // Add catch block for potential rejections not handled by `result`
      return result;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Fetched Data!' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

// App.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

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

export default App;

            

              
                Copy
              
            
          

Selgitus:

• createResource: See funktsioon võtab lubaduse ja tagastab objekti read meetodiga.
• read: See meetod kontrollib lubaduse olekut. Kui see on pooleli, viskab see lubaduse, mis peatab komponendi. Kui see on lahendatud, tagastab see andmed. Kui see on tagasi lükatud, viskab see vea.
• MyComponent: See komponent kasutab andmetele juurdepääsemiseks meetodit resource.read(). Kui andmed pole valmis, peatab komponent töö.
• App: Ümbritseb MyComponent'i Suspense'iga, pakkudes fallback'i kasutajaliidest andmete laadimise ajal.

Laadimisseisundite komponeerimine: pesastatud Suspense'i võimsus

Suspense'i tõeline võimsus seisneb selle võimes olla komponeeritud. Saate pesastada Suspense'i komponente, et luua nüansirikkamaid ja keerukamaid laadimiskogemusi. See on eriti kasulik, kui tegemist on komponentidega, millel on mitu asünkroonset sõltuvust, või kui soovite prioriseerida kasutajaliidese teatud osade laadimist.

Lihtne pesastatud Suspense

Kujutame ette stsenaariumi, kus teil on leht päise, põhisisu ala ja külgribaga. Igal neist komponentidest võib olla oma asünkroonsed sõltuvused. Saate kasutada pesastatud Suspense'i komponente, et kuvada iga sektsiooni jaoks iseseisvalt erinevaid laadimisseisundeid.

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

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Loading header...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Loading main content...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Loading sidebar...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Selles näites on iga komponent (Header, MainContent ja Sidebar) ümbritsetud oma Suspense'i piiriga. See tähendab, et kui Header veel laadib, kuvatakse sõnum "Päist laetakse...", samal ajal kui MainContent ja Sidebar saavad iseseisvalt laadida. See võimaldab reageerivamat ja informatiivsemat kasutajakogemust.

Laadimisseisundite prioriseerimine

Mõnikord võiksite prioriseerida kasutajaliidese teatud osade laadimist. Näiteks võiksite tagada, et päis ja navigeerimine laaditakse enne põhisisu. Seda saate saavutada Suspense'i komponente strateegiliselt pesastades.

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

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Loading header and content...</p>}>
      <Header />
      <Suspense fallback={<p>Loading main content...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Selles näites on nii Header kui ka MainContent ümbritsetud ühe välise Suspense'i piiriga. See tähendab, et sõnum "Päist ja sisu laetakse..." kuvatakse seni, kuni nii Header kui ka MainContent on laaditud. Sisemine MainContent'i Suspense käivitub ainult siis, kui Header on juba laaditud, pakkudes sisuala jaoks nüansirikkamat laadimiskogemust.

Täiustatud pesastatud laadimise haldamine

Lisaks põhilisele pesastamisele saate keerukates rakendustes laadimisseisundite haldamiseks kasutada täiustatud tehnikaid. Need hõlmavad järgmist:

• Kohandatud fallback-komponendid: Visuaalselt atraktiivsemate ja informatiivsemate laadimisindikaatorite kasutamine.
• Veakäsitlus Error Boundaries'ega: Vigade graatsiline käsitlemine laadimise ajal.
• Debouncing ja Throttling: Komponendi andmete laadimise katsete arvu optimeerimine.
• Suspense'i kombineerimine üleminekutega: Sujuvate üleminekute loomine laadimise ja laaditud olekute vahel.

Kohandatud fallback-komponendid

Selle asemel, et kasutada lihtsaid tekstsõnumeid fallback'idena, saate luua kohandatud fallback-komponente, mis pakuvad paremat kasutajakogemust. Need komponendid võivad hõlmata:

• Spinnerid: Animeeritud laadimisindikaatorid.
• Skeletid: Kohatäite UI elemendid, mis jäljendavad tegeliku sisu struktuuri.
• Edenemisribad: Laadimise edenemise visuaalsed indikaatorid.

Siin on näide skelettkomponendi kasutamisest fallback'ina:

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // You'll need to install this library

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

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

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

See näide kasutab teeki react-loading-skeleton, et kuvada rida skeletikohatäiteid, kui MyComponent laadib.

Veakäsitlus Error Boundaries'ega

Oluline on käsitleda vigu, mis võivad laadimise ajal tekkida. React pakub Error Boundaries'id, mis on komponendid, mis püüavad JavaScripti vigu oma alamkomponentide puus kinni, logivad need vead ja kuvavad fallback'i kasutajaliidese. Error Boundaries töötab hästi koos Suspense'iga, et pakkuda tugevat veakäitlusmehhanismi.

            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;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

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

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

export default App;

            

              
                Copy
              
            
          

Selles näites ümbritseb ErrorBoundary komponent Suspense'i komponenti. Kui MyComponent'i laadimise ajal ilmneb viga, püüab ErrorBoundary vea kinni ja kuvab sõnumi "Midagi läks valesti.".

Debouncing ja Throttling

Mõnel juhul võite soovida piirata, mitu korda komponent proovib andmeid laadida. See võib olla kasulik, kui andmete hankimise protsess on kallis või kui soovite vältida liigseid API-kutseid. Debouncing ja throttling on kaks tehnikat, mis aitavad teil seda saavutada.

Debouncing: Funktsiooni täitmine lükkub edasi teatud aja möödumiseni alates viimasest käivitamisest.

Throttling: Piirab funktsiooni täitmise kiirust.

Kuigi neid tehnikaid rakendatakse sageli kasutaja sisendsündmuste puhul, saab neid kasutada ka andmete hankimise kontrollimiseks Suspense'i piirides. Rakendamine sõltuks konkreetsest andmehankimise teegist või ressursside haldamise strateegiast, mida kasutate.

Suspense'i kombineerimine üleminekutega

React Transitions API (mis võeti kasutusele React 18-s) võimaldab teil luua sujuvamaid üleminekuid rakenduse erinevate olekute vahel, sealhulgas laadimise ja laaditud olekute vahel. Saate kasutada useTransition'it, et anda Reactile märku, et olekuvärskendus on üleminek, mis aitab vältida järske kasutajaliidese värskendusi.

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

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

function App() {
  const [isPending, startTransition] = useTransition();
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Load Component'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Loading component...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Selles näites käivitab nupu "Laadi komponent" klõpsamine ülemineku. React seab MyComponent'i laadimise prioriteediks, hoides samal ajal kasutajaliidese reageerivana. Oleku isPending abil näidatakse, kas üleminek on pooleli, mis võimaldab nupu keelata ja pakkuda kasutajale visuaalset tagasisidet.

Reaalmaailma näited ja stsenaariumid

Pesastatud Suspense'i praktiliste rakenduste edasiseks illustreerimiseks vaatame mõned reaalmaailma stsenaariumid:

• E-kaubanduse tooteleht: Tootelehel võib olla mitu jaotist, nagu toote üksikasjad, arvustused ja seotud tooted. Iga jaotist saab iseseisvalt laadida, kasutades pesastatud Suspense'i piire. Saate prioriseerida toote üksikasjade laadimist, et kasutaja näeks kõige olulisemat teavet võimalikult kiiresti.
• Sotsiaalmeedia voog: Sotsiaalmeedia voog võib koosneda postitustest, kommentaaridest ja kasutajaprofiilidest. Igal neist komponentidest võivad olla oma asünkroonsed sõltuvused. Pesastatud Suspense võimaldab kuvada iga jaotise jaoks kohatäite UI-d andmete laadimise ajal. Samuti saate prioriseerida kasutaja enda postituste laadimist, et pakkuda isikupärastatud kogemust.
• Armatuurlaua rakendus: Armatuurlaud võib sisaldada mitut vidinat, millest igaüks kuvab andmeid erinevatest allikatest. Pesastatud Suspense'i saab kasutada iga vidina iseseisvaks laadimiseks. See võimaldab kasutajal näha saadaolevaid vidinaid, samal ajal kui teised veel laadivad, luues reageerivama ja interaktiivsema kogemuse.

Näide: E-kaubanduse tooteleht

Vaatame, kuidas saaksite e-kaubanduse tootelehel pesastatud Suspense'i rakendada:

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

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Loading product details...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading product reviews...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading related products...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

Selles näites on tootelehe iga jaotis (toote üksikasjad, arvustused ja seotud tooted) ümbritsetud oma Suspense'i piiriga. See võimaldab igal jaotisel iseseisvalt laadida, pakkudes reageerivamat kasutajakogemust. Võiksite kaaluda ka kohandatud skeletikomponendi kasutamist fallback'ina iga jaotise jaoks, et pakkuda visuaalselt atraktiivsemat laadimisindikaatorit.

Parimad tavad ja kaalutlused

React Suspense'i ja pesastatud laadimise haldamisega töötades on oluline meeles pidada järgmisi parimaid tavasid:

• Hoidke Suspense'i piirid väikesed: Väiksemad Suspense'i piirid võimaldavad täpsemat laadimise kontrolli ja paremat kasutajakogemust. Vältige oma rakenduse suurte osade mähkimist ühte Suspense'i piiri.
• Kasutage kohandatud fallback-komponente: Asendage lihtsad tekstisõnumid visuaalselt atraktiivsete ja informatiivsete laadimisindikaatoritega, nagu skeletid, spinnerid või edenemisribad.
• Käsitsege vigu graatsiliselt: Kasutage Error Boundaries'eid laadimise ajal tekkivate vigade püüdmiseks ja kasutajasõbraliku veateate kuvamiseks.
• Optimeerige andmete hankimist: Kasutage andmehankimise teeke nagu swr või react-query, et lihtsustada andmete hankimist ja vahemällu salvestamist.
• Arvestage jõudlusega: Vältige Suspense'i komponentide liigset pesastamist, kuna see võib jõudlust mõjutada. Kasutage debouncing'ut ja throttling'ut, et piirata, mitu korda komponent proovib andmeid laadida.
• Testige oma laadimisseisundeid: Testige põhjalikult oma laadimisseisundeid, et tagada hea kasutajakogemus erinevates võrgutingimustes.

Järeldus

React Suspense pakub võimsat ja deklaratiivset viisi rakenduste laadimisseisundite haldamiseks. Mõistes, kuidas laadimisseisundeid tõhusalt komponeerida, eriti pesastatud Suspense'i abil, saate luua kaasahaaravamaid ja reageerivamaid kasutajakogemusi. Järgides käesolevas artiklis kirjeldatud parimaid tavasid, saate omandada React Suspense'i ja luua tugevaid ja jõudlusele optimeeritud rakendusi, mis käsitlevad graatsiliselt asünkroonseid sõltuvusi.

Pidage meeles, et prioriseerige kasutajakogemust, pakkuge informatiivseid laadimisindikaatoreid ja käsitsege vigu graatsiliselt. Hoolika planeerimise ja rakendamisega võib React Suspense olla väärtuslik tööriist teie front-end arenduse arsenalis.

Nende tehnikate omaksvõtmisega saate tagada, et teie rakendused pakuvad sujuvat ja meeldivat kogemust kasutajatele kogu maailmas, olenemata nende asukohast või võrgutingimustest.