M
MLOG
React Lazy Loading: Teljesítménynövelés a komponensek kódfelosztásával | MLOG | MLOG}> ); } export default App;

Ebben a példában a Home, About és Contact komponensek lustán vannak betöltve. Amikor a felhasználó egy adott útvonalra navigál, a megfelelő komponens aszinkron módon töltődik be. A Suspense komponens biztosítja, hogy a komponens lekérése közben egy betöltésjelző jelenjen meg.

Haladó technikák és megfontolások

Error Boundaries (Hibahatárok)

Az Error Boundary-k olyan React komponensek, amelyek elkapják a JavaScript hibákat bárhol a gyermekkomponens-fájukban, naplózzák ezeket a hibákat, és egy tartalék UI-t jelenítenek meg az összeomlott komponensfa helyett. Használhatja őket a lustán betöltött komponensek betöltése során esetlegesen fellépő hibák elegáns kezelésére.


import React, { lazy, Suspense } from 'react';

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

  static getDerivedStateFromError(error) {
    // Frissítse az állapotot, hogy a következő renderelés a tartalék UI-t mutassa.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // A hibát naplózhatja egy hibajelentő szolgáltatásba is
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Bármilyen egyéni tartalék UI-t renderelhet
      return 
Valami hiba történt.
;
    }

    return this.props.children; 
  }
}

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

function App() {
  return (
    
      Betöltés...}>
        
      
    
  );
}

export default App;

Ebben a példában az ErrorBoundary komponens körbeveszi a Suspense komponenst. Ha hiba történik a MyComponent betöltése vagy renderelése során, az ErrorBoundary elkapja a hibát és megjeleníti a tartalék UI-t.

Bevált gyakorlatok a Lazy Loadinghoz

Példák iparágak szerint

A React lazy loading és a kódfelosztás előnyei számos iparágban érvényesülnek. Íme néhány példa:

A React.lazy-n Ă©s a Suspense-en tĂşl

Bár a React.lazy és a Suspense egyszerű módot kínál a lazy loading implementálására, más könyvtárak és technikák fejlettebb funkciókat és vezérlést nyújthatnak:

KonklĂşziĂł

A React lazy loading a komponensek kódfelosztásával egy hatékony technika a React alkalmazások teljesítményének optimalizálására. A komponensek igény szerinti betöltésével jelentősen csökkentheti a kezdeti betöltési időket, javíthatja a felhasználói élményt és csökkentheti az erőforrás-felhasználást. A React.lazy és a Suspense kihasználásával könnyedén implementálhatja a lazy loadingot a React projektjeiben, és gyorsabb, reszponzívabb webalkalmazásokat hozhat létre. Ne felejtse el figyelembe venni a hibakezelést, a betöltésjelzőket és más haladó technikákat a zökkenőmentes felhasználói élmény biztosítása érdekében. Folyamatosan figyelje alkalmazása teljesítményét, és finomítsa kódfelosztási stratégiáját az optimális eredmények elérése érdekében.

Használja ki a lazy loading erejét, és aknázza ki a lehetőséget egy gyorsabb, hatékonyabb és felhasználóbarátabb webalkalmazás létrehozására.