React Suspense’i Mustrid: Andmete Töötlemine ja Veapiirid

React Suspense on võimas funktsioon, mis võimaldab teil komponentide renderdamise "peatada", oodates asünkroonsete toimingute, näiteks andmete töötlemise lõpuleviimist. Koos veapiiridega pakub see tugevat mehhanismi laadimise olekute ja vigade käsitlemiseks, mille tulemuseks on sujuvam ja vastupidavam kasutajakogemus. See artikkel uurib erinevaid mustreid Suspense’i ja veapiiride tõhusaks kasutamiseks teie Reacti rakendustes.

React Suspense’i Mõistmine

Põhimõtteliselt on Suspense mehhanism, mis võimaldab Reactil enne komponendi renderdamist midagi oodata. See "miski" on tavaliselt asünkroonne toiming, näiteks andmete toomine API-st. Selle asemel, et kuvada tühi ekraan või potentsiaalselt eksitav vaheolek, saate andmete laadimise ajal kuvada varu-UI (nt laadimise spinner).

Peamine eelis on parem tajutav jõudlus ja meeldivam kasutajakogemus. Kasutajatele esitatakse kohe visuaalne tagasiside, mis näitab, et midagi toimub, selle asemel, et imestada, kas rakendus on külmunud.

Põhimõisted

• Suspense’i Komponent: <Suspense> komponent ümbritseb komponente, mis võivad peatuda. See aktsepteerib fallback propert, mis määrab UI, mida renderdada, kui ümbritsetud komponendid on peatatud.
• Varu-UI: See on UI, mida kuvatakse asünkroonse toimingu ajal. See võib olla kõike alates lihtsast laadimise spinnerist kuni keerukama animatsioonini.
• Promise’i Integreerimine: Suspense töötab Promise’idega. Kui komponent üritab lugeda väärtust Promise’ist, mida pole veel lahendatud, peatab React komponendi ja kuvab varu-UI.
• Andmeallikad: Suspense tugineb andmeallikatele, mis on Suspense’i-teadlikud. Need allikad avaldavad API, mis võimaldab Reactil tuvastada, millal andmeid töödeldakse.

Andmete Töötlemine Suspense’iga

Suspense’i andmete töötlemiseks kasutamiseks vajate Suspense’i-teadlikku andmete töötlemise teeki. Siin on levinud lähenemisviis kohandatud funktsiooni `fetchData` abil:

Näide: Lihtne Andmete Töötlemine

Esmalt looge utiliitfunktsioon andmete töötlemiseks. See funktsioon peab käsitlema "peatamise" aspekti. Me ümbritseme oma fetch-kõned kohandatud ressursiga, et Promise’i olekut õigesti käsitleda.

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

Nüüd loome komponendi, mis kasutab Suspense’i kasutajaandmete kuvamiseks:

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

Lõpuks ümbritsege komponent UserProfile komponendiga <Suspense>:

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

function App() {
  return (
    <Suspense fallback={<p>Laadin kasutaja andmeid...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites üritab komponent UserProfile lugeda user andmeid resource’ist. Kui andmed pole veel saadaval (Promise on endiselt ootel), peatab komponent ja kuvatakse varu-UI ("Laadin kasutaja andmeid..."). Kui andmed on töödeldud, renderdatakse komponent uuesti tegeliku kasutajateabega.

Selle lähenemisviisi eelised

• Deklaratiivne andmete töötlemine: komponent väljendab, *milliseid* andmeid ta vajab, mitte *kuidas* neid töödelda.
• Tsentraliseeritud laadimise oleku haldamine: Suspense’i komponent haldab laadimise olekut, lihtsustades komponendi loogikat.

Veapiirid Vastupidavuse Tagamiseks

Kuigi Suspense käsitleb laadimise olekuid graatsiliselt, ei käsitle see olemuselt vigu, mis võivad andmete töötlemise või komponentide renderdamise ajal tekkida. Siin tulevad mängu veapiirid.

Veapiirid on Reacti komponendid, mis püüavad kinni JavaScripti vead kõikjal oma alamkomponentide puus, logivad need vead ja kuvavad kogu rakenduse krahhi asemel varu-UI. Need on kriitilise tähtsusega vastupidavate kasutajaliideste loomiseks, mis suudavad ootamatuid vigu graatsiliselt käsitleda.

Veapiiri Loomine

Veapiiri loomiseks peate määratlema klassikomponendi, mis rakendab elutsükli meetodeid static getDerivedStateFromError() ja componentDidCatch().

            // 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) {
    // Uuenda olekut, et järgmine renderdamine näitaks varu-UI.
    return {
       hasError: true,
       error: error
     };
  }

  componentDidCatch(error, errorInfo) {
    // Saate vea ka veateatamisteenusesse logida
    console.error("Kinni püütud viga: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Saate renderdada mis tahes kohandatud varu-UI
      return (
        <div>
          <h2>Midagi läks valesti.</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
              
            
          

Meetodit getDerivedStateFromError kutsutakse, kui järglaskomponendis visatakse viga. See uuendab olekut, et näidata, et on tekkinud viga.

Meetodit componentDidCatch kutsutakse pärast vea viskamist. See võtab vastu vea ja veateabe, mida saate kasutada vea logimiseks veateatamisteenusesse või informatiivsema veateate kuvamiseks.

Veapiiride Kasutamine Suspense’iga

Veapiiride ja Suspense’i kombineerimiseks ümbritsege lihtsalt komponent <Suspense> komponendiga <ErrorBoundary>:

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

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Laadin kasutaja andmeid...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Nüüd, kui andmete töötlemise või komponendi UserProfile renderdamise ajal tekib viga, püüab veapiir vea kinni ja kuvab varu-UI, hoides ära kogu rakenduse krahhi.

Täiustatud Suspense’i Mustrid

Lisaks põhiliselt andmete töötlemisele ja veakäsitlusele pakub Suspense mitmeid täiustatud mustreid keerukamate kasutajaliideste loomiseks.

Koodi Tükeldamine Suspense’iga

Koodi tükeldamine on protsess, mille käigus jagatakse teie rakendus väiksemateks tükkideks, mida saab nõudmisel laadida. See võib oluliselt parandada teie rakenduse esmast laadimisaega.

React.lazy ja Suspense muudavad koodi tükeldamise uskumatult lihtsaks. Komponentide dünaamiliseks importimiseks saate kasutada React.lazy ja seejärel ümbritseda need komponendiga <Suspense>, et kuvada varu-UI komponentide laadimise ajal.

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

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

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

export default App;
            

              
                Copy
              
            
          

Selles näites laaditakse komponent MyComponent nõudmisel. Selle laadimise ajal kuvatakse varu-UI ("Laadin komponenti..."). Kui komponent on laaditud, renderdatakse see tavapäraselt.

Paralleelne Andmete Töötlemine

Suspense võimaldab teil töödelda mitut andmeallikat paralleelselt ja kuvada ühte varu-UI, kui kõiki andmeid laaditakse. See võib olla kasulik, kui peate ühe komponendi renderdamiseks töödelda andmeid mitmest API-st.

            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>Postitused:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Laadin kasutaja andmeid ja postitusi...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites töötleb komponent UserProfile paralleelselt nii kasutaja andmeid kui ka postituste andmeid. Komponent <Suspense> kuvab ühte varu-UI, kui mõlemat andmeallikat laaditakse.

Ülemineku API koos useTransition’iga

React 18 tutvustas konksu useTransition, mis täiustab Suspense’i, pakkudes võimalust hallata kasutajaliidese värskendusi üleminekutena. See tähendab, et saate märkida teatud oleku värskendused vähem kiireloomulisteks ja takistada neil kasutajaliidest blokeerimast. See on eriti kasulik aeglasema andmete töötlemise või keerukate renderdamistoimingutega tegelemisel, parandades tajutavat jõudlust.

Siin on, kuidas saate kasutada useTransition’i:

            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äita Kasutaja Profiili
      </button>
      {isPending && <p>Laadin...</p>}
      <Suspense fallback={<p>Laadin kasutaja andmeid...</p>}>
        {showProfile && <UserProfile />}
      </Suspense>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

Selles näites käivitab nupu „Näita Kasutaja Profiili“ klõpsamine ülemineku. startTransition märgib setShowProfile värskenduse üleminekuks, võimaldades Reactil prioriseerida muid kasutajaliidese värskendusi. Väärtus isPending, mis pärineb useTransition’ist, näitab, kas üleminek on pooleli, võimaldades teil pakkuda visuaalset tagasisidet (nt nupu keelamine ja laadimisteate kuvamine).

Parimad Praktikad Suspense’i ja Veapiiride Kasutamiseks

• Ümbristage Suspense võimalikult väikese ala ümber: Vältige suurte rakenduse osade ümbritsemist komponendiga <Suspense>. Selle asemel ümbristage ainult komponendid, mis tegelikult peavad peatuma. See minimeerib mõju ülejäänud kasutajaliidesele.
• Kasutage tähendusrikkaid varu-kasutajaliideseid: Varu-kasutajaliides peaks andma kasutajatele selget ja informatiivset tagasisidet toimuva kohta. Vältige üldisi laadimise spinnereid; selle asemel proovige pakkuda rohkem konteksti (nt "Laadin kasutaja andmeid...").
• Asetage veapiirid strateegiliselt: Mõelge hoolikalt läbi, kuhu veapiirid paigutada. Paigutage need komponentide puus piisavalt kõrgele, et püüda kinni vead, mis võivad mõjutada mitut komponenti, kuid piisavalt madalale, et vältida selliste vigade püüdmist, mis on omane ühele komponendile.
• Logige vead: Kasutage meetodit componentDidCatch, et logida vead veateatamisteenusesse. See aitab teil rakenduses vigu tuvastada ja parandada.
• Pakkuge kasutajasõbralikke veateateid: Varu-kasutajaliides, mida veapiirid kuvavad, peaks andma kasutajatele kasulikku teavet vea ja selle kohta, mida nad saavad sellega teha. Vältige tehnilist žargooni; selle asemel kasutage selget ja lühikest keelt.
• Testige oma veapiire: Veenduge, et teie veapiirid töötavad õigesti, visates oma rakenduses tahtlikult vigu.

Rahvusvahelised Kaalutlused

Suspense’i ja veapiiride kasutamisel rahvusvahelistes rakendustes arvestage järgmisega:

• Lokaliseerimine: Veenduge, et varu-kasutajaliidesed ja veateated on korralikult lokaliseeritud iga teie rakenduse toetatud keele jaoks. Kasutage tõlgete haldamiseks rahvusvahelistamise (i18n) teeke, nagu react-intl või i18next.
• Paremalt vasakule (RTL) paigutused: Kui teie rakendus toetab RTL-keeli (nt araabia, heebrea), veenduge, et varu-kasutajaliidesed ja veateated kuvatakse korralikult RTL-paigutustes. Kasutage nii LTR- kui ka RTL-paigutuste toetamiseks CSS-i loogilisi omadusi (nt margin-inline-start asemel margin-left).
• Juurdepääsetavus: Veenduge, et varu-kasutajaliidesed ja veateated on juurdepääsetavad puuetega kasutajatele. Kasutage ARIA atribuute, et anda semantilist teavet laadimise oleku ja veateadete kohta.
• Kultuuriline tundlikkus: Olge varu-kasutajaliideste ja veateadete kujundamisel kultuuriliste erinevuste suhtes tähelepanelik. Vältige piltide või keele kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud. Näiteks võidakse tavalist laadimise spinnerit mõnes kultuuris negatiivselt tajuda.

Näide: Lokaliseeritud Veateade

Kasutades react-intl, saate luua lokaliseeritud veateateid:

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

class ErrorBoundary extends React.Component {
  // ... (sama mis enne)

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2><FormattedMessage id="error.title" defaultMessage="Midagi läks valesti." /></h2>
          <p><FormattedMessage id="error.message" defaultMessage="Proovige hiljem uuesti." /></p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

Seejärel määratlege tõlked oma lokaalifailides:

            // locales/en.json
{
  "error.title": "Midagi läks valesti.",
  "error.message": "Proovige hiljem uuesti."
}

// locales/fr.json
{
  "error.title": "Quelque chose s'est mal passé.",
  "error.message": "Veuillez réessayer plus tard."
}

            

              
                Copy
              
            
          

Järeldus

React Suspense ja veapiirid on olulised tööriistad kaasaegsete, vastupidavate ja kasutajasõbralike kasutajaliideste loomiseks. Mõistes ja rakendades selles artiklis kirjeldatud mustreid, saate oluliselt parandada oma Reacti rakenduste tajutavat jõudlust ja üldist kvaliteeti. Ärge unustage arvestada rahvusvahelistamise ja juurdepääsetavusega, et tagada oma rakenduste kasutatavus ülemaailmsele publikule.

Asünkroonne andmete töötlemine ja õige veakäsitlus on iga veebirakenduse kriitilised aspektid. Suspense koos veapiiridega pakub deklaratiivset ja tõhusat viisi nende keerukuste haldamiseks Reactis, mille tulemuseks on sujuvam ja usaldusväärsem kasutajakogemus kasutajatele kogu maailmas.