Domov » JavaScript » React usmerjevalnik » Rešeno: odziv na leno nalaganje usmerjevalnika
Glavna težava, povezana z lenobnim nalaganjem usmerjevalnika React, je, da lahko povzroči težave z zmogljivostjo, če ni pravilno implementirano. Leno nalaganje lahko podaljša začetni čas nalaganja strani, saj je treba kodo za vsako komponento naložiti posebej. Poleg tega se lahko komponenta, če je ne uporabljate pogosto, sploh nikoli ne naloži, kar povzroči izgubljene vire. Nazadnje obstajajo možne težave z združljivostjo s starejšimi brskalniki, ki ne podpirajo lenega nalaganja.
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. uvozi React, { Suspense } iz 'react';
// Ta vrstica uvozi knjižnico React in komponento Suspense iz knjižnice React.
2. uvozite { BrowserRouter kot Router, Route, Switch } iz 'react-router-dom';
// Ta vrstica uvozi komponente BrowserRouter, Route in Switch iz knjižnice react-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Ta vrstica ustvari konstanto, imenovano Home, ki uporablja funkcijo lenega nalaganja Reacta za dinamičen uvoz komponente, imenovane Home, iz datoteke v istem imeniku kot ta datoteka (komponenta App).
4. const About = React.lazy(() => import('./About'));
// Ta vrstica ustvari konstanto z imenom About, ki uporablja leno nalaganje za dinamičen uvoz komponente z imenom About iz datoteke v istem imeniku kot ta datoteka (komponenta App).
const Contact = React.lazy(() => import('./Contact')); // Ta vrstica ustvari konstanto z imenom Contact, ki uporablja leno nalaganje za dinamičen uvoz komponente z imenom Contact iz datoteke v istem imeniku kot ta datoteka (komponenta App).
5. funkcija App() { return ( // To je puščična funkcija, ki vrne kodo JSX, ovito v oznako usmerjevalnika, ki je bila prej uvožena
6.Nalaganje ...
}> //Ta oznaka Suspense ovije vse naše poti z nadomestnimi rekviziti nalaganja ... če katera koli pot potrebuje čas za nalaganje
7. //Preklopna oznaka bo poskrbela, da bo hkrati upodobljena samo ena pot
8. //Ta pot bo upodobila domačo komponento, ko se bo ujemala natančna pot »/«.
9. //Ta pot bo upodobila komponento About, ko se pot »/about« ujema
10. //Ta pot bo upodobila kontaktno komponento, ko se pot »/contact« ujema ) } izvoz privzete aplikacije; //Končno zapremo vse oznake in izvozimo našo aplikacijo
Težava z lenim nalaganjem
Leno nalaganje je tehnika, ki se uporablja za odložitev nalaganja določenih komponent, dokler niso potrebne. To lahko pomaga izboljšati delovanje aplikacije tako, da naloži le tisto, kar je v danem trenutku potrebno. Vendar pa je to lahko težava pri uporabi React Routerja, saj ne podpira lenobnega nalaganja takoj po namestitvi. Da bi se izognili tej težavi, morajo razvijalci ročno konfigurirati svoje poti, da omogočijo leno nalaganje. To lahko vključuje nastavitev dinamičnega uvoza in razdelitev kode, kar sta lahko zapleteni in dolgotrajni nalogi. Poleg tega bo morda treba uporabiti nekatere knjižnice, kot je React Loadable, da bi lahko pravilno izvajali leno nalaganje z React Routerjem.
Kaj je React leno nalaganje
React lazy load je funkcija React Routerja, ki omogoča nalaganje komponent na zahtevo. To pomeni, da se namesto nalaganja vseh komponent hkrati naložijo samo potrebne komponente, ko so potrebne. To pomaga skrajšati začetni čas nalaganja strani in izboljša učinkovitost. Omogoča tudi boljšo organizacijo kode in ločevanje zadev, saj je vsako komponento mogoče naložiti neodvisno.
Kako uporabim React lazy na svojem usmerjevalniku
React lazy je funkcija Reacta, ki vam omogoča dinamično uvažanje komponent. To pomeni, da namesto vnaprejšnjega nalaganja vseh komponent, jih lahko naložite po potrebi. To je lahko koristno za optimizacijo zmogljivosti v velikih aplikacijah.
Če želite v React Routerju uporabljati React lazy na vašem usmerjevalniku, morate komponento, ki jo želite leno naložiti, zaviti v klic dinamičnega uvoza. Na primer:
const MyComponent = React.lazy(() => import('./MyComponent'));
Nato, ko definirate svoje poti, preprosto prenesite komponento MyComponent v komponento Route takole:
To bo povzročilo, da bo React Router dinamično naložil komponento MyComponent pri navigaciji do te poti.
