React Suspense Sammensætning af indlæsningstilstand: Håndtering af indlejret indlæsning

React Suspense, introduceret i React 16.6, giver en deklarativ måde at håndtere indlæsningstilstande i din applikation. Det giver dig mulighed for at "suspende" rendering af en komponent, indtil dens afhængigheder (som data eller kode) er klar. Selvom dens grundlæggende brug er relativt ligetil, indebærer mastering af Suspense at forstå, hvordan man sammensætter indlæsningstilstande effektivt, især når man har at gøre med indlejrede indlæsningsscenarier. Denne artikel giver en omfattende guide til React Suspense og dens avancerede sammensætningsteknikker for en smidig og engagerende brugeroplevelse.

Forståelse af React Suspense Grundlæggende

I sin kerne er Suspense en React-komponent, der accepterer en fallback prop. Denne fallback gengives, mens den/de komponent(er), der er omviklet af Suspense, venter på, at noget skal indlæses. De mest almindelige anvendelsestilfælde involverer:

• Kodeopdeling med React.lazy: Dynamisk import af komponenter for at reducere den indledende bundle-størrelse.
• Datahentning: Venter på, at data fra en API er blevet løst, før komponenten, der er afhængig af den, gengives.

Kodeopdeling med React.lazy

React.lazy giver dig mulighed for at indlæse React-komponenter efter behov. Dette kan forbedre den indledende indlæsningstid for din applikation betydeligt, især for store applikationer med mange komponenter. Her er et grundlæggende eksempel:

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

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

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

export default App;

            

              
                Copy
              
            
          

I dette eksempel indlæses MyComponent kun, når det er nødvendigt. Mens det indlæses, vises fallback (i dette tilfælde en simpel "Indlæser..."-meddelelse).

Datahentning med Suspense

Mens React.lazy fungerer out-of-the-box med Suspense, kræver datahentning en lidt anden tilgang. Suspense integreres ikke direkte med standard datahentningsbiblioteker som fetch eller axios. I stedet skal du bruge et bibliotek eller mønster, der kan "suspende" en komponent, mens du venter på data. En populær løsning involverer brug af et datahentningsbibliotek som swr eller react-query, eller implementering af en brugerdefineret ressourcehåndteringsstrategi.

Her er et konceptuelt eksempel ved hjælp af en brugerdefineret ressourcehåndteringsmetode:

            // 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;
      }
      return result;
    },
  };
};

export default createResource;

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

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Hentet 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>Indlæser data...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Forklaring:

• createResource: Denne funktion tager et promise og returnerer et objekt med en read metode.
• read: Denne metode kontrollerer status for promise. Hvis den er i gang, kaster den promise, hvilket suspenderer komponenten. Hvis den er løst, returnerer den dataene. Hvis den afvises, kaster den fejlen.
• MyComponent: Denne komponent bruger resource.read() metoden til at få adgang til dataene. Hvis dataene ikke er klar, suspenderes komponenten.
• App: Omvikler MyComponent i Suspense, og giver en fallback UI, mens dataene indlæses.

Sammensætning af indlæsningstilstande: Styrken ved indlejret Suspense

Den virkelige styrke ved Suspense ligger i dens evne til at blive sammensat. Du kan indlejre Suspense-komponenter for at skabe mere granulære og sofistikerede indlæsningsoplevelser. Dette er især nyttigt, når du har at gøre med komponenter, der har flere asynkrone afhængigheder, eller når du vil prioritere indlæsningen af visse dele af din UI.

Grundlæggende indlejret Suspense

Lad os forestille os et scenarie, hvor du har en side med en header, et hovedindholdsområde og en sidebjælke. Hver af disse komponenter kan have sine egne asynkrone afhængigheder. Du kan bruge indlejrede Suspense-komponenter til at vise forskellige indlæsningstilstande for hver sektion uafhængigt af hinanden.

            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>Indlæser header...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Indlæser hovedindhold...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Indlæser sidebjælke...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

I dette eksempel er hver komponent (Header, MainContent og Sidebar) omviklet i sin egen Suspense-grænse. Det betyder, at hvis Header stadig indlæses, vil meddelelsen "Indlæser header..." blive vist, mens MainContent og Sidebar stadig kan indlæses uafhængigt af hinanden. Dette giver en mere responsiv og informativ brugeroplevelse.

Prioritering af indlæsningstilstande

Nogle gange vil du måske prioritere indlæsningen af visse dele af din UI. For eksempel vil du måske sikre, at headeren og navigationen indlæses før hovedindholdet. Du kan opnå dette ved at indlejre Suspense-komponenter strategisk.

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

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

function App() {
  return (
    <Suspense fallback={<p>Indlæser header og indhold...</p>}>
      <Header />
      <Suspense fallback={<p>Indlæser hovedindhold...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

I dette eksempel er Header og MainContent begge omviklet i en enkelt, ydre Suspense-grænse. Det betyder, at meddelelsen "Indlæser header og indhold..." vises, indtil både Header og MainContent er indlæst. Den indre Suspense for MainContent udløses kun, hvis Header allerede er indlæst, hvilket giver en mere granulær indlæsningsoplevelse for indholdsområdet.

Avanceret håndtering af indlejret indlæsning

Ud over grundlæggende indlejring kan du bruge mere avancerede teknikker til at håndtere indlæsningstilstande i komplekse applikationer. Disse inkluderer:

• Brugerdefinerede fallback-komponenter: Brug af mere visuelt tiltalende og informative indlæsningsindikatorer.
• Fejlhåndtering med fejlgrænser: Håndtering af fejl, der opstår under indlæsning, på en elegant måde.
• Debouncing og throttling: Optimering af antallet af gange, en komponent forsøger at indlæse data.
• Kombinering af Suspense med overgange: Oprettelse af smidige overgange mellem indlæsnings- og indlæste tilstande.

Brugerdefinerede fallback-komponenter

I stedet for at bruge simple tekstbeskeder som fallbacks, kan du oprette brugerdefinerede fallback-komponenter, der giver en bedre brugeroplevelse. Disse komponenter kan omfatte:

• Spinnere: Animerede indlæsningsindikatorer.
• Skeletter: Pladsholder UI-elementer, der efterligner strukturen af det faktiske indhold.
• Progress Bars: Visuelle indikatorer for indlæsningsforløbet.

Her er et eksempel på brug af en skeletkomponent som en fallback:

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // Du skal installere dette bibliotek

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

export default LoadingSkeleton;

// Brug i 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
              
            
          

Dette eksempel bruger react-loading-skeleton biblioteket til at vise en række skeletpladsholdere, mens MyComponent indlæses.

Fejlhåndtering med fejlgrænser

Det er vigtigt at håndtere fejl, der kan opstå under indlæsningsprocessen. React leverer fejlgrænser, som er komponenter, der fanger JavaScript-fejl hvor som helst i deres underordnede komponenttræ, logger disse fejl og viser en fallback UI. Fejlgrænser fungerer godt med Suspense for at give en robust fejlhåndteringsmekanisme.

            import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Opdater tilstand, så den næste gengivelse viser fallback-UI'en.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Du kan også logge fejlen til en fejlrapporteringstjeneste
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Du kan gengive en brugerdefineret fallback-UI
      return <h1>Noget gik galt.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

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

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

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

export default App;

            

              
                Copy
              
            
          

I dette eksempel omvikler ErrorBoundary komponenten Suspense komponenten. Hvis der opstår en fejl under indlæsningen af MyComponent, vil ErrorBoundary fange fejlen og vise meddelelsen "Noget gik galt.".

Debouncing og Throttling

I nogle tilfælde vil du måske begrænse antallet af gange, en komponent forsøger at indlæse data. Dette kan være nyttigt, hvis datahentningsprocessen er dyr, eller hvis du vil forhindre for mange API-kald. Debouncing og throttling er to teknikker, der kan hjælpe dig med at opnå dette.

Debouncing: Forsinker udførelsen af en funktion, indtil der er gået en vis tid siden sidste gang, den blev kaldt.

Throttling: Begrænser den hastighed, hvormed en funktion kan udføres.

Mens disse teknikker ofte anvendes på brugerinputhændelser, kan de også bruges til at kontrollere datahentning inden for Suspense-grænser. Implementeringen afhænger af det specifikke datahentningsbibliotek eller den ressourcehåndteringsstrategi, du bruger.

Kombinering af Suspense med overgange

React Transitions API (introduceret i React 18) giver dig mulighed for at skabe smidigere overgange mellem forskellige tilstande i din applikation, herunder indlæsnings- og indlæste tilstande. Du kan bruge useTransition til at signalere til React, at en tilstandsopdatering er en overgang, hvilket kan hjælpe med at forhindre rystende UI-opdateringer.

            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 ? 'Indlæser...' : 'Indlæs komponent'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Indlæser komponent...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

I dette eksempel udløser et klik på knappen "Indlæs komponent" en overgang. React prioriterer indlæsningen af MyComponent, mens UI'en holdes responsiv. Tilstanden isPending angiver, om en overgang er i gang, hvilket giver dig mulighed for at deaktivere knappen og give visuel feedback til brugeren.

Eksempler og scenarier fra den virkelige verden

For yderligere at illustrere de praktiske anvendelser af indlejret Suspense, lad os overveje et par eksempler fra den virkelige verden:

• E-handels produktside: En produktside kan have flere sektioner, såsom produktoplysninger, anmeldelser og relaterede produkter. Hver sektion kan indlæses uafhængigt ved hjælp af indlejrede Suspense-grænser. Du kan prioritere indlæsningen af produktoplysninger for at sikre, at brugeren ser de vigtigste oplysninger så hurtigt som muligt.
• Social Media Feed: Et socialt medie-feed kan bestå af indlæg, kommentarer og brugerprofiler. Hver af disse komponenter kan have sine egne asynkrone afhængigheder. Indlejret Suspense giver dig mulighed for at vise en pladsholder UI for hver sektion, mens dataene indlæses. Du kan også prioritere indlæsningen af brugerens egne indlæg for at give en personlig oplevelse.
• Dashboard-applikation: Et dashboard kan indeholde flere widgets, der hver viser data fra forskellige kilder. Indlejret Suspense kan bruges til at indlæse hver widget uafhængigt af hinanden. Dette giver brugeren mulighed for at se de tilgængelige widgets, mens andre stadig indlæses, hvilket skaber en mere responsiv og interaktiv oplevelse.

Eksempel: E-handels produktside

Lad os nedbryde, hvordan du kan implementere indlejret Suspense på en e-handels produktside:

            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>Indlæser produktoplysninger...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Indlæser produktanmeldelser...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Indlæser relaterede produkter...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

I dette eksempel er hver sektion af produktsiden (produktoplysninger, anmeldelser og relaterede produkter) omviklet i sin egen Suspense-grænse. Dette gør det muligt for hver sektion at indlæses uafhængigt af hinanden, hvilket giver en mere responsiv brugeroplevelse. Du kan også overveje at bruge en brugerdefineret skeletkomponent som en fallback for hver sektion for at give en mere visuelt tiltalende indlæsningsindikator.

Best Practices og overvejelser

Når du arbejder med React Suspense og håndtering af indlejret indlæsning, er det vigtigt at huske følgende best practices:

• Hold Suspense-grænser små: Mindre Suspense-grænser giver mulighed for mere granulær indlæsningskontrol og en bedre brugeroplevelse. Undgå at omvikle store sektioner af din applikation i en enkelt Suspense-grænse.
• Brug brugerdefinerede fallback-komponenter: Erstat simple tekstbeskeder med visuelt tiltalende og informative indlæsningsindikatorer, såsom skeletter, spinnere eller statuslinjer.
• Håndter fejl elegant: Brug fejlgrænser til at fange fejl, der opstår under indlæsningsprocessen, og vis en brugervenlig fejlmeddelelse.
• Optimer datahentning: Brug datahentningsbiblioteker som swr eller react-query til at forenkle datahentning og caching.
• Overvej ydeevne: Undgå overdreven indlejring af Suspense-komponenter, da dette kan påvirke ydeevnen. Brug debouncing og throttling til at begrænse antallet af gange, en komponent forsøger at indlæse data.
• Test dine indlæsningstilstande: Test dine indlæsningstilstande grundigt for at sikre, at de giver en god brugeroplevelse under forskellige netværksforhold.

Konklusion

React Suspense giver en kraftfuld og deklarativ måde at håndtere indlæsningstilstande i dine applikationer. Ved at forstå, hvordan man sammensætter indlæsningstilstande effektivt, især gennem indlejret Suspense, kan du skabe mere engagerende og responsive brugeroplevelser. Ved at følge de bedste fremgangsmåder, der er skitseret i denne artikel, kan du mestre React Suspense og bygge robuste og performante applikationer, der elegant håndterer asynkrone afhængigheder.

Husk at prioritere brugeroplevelsen, give informative indlæsningsindikatorer og håndtere fejl elegant. Med omhyggelig planlægning og implementering kan React Suspense være et værdifuldt værktøj i dit front-end udviklingsarsenal.

Ved at omfavne disse teknikker kan du sikre, at dine applikationer giver en smidig og dejlig oplevelse for brugere over hele verden, uanset deres placering eller netværksforhold.