import React, { Suspense } from 'react';

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

function App() {
 return (
 Laddar...

I detta exempel:

• React.lazy används för att "late load" MyComponent.
• Suspense omsluter LazyComponent.
• Prop:en fallback tillhandahåller ett "fallback UI" (en laddningsindikator) som visas medan MyComponent laddas.

Implementera Felgränser

Medan Suspense hanterar laddningslägen, är Felgränser React-komponenter som fångar JavaScript-fel var som helst i deras underordnade komponentträd, loggar dessa fel och visar ett "fallback UI" istället för att krascha hela komponentträdet.

Hur Felgränser fungerar

Felgränser är klasskomponenter som definierar följande livscykelsmetoder:

• static getDerivedStateFromError(error): Denna metod anropas efter att ett fel har kastats av en efterföljande komponent. Den tar emot felet som kastades som ett argument och bör returnera ett värde för att uppdatera tillståndet.
• componentDidCatch(error, info): Denna metod anropas efter att ett fel har kastats av en efterföljande komponent. Den tar emot felet och ett info-objekt som innehåller information om vilken komponent som kastade felet. Detta är den ideala platsen att logga felet till en tjänst som Sentry eller Bugsnag.

Viktigt: Felgränser fångar endast fel i komponenterna under dem i trädet. En Felgräns kan inte fånga ett fel inom sig själv.

Exempel: Grundläggande Felgräns-implementation

            
import React, { Component } from 'react';

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

 static getDerivedStateFromError(error) {
 // Uppdatera tillståndet så att nästa rendering visar "fallback UI".
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // Du kan också logga felet till en felrapporteringstjänst
 console.error('Fångat fel: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Du kan rendera valfritt anpassat "fallback UI"
 return 
Något gick fel.
;
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

För att använda Felgränsen, omslut valfri komponent som kan kasta ett fel:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Integrera Suspense och Felgränser

Den verkliga kraften ligger i att kombinera Suspense och Felgränser. Detta låter dig hantera både laddningslägen och fel på ett smidigt sätt inom din applikation. Den rekommenderade metoden är att omsluta Suspense med en Felgräns. På så sätt, om komponenten som "late loadas" misslyckas med att laddas (t.ex. nätverksfel), kan Felgränsen fånga felet och visa ett hjälpsamt meddelande för användaren.

Exempel: Kombinera Suspense och Felgränser

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

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

function App() {
 return (
 
 Laddar...