import React, { Suspense } from 'react';

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

function App() {
 return (
 Laadimine...

Selles näites:

• React.lazy on kasutatud MyComponent laadimiseks vajadusel.
• Suspense ümbritseb LazyComponent.
• fallback atribuut pakub tagasiside kasutajaliidest (laadimisindikaatorit), mida kuvatakse MyComponent laadimise ajal.

Veapiiride rakendamine

Kui Suspense tegeleb laadimisolekutega, siis veapiirid on Reacti komponendid, mis püüavad kinni JavaScripti vead nende alamkomponentide puude kõikjal, logivad need vead ja kuvavad tagasiside kasutajaliidese kogu komponentide puu krahhi asemel.

Kuidas veapiirid töötavad

Veapiirid on klassikomponendid, mis määravad järgmised elutsüklimeetodid:

• static getDerivedStateFromError(error): Seda meetodit kutsutakse pärast seda, kui alluv komponent on vea visanud. See saab visatud veana argumendi ja peaks tagastama oleku värskendamiseks väärtuse.
• componentDidCatch(error, info): Seda meetodit kutsutakse pärast seda, kui alluv komponent on vea visanud. See saab veana ja teabeobjektina, mis sisaldab teavet selle kohta, milline komponent vea viskas. See on ideaalne koht vea logimiseks teenusesse nagu Sentry või Bugsnag.

Tähtis: Veapiirid püüavad kinni ainult allpool puus olevaid vigu. Veapiir ei saa kinni püüda omaenda vigu.

Näide: Põhiline veapiiride rakendamine

            
import React, { Component } from 'react';

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

 static getDerivedStateFromError(error) {
 // Oleku värskendamine, et järgmine renderdus kuvaks tagasiside kasutajaliidest.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // Samuti saate logida vea vearuaporteerimisteenusesse
 console.error('Püütud viga: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Saate renderdada mis tahes kohandatud tagasiside kasutajaliidese
 return 
Midagi läks valesti.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Veapiiri kasutamiseks ümbritsege mis tahes komponent, mis võib vea visata:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Suspense'i ja veapiiride integreerimine

Tõeline jõud peitub Suspense'i ja veapiiride kombineerimises. See võimaldab teil oma rakenduses sujuvalt käsitleda nii laadimisolekuid kui ka vigu. Soovitatav tava on ümbritada Suspense veapiiriga. Sel viisil, kui laetav komponent ei suuda laadida (nt võrgu viga), saab veapiir vea kinni püüda ja kasutajale abistava sõnumi kuvada.

Näide:Suspense'i ja veapiiride kombineerimine

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

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

function App() {
 return (
 
 Laadimine...