Principala problemă legată de încărcarea leneră a React Router este că poate cauza probleme de performanță dacă nu este implementată corect. Încărcarea lenevă poate crește timpul inițial de încărcare a paginii, deoarece codul pentru fiecare componentă trebuie încărcat separat. În plus, dacă o componentă nu este utilizată des, este posibil să nu fie încărcată deloc, rezultând resurse irosite. În cele din urmă, există potențiale probleme de compatibilitate cu browserele mai vechi care nu acceptă încărcare leneră.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router> ); } export default App;
1. import React, { Suspans } din „react”;
// Această linie importă biblioteca React și componenta Suspense din biblioteca React.
2. import { BrowserRouter as Router, Route, Switch } din 'react-router-dom';
// Această linie importă componentele BrowserRouter, Route și Switch din biblioteca react-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Această linie creează o constantă numită Home care utilizează caracteristica de încărcare leneșă a React pentru a importa dinamic o componentă numită Home dintr-un fișier din același director cu acest fișier (componenta App).
4. const Despre = React.lazy(() => import('./Despre'));
// Această linie creează o constantă numită Despre care utilizează încărcare leneră pentru a importa dinamic o componentă numită Despre dintr-un fișier din același director cu acest fișier (componenta App).
const Contact = React.lazy(() => import('./Contact')); // Această linie creează o constantă numită Contact care utilizează încărcare leneră pentru a importa dinamic o componentă numită Contact dintr-un fișier din același director cu acest fișier (componenta App).
5. function App() { return ( // Aceasta este o funcție săgeată care returnează codul JSX împachetat în eticheta Router care este importată mai devreme
6.Se incarca…
}> //Această etichetă de suspensie înglobează toate rutele noastre cu elemente de rezervă de încărcare... dacă vreo rută are nevoie de timp pentru a se încărca
7. //Eticheta de comutare se va asigura că este redată o singură rută deodată
8. //Această rută va reda Componenta de pornire atunci când se potrivește calea exactă „/”.
9. //Acest traseu va reda despre componenta când calea „/about” este potrivită
10. //Acest traseu va reda Componenta de contact atunci când calea „/contact” este potrivită ) } exportă aplicația implicită; //În sfârșit, închidem toate etichetele și ne exportăm aplicația
Problemă de încărcare leneșă
Lazy loading este o tehnică folosită pentru a întârzia încărcarea anumitor componente până când sunt necesare. Acest lucru poate ajuta la îmbunătățirea performanței unei aplicații prin încărcarea doar a ceea ce este necesar la un moment dat. Cu toate acestea, aceasta poate fi o problemă atunci când utilizați React Router, deoarece nu acceptă încărcare leneșă din cutie. Pentru a rezolva această problemă, dezvoltatorii trebuie să își configureze manual rutele pentru a activa încărcarea leneră. Acest lucru poate implica configurarea importurilor dinamice și împărțirea codului, care pot fi sarcini complexe și consumatoare de timp. În plus, unele biblioteci, cum ar fi React Loadable, ar putea fi necesare pentru a implementa în mod corespunzător încărcarea leneră cu React Router.
Ce este React lazy load
React lazy load este o caracteristică a React Router care permite încărcarea componentelor la cerere. Aceasta înseamnă că, în loc să încărcați toate componentele simultan, numai componentele necesare sunt încărcate atunci când este necesar. Acest lucru ajută la reducerea timpului inițial de încărcare a paginii și la îmbunătățirea performanței. De asemenea, permite o mai bună organizare a codului și separarea preocupărilor, deoarece fiecare componentă poate fi încărcată independent.
Cum folosesc React lazy pe routerul meu
React lazy este o caracteristică a React care vă permite să importați dinamic componente. Aceasta înseamnă că, în loc să încărcați toate componentele în avans, le puteți încărca după cum este necesar. Acest lucru poate fi util pentru optimizarea performanței în aplicații mari.
Pentru a utiliza React lazy pe routerul dvs. în React Router, trebuie să includeți componenta pe care doriți să o încărcați leneș într-un apel de import dinamic. De exemplu:
const MyComponent = React.lazy(() => import('./MyComponent'));
Apoi, când definiți rutele, treceți pur și simplu componenta MyComponent în componenta Route astfel:
Acest lucru va face ca React Router să încarce dinamic componenta MyComponent atunci când navigați către acea rută.
