React Suspensen mallit: Datan haku ja virherajaukset

React Suspense on tehokas ominaisuus, jonka avulla voit "keskeyttää" komponentin renderöinnin odottaessasi asynkronisten operaatioiden, kuten datan haun, valmistumista. Yhdessä virherajausten (Error Boundaries) kanssa se tarjoaa vankan mekanismin lataustilojen ja virheiden käsittelyyn, mikä johtaa sulavampaan ja kestävämpään käyttäjäkokemukseen. Tässä artikkelissa tutkitaan erilaisia malleja Suspensen ja virherajausten tehokkaaseen hyödyntämiseen React-sovelluksissasi.

React Suspensen ymmärtäminen

Ytimeltään Suspense on mekanismi, joka antaa Reactin odottaa jotain ennen komponentin renderöintiä. Tämä "jokin" on tyypillisesti asynkroninen operaatio, kuten datan haku API:sta. Sen sijaan, että näyttäisit tyhjän ruudun tai mahdollisesti harhaanjohtavan välitilan, voit näyttää varakäyttöliittymän (esim. latausanimaation) datan latautuessa.

Keskeinen hyöty on parantunut havaittu suorituskyky ja miellyttävämpi käyttäjäkokemus. Käyttäjille esitetään välittömästi visuaalista palautetta, joka osoittaa, että jotain tapahtuu, sen sijaan että he miettisivät, onko sovellus jäätynyt.

Avainkäsitteet

• Suspense-komponentti: <Suspense>-komponentti käärii komponentit, jotka saattavat keskeytyä. Se hyväksyy fallback-ominaisuuden, joka määrittelee käyttöliittymän, joka renderöidään kääittyjen komponenttien ollessa keskeytettyinä.
• Varakäyttöliittymä: Tämä on käyttöliittymä, joka näytetään asynkronisen operaation ollessa käynnissä. Se voi olla mitä tahansa yksinkertaisesta latausanimaatiosta monimutkaisempaan animaatioon.
• Promise-integraatio: Suspense toimii Promisejen kanssa. Kun komponentti yrittää lukea arvoa Promisesta, joka ei ole vielä ratkennut, React keskeyttää komponentin ja näyttää varakäyttöliittymän.
• Tietolähteet: Suspense tukeutuu tietolähteisiin, jotka ovat Suspense-tietoisia. Nämä lähteet tarjoavat API:n, jonka avulla React voi havaita, kun dataa haetaan.

Datan haku Suspensen avulla

Jotta voit käyttää Suspensea datan hakuun, tarvitset Suspense-tietoisen datanhakukirjaston. Tässä on yleinen lähestymistapa käyttämällä mukautettua fetchData-funktiota:

Esimerkki: Yksinkertainen datan haku

Luo ensin apufunktio datan hakemiseen. Tämän funktion on käsiteltävä 'keskeyttävä' näkökulma. Kääritään fetch-kutsumme mukautettuun resurssiin käsitelläksemme promisen tilan oikein.

            // utils/api.js
const wrapPromise = (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;
    },
  };
};

const fetchData = (url) => {
  const promise = fetch(url)
    .then((res) => res.json())
    .then((data) => data);
  return wrapPromise(promise);
};

export default fetchData;
            

              
                Copy
              
            
          

Luodaan nyt komponentti, joka käyttää Suspensea käyttäjätietojen näyttämiseen:

            // components/UserProfile.js
import React from 'react';
import fetchData from '../utils/api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

Lopuksi kääri UserProfile-komponentti <Suspense>-komponentilla:

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

function App() {
  return (
    <Suspense fallback={<p>Ladataan käyttäjätietoja...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä UserProfile-komponentti yrittää lukea user-dataa resource-oliosta. Jos data ei ole vielä saatavilla (Promise on edelleen odottavassa tilassa), komponentti keskeytyy ja varakäyttöliittymä ("Ladataan käyttäjätietoja...") näytetään. Kun data on haettu, komponentti renderöidään uudelleen todellisilla käyttäjätiedoilla.

Tämän lähestymistavan edut

• Deklaratiivinen datan haku: Komponentti ilmaisee *mitä* dataa se tarvitsee, ei *miten* se haetaan.
• Keskitetty lataustilan hallinta: Suspense-komponentti hoitaa lataustilan, mikä yksinkertaistaa komponentin logiikkaa.

Virherajaukset kestävyyttä varten

Vaikka Suspense käsittelee lataustilat sulavasti, se ei itsessään käsittele virheitä, jotka voivat tapahtua datan haun tai komponentin renderöinnin aikana. Tässä kohtaa virherajaukset (Error Boundaries) astuvat kuvaan.

Virherajaukset ovat React-komponentteja, jotka nappaavat JavaScript-virheet missä tahansa niiden lapsikomponenttipuussa, kirjaavat ne virheet ja näyttävät varakäyttöliittymän koko sovelluksen kaatumisen sijaan. Ne ovat kriittisiä kestävien käyttöliittymien rakentamisessa, jotka voivat sulavasti käsitellä odottamattomia virheitä.

Virherajauksen luominen

Luodaksesi virherajauksen, sinun on määriteltävä luokkakomponentti, joka toteuttaa static getDerivedStateFromError() ja componentDidCatch() elinkaarimetodit.

            // components/ErrorBoundary.js
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

  static getDerivedStateFromError(error) {
    // Päivitä tila, jotta seuraava renderöinti näyttää varakäyttöliittymän.
    return {
       hasError: true,
       error: error
     };
  }

  componentDidCatch(error, errorInfo) {
    // Voit myös kirjata virheen virheraportointipalveluun
    console.error("Caught error: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Voit renderöidä minkä tahansa mukautetun varakäyttöliittymän
      return (
        <div>
          <h2>Jotain meni pieleen.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

getDerivedStateFromError-metodia kutsutaan, kun alikomponentissa tapahtuu virhe. Se päivittää tilan osoittamaan, että virhe on tapahtunut.

componentDidCatch-metodia kutsutaan virheen tapahtumisen jälkeen. Se vastaanottaa virheen ja virhetiedot, joita voit käyttää virheen kirjaamiseen virheraportointipalveluun tai informatiivisemman virheilmoituksen näyttämiseen.

Virherajausten käyttö Suspensen kanssa

Yhdistääksesi virherajaukset Suspenseen, kääri yksinkertaisesti <Suspense>-komponentti <ErrorBoundary>-komponentilla:

            // App.js
import React, { Suspense } from 'react';
import UserProfile from './components/UserProfile';
import ErrorBoundary from './components/ErrorBoundary';

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Ladataan käyttäjätietoja...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Nyt, jos datan haun tai UserProfile-komponentin renderöinnin aikana tapahtuu virhe, virherajaus nappaa virheen ja näyttää varakäyttöliittymän, estäen koko sovelluksen kaatumisen.

Edistyneet Suspense-mallit

Perusdatan haun ja virheidenkäsittelyn lisäksi Suspense tarjoaa useita edistyneitä malleja monimutkaisempien käyttöliittymien rakentamiseen.

Koodin jakaminen (Code Splitting) Suspensen avulla

Koodin jakaminen on prosessi, jossa sovelluksesi jaetaan pienempiin osiin, jotka voidaan ladata tarvittaessa. Tämä voi merkittävästi parantaa sovelluksesi alkulatausaikaa.

React.lazy ja Suspense tekevät koodin jakamisesta uskomattoman helppoa. Voit käyttää React.lazy-funktiota komponenttien dynaamiseen tuomiseen ja sitten kääriä ne <Suspense>-komponentilla näyttääksesi varakäyttöliittymän komponenttien latautuessa.

            // components/MyComponent.js
import React from 'react';

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

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

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä MyComponent ladataan tarvittaessa. Sen latautuessa näytetään varakäyttöliittymä ("Ladataan komponenttia..."). Kun komponentti on ladattu, se renderöidään normaalisti.

Rinnakkainen datan haku

Suspensen avulla voit hakea useita tietolähteitä rinnakkain ja näyttää yhden varakäyttöliittymän kaiken datan latautuessa. Tämä voi olla hyödyllistä, kun sinun on haettava dataa useista API:eista yhden komponentin renderöimiseksi.

            import React, { Suspense } from 'react';
import fetchData from './api';

const userResource = fetchData('https://jsonplaceholder.typicode.com/users/1');
const postsResource = fetchData('https://jsonplaceholder.typicode.com/posts?userId=1');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Julkaisut:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Ladataan käyttäjätietoja ja julkaisuja...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä UserProfile-komponentti hakee sekä käyttäjätiedot että julkaisutiedot rinnakkain. <Suspense>-komponentti näyttää yhden varakäyttöliittymän, kun molempia tietolähteitä ladataan.

Transition API ja useTransition

React 18 esitteli useTransition-hookin, joka parantaa Suspensea tarjoamalla tavan hallita käyttöliittymäpäivityksiä siirtyminä (transitions). Tämä tarkoittaa, että voit merkitä tietyt tilapäivitykset vähemmän kiireellisiksi ja estää niitä jumittamasta käyttöliittymää. Tämä on erityisen hyödyllistä hitaamman datan haun tai monimutkaisten renderöintioperaatioiden yhteydessä, parantaen havaittua suorituskykyä.

Näin voit käyttää useTransition-hookia:

            import React, { useState, Suspense, useTransition } from 'react';
import fetchData from './api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

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

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

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        Näytä käyttäjäprofiili
      </button>
      {isPending && <p>Ladataan...</p>}
      <Suspense fallback={<p>Ladataan käyttäjätietoja...</p>}>
        {showProfile && <UserProfile />}
      </Suspense>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä "Näytä käyttäjäprofiili" -napin painaminen aloittaa siirtymän. startTransition merkitsee setShowProfile-päivityksen siirtymäksi, mikä antaa Reactille mahdollisuuden priorisoida muita käyttöliittymäpäivityksiä. useTransition-hookin palauttama isPending-arvo osoittaa, onko siirtymä käynnissä, mikä antaa sinun tarjota visuaalista palautetta (esim. napin poistaminen käytöstä ja latausviestin näyttäminen).

Parhaat käytännöt Suspensen ja virherajausten käyttöön

• Kääri Suspense mahdollisimman pienen alueen ympärille: Vältä suurten osien kääärimistä sovelluksestasi <Suspense>-komponentilla. Kääri sen sijaan vain ne komponentit, joiden todella täytyy keskeytyä. Tämä minimoi vaikutuksen muuhun käyttöliittymään.
• Käytä merkityksellisiä varakäyttöliittymiä: Varakäyttöliittymän tulisi antaa käyttäjille selkeää ja informatiivista palautetta siitä, mitä tapahtuu. Vältä yleisiä latausanimaatioita; yritä sen sijaan tarjota enemmän kontekstia (esim. "Ladataan käyttäjätietoja...").
• Sijoita virherajaukset strategisesti: Mieti huolellisesti, mihin sijoitat virherajaukset. Sijoita ne riittävän ylös komponenttipuussa napataksesi virheet, jotka voivat vaikuttaa useisiin komponentteihin, mutta riittävän alas välttääksesi yksittäiseen komponenttiin liittyvien virheiden nappaamisen.
• Kirjaa virheet: Käytä componentDidCatch-metodia virheiden kirjaamiseen virheraportointipalveluun. Tämä auttaa sinua tunnistamaan ja korjaamaan virheitä sovelluksessasi.
• Tarjoa käyttäjäystävällisiä virheilmoituksia: Virherajausten näyttämän varakäyttöliittymän tulisi antaa käyttäjille hyödyllistä tietoa virheestä ja siitä, mitä he voivat tehdä asialle. Vältä teknistä jargonia; käytä sen sijaan selkeää ja ytimekästä kieltä.
• Testaa virherajauksesi: Varmista, että virherajauksesi toimivat oikein aiheuttamalla tarkoituksellisesti virheitä sovelluksessasi.

Kansainväliset näkökohdat

Kun käytät Suspensea ja virherajauksia kansainvälisissä sovelluksissa, ota huomioon seuraavat seikat:

• Lokalisointi: Varmista, että varakäyttöliittymät ja virheilmoitukset on lokalisoitu oikein jokaiselle sovelluksesi tukemalle kielelle. Käytä kansainvälistämis (i18n) -kirjastoja, kuten react-intl tai i18next, käännösten hallintaan.
• Oikealta vasemmalle (RTL) -asettelut: Jos sovelluksesi tukee RTL-kieliä (esim. arabia, heprea), varmista, että varakäyttöliittymät ja virheilmoitukset näytetään oikein RTL-asetteluissa. Käytä CSS:n loogisia ominaisuuksia (esim. margin-inline-start margin-left:n sijaan) tukeaksesi sekä LTR- että RTL-asetteluja.
• Saavutettavuus: Varmista, että varakäyttöliittymät ja virheilmoitukset ovat saavutettavia vammaisille käyttäjille. Käytä ARIA-attribuutteja antamaan semanttista tietoa lataustilasta ja virheilmoituksista.
• Kulttuurinen herkkyys: Ole tietoinen kulttuurieroista suunnitellessasi varakäyttöliittymiä ja virheilmoituksia. Vältä kuvien tai kielen käyttöä, jotka saattavat olla loukkaavia tai sopimattomia tietyissä kulttuureissa. Esimerkiksi yleinen latausanimaatio saatetaan kokea negatiivisesti joissakin kulttuureissa.

Esimerkki: Lokalisoitu virheilmoitus

Käyttämällä react-intl-kirjastoa voit luoda lokalisoituja virheilmoituksia:

            // components/ErrorBoundary.js
import React from 'react';
import { FormattedMessage } from 'react-intl';

class ErrorBoundary extends React.Component {
  // ... (sama kuin aiemmin)

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2><FormattedMessage id="error.title" defaultMessage="Jotain meni pieleen." /></h2>
          <p><FormattedMessage id="error.message" defaultMessage="Yritä myöhemmin uudelleen." /></p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

Määrittele sitten käännökset kielitiedostoissasi:

            // locales/en.json
{
  "error.title": "Something went wrong.",
  "error.message": "Please try again later."
}

// locales/fi.json
{
  "error.title": "Jotain meni pieleen.",
  "error.message": "Yritä myöhemmin uudelleen."
}

            

              
                Copy
              
            
          

Johtopäätös

React Suspense ja virherajaukset ovat olennaisia työkaluja modernien, kestävien ja käyttäjäystävällisten käyttöliittymien rakentamisessa. Ymmärtämällä ja soveltamalla tässä artikkelissa kuvattuja malleja voit merkittävästi parantaa React-sovellustesi havaittua suorituskykyä ja yleistä laatua. Muista ottaa huomioon kansainvälistäminen ja saavutettavuus varmistaaksesi, että sovelluksesi ovat maailmanlaajuisen yleisön käytettävissä.

Asynkroninen datan haku ja asianmukainen virheidenkäsittely ovat kriittisiä näkökohtia missä tahansa verkkosovelluksessa. Suspense yhdistettynä virherajauksiin tarjoaa deklaratiivisen ja tehokkaan tavan hallita näitä monimutkaisuuksia Reactissa, mikä johtaa sulavampaan ja luotettavampaan käyttäjäkokemukseen käyttäjille ympäri maailmaa.