import React, { Suspense } from 'react';

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

function App() {
 return (
 Loading...

Šiame pavyzdyje:

• React.lazy naudojamas tingiam MyComponent įkėlimui.
• Suspense apgaubia LazyComponent.
• fallback prop suteikia atsarginę vartotojo sąsają (įkėlimo indikatorių), kuri rodoma, kol MyComponent įkeliamas.

Klaidų ribų įgyvendinimas

Nors Suspense tvarko įkėlimo būsenas, Klaidų ribos yra React komponentai, kurie pagauna JavaScript klaidas bet kur jų antrinių komponentų medyje, registruoja tas klaidas ir rodo atsarginę vartotojo sąsają, o ne sugadina visą komponentų medį.

Kaip veikia klaidų ribos

Klaidų ribos yra klasių komponentai, kurie apibrėžia šiuos ciklo metodus:

• static getDerivedStateFromError(error): šis metodas iškviečiamas po to, kai palikuonio komponentas išmeta klaidą. Jis gauna klaidą, kuri buvo išmesta kaip argumentas, ir turėtų grąžinti reikšmę, kad atnaujintų būseną.
• componentDidCatch(error, info): šis metodas iškviečiamas po to, kai palikuonio komponentas išmeta klaidą. Jis gauna klaidą ir informacijos objektą, kuriame yra informacija apie tai, kuris komponentas išmetė klaidą. Tai yra ideali vieta klaidai registruoti tokioje tarnyboje kaip Sentry arba Bugsnag.

Svarbu: klaidų ribos pagauna tik klaidas komponentuose, esančiuose žemiau jų medyje. Klaidų riba negali pagauti klaidos pačiame savyje.

Pavyzdys: pagrindinis klaidų ribos įgyvendinimas

            
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, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Norėdami naudoti klaidų ribą, apvyniokite bet kurį komponentą, kuris gali išmesti klaidą:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Suspense ir klaidų ribų integravimas

Tikroji galia slypi derinant Suspense ir klaidų ribas. Tai leidžia jums tvarkyti tiek įkėlimo būsenas, tiek klaidas jūsų programoje. Rekomenduojama praktika yra apvynioti Suspense su klaidų riba. Tokiu būdu, jei tingiai įkeliamas komponentas nepavyksta įkelti (pvz., tinklo klaida), klaidų riba gali pagauti klaidą ir parodyti vartotojui naudingą pranešimą.

Pavyzdys: Suspense ir klaidų ribų derinimas

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

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

function App() {
 return (
 
 Loading...