El principal problema relacionat amb la càrrega mandrosa de React Router és que pot causar problemes de rendiment si no s'implementa correctament. La càrrega mandrosa pot augmentar el temps de càrrega inicial de la pàgina, ja que el codi de cada component s'ha de carregar per separat. A més, si un component no s'utilitza sovint, és possible que no es carregui mai, la qual cosa comporta un malbaratament de recursos. Finalment, hi ha possibles problemes de compatibilitat amb navegadors antics que no admeten la càrrega mandrosa.
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. importar React, { Suspens } de "reaccionar";
// Aquesta línia importa la biblioteca React i el component Suspense de la biblioteca React.
2. importa { BrowserRouter com a router, ruta, commutador } des de 'react-router-dom';
// Aquesta línia importa els components BrowserRouter, Route i Switch de la biblioteca react-router-dom.
3. const Inici = React.lazy(() => import('./Home'));
// Aquesta línia crea una constant anomenada Home que utilitza la funció de càrrega mandrosa de React per importar dinàmicament un component anomenat Home des d'un fitxer del mateix directori que aquest fitxer (el component App).
4. const Quant a = React.lazy(() => import('./About'));
// Aquesta línia crea una constant anomenada About que utilitza la càrrega mandrosa per importar dinàmicament un component anomenat About d'un fitxer del mateix directori que aquest fitxer (el component App).
const Contacte = React.lazy(() => import('./Contact')); // Aquesta línia crea una constant anomenada Contacte que utilitza la càrrega mandrosa per importar dinàmicament un component anomenat Contacte d'un fitxer del mateix directori que aquest fitxer (el component de l'aplicació).
5. function App() { return ( // Aquesta és una funció de fletxa que retorna el codi JSX embolicat a l'etiqueta del router que s'ha importat abans
6.Carregant ...
}> //Aquesta etiqueta de suspens embolica totes les nostres rutes amb elements secundaris de càrrega de càrrega... si alguna ruta triga temps a carregar-se
7. //Canvia l'etiqueta s'assegurarà que només es mostri una ruta alhora
8. //Aquesta ruta representarà el component d'inici quan coincideixi amb el camí exacte "/".
9. //Aquesta ruta representarà el component About quan coincideixi amb el camí "/about".
10. //Aquesta ruta representarà el component de contacte quan el camí "/contact" coincideixi ) } exporta l'aplicació predeterminada; //Finalment tanquem totes les etiquetes i exportem la nostra aplicació
Problema de càrrega mandrosa
La càrrega mandrosa és una tècnica que s'utilitza per retardar la càrrega de determinats components fins que es necessiten. Això pot ajudar a millorar el rendiment d'una aplicació carregant només el que és necessari en un moment donat. Tanmateix, això pot ser un problema quan utilitzeu React Router, ja que no admet la càrrega mandrosa fora de la caixa. Per solucionar aquest problema, els desenvolupadors han de configurar manualment les seves rutes per habilitar la càrrega mandrosa. Això pot implicar configurar importacions dinàmiques i dividir el codi, que poden ser tasques complexes i que requereixen temps. A més, pot ser que s'hagin d'utilitzar algunes biblioteques com React Loadable per implementar correctament la càrrega mandrosa amb React Router.
Què és React lazy load
React lazy load és una característica de React Router que permet carregar components sota demanda. Això vol dir que en lloc de carregar tots els components alhora, només es carreguen els components necessaris quan sigui necessari. Això ajuda a reduir el temps de càrrega inicial de la pàgina i millorar el rendiment. També permet una millor organització del codi i la separació de les preocupacions, ja que cada component es pot carregar de manera independent.
Com puc utilitzar React lazy al meu encaminador
React lazy és una característica de React que us permet importar components dinàmicament. Això vol dir que en comptes de carregar tots els components per endavant, podeu carregar-los segons sigui necessari. Això pot ser útil per optimitzar el rendiment en aplicacions grans.
Per utilitzar React lazy al vostre encaminador a React Router, heu d'embolicar el component que voleu carregar amb mandrosa en una trucada d'importació dinàmica. Per exemple:
const MyComponent = React.lazy(() => import('./MyComponent'));
Aleshores, quan definiu les vostres rutes, simplement passeu el component MyComponent al component Route de la manera següent:
Això farà que React Router carregui dinàmicament el component MyComponent quan navegui cap a aquesta ruta.
