M
MLOG
React „Lazy Loading“: Našumo Didinimas Dalinant Komponentų Kodą | MLOG | MLOG}> ); } export default App;

Šiame pavyzdyje Home, About ir Contact komponentai yra įkeliami vėliau. Kai vartotojas pereis į konkretų maršrutą, atitinkamas komponentas bus įkeltas asinchroniškai. Suspense komponentas užtikrina, kad įkėlimo indikatorius būtų rodomas, kol komponentas yra gaunamas.

Pažangios Technikos ir Svarstymai

Klaidų Ribos (Error Boundaries)

„Error boundaries“ yra React komponentai, kurie pagauna JavaScript klaidas bet kurioje savo vaikinių komponentų medžio vietoje, registruoja tas klaidas ir rodo atsarginę vartotojo sąsają vietoje sugriuvusio komponentų medžio. Galite juos naudoti, kad sklandžiai apdorotumėte klaidas, kurios gali įvykti įkeliant „lazy-loaded“ komponentus.


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

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

  static getDerivedStateFromError(error) {
    // Atnaujina būseną, kad kitas atvaizdavimas parodytų atsarginę vartotojo sąsają.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Taip pat galite registruoti klaidą klaidų pranešimų tarnyboje
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Galite atvaizduoti bet kokią pasirinktinę atsarginę vartotojo sąsają
      return 
Įvyko klaida.
;
    }

    return this.props.children; 
  }
}

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

function App() {
  return (
    
      Kraunasi...}>
        
      
    
  );
}

export default App;

Šiame pavyzdyje ErrorBoundary komponentas apgaubia Suspense komponentą. Jei įvyktų klaida įkeliant ar atvaizduojant MyComponent, ErrorBoundary pagaus klaidą ir parodys atsarginę vartotojo sąsają.

Geriausios „Lazy Loading“ Praktikos

Pavyzdžiai Įvairiose Pramonės Šakose

React „lazy loading“ ir kodo skaidymo nauda apima įvairias pramonės šakas. Štai keletas pavyzdžių:

Daugiau nei React.lazy ir Suspense

Nors React.lazy ir Suspense suteikia paprastą būdą įgyvendinti „lazy loading“, kitos bibliotekos ir technikos gali pasiūlyti pažangesnių funkcijų ir daugiau kontrolės:

Išvada

React „lazy loading“ su komponentų kodo skaidymu yra galinga technika, skirta optimizuoti jūsų React programų našumą. Įkeldami komponentus pagal pareikalavimą, galite ženkliai sumažinti pradinį įkėlimo laiką, pagerinti vartotojo patirtį ir sumažinti išteklių suvartojimą. Naudodami React.lazy ir Suspense, galite lengvai įdiegti „lazy loading“ savo React projektuose ir kurti greitesnes, jautresnes interneto programas. Nepamirškite atsižvelgti į klaidų valdymą, įkėlimo indikatorius ir kitas pažangias technikas, kad užtikrintumėte sklandžią vartotojo patirtį. Nuolat stebėkite savo programos našumą ir tobulinkite savo kodo skaidymo strategiją, kad pasiektumėte optimalių rezultatų.

Pasinaudokite „lazy loading“ galia ir atverkite potencialą greitesnei, efektyvesnei ir patogesnei interneto programai.