Galvenā problēma, kas saistīta ar React Router slinko ielādi, ir tā, ka tā var izraisīt veiktspējas problēmas, ja tā netiek pareizi ieviesta. Slinka ielāde var palielināt sākotnējo lapas ielādes laiku, jo katra komponenta kods ir jāielādē atsevišķi. Turklāt, ja komponents netiek izmantots bieži, tas var nekad netikt ielādēts, kā rezultātā tiek tērēti resursi. Visbeidzot, ir iespējamas saderības problēmas ar vecākām pārlūkprogrammām, kas neatbalsta slinku ielādi.
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ēt React, { Suspense } no 'react';
// Šī rinda importē React bibliotēku un Suspense komponentu no React bibliotēkas.
2. importēt { BrowserRouter as Router, Route, Switch } no 'react-router-dom';
// Šī rinda importē komponentus BrowserRouter, Route un Switch no react-router-dom bibliotēkas.
3. const Home = React.lazy(() => import('./Home'));
// Šajā rindā tiek izveidota konstante ar nosaukumu Home, kas izmanto React slinkās ielādes funkciju, lai dinamiski importētu komponentu ar nosaukumu Home no faila tajā pašā direktorijā, kurā atrodas šis fails (lietotnes komponents).
4. const Par = React.lazy(() => import('./About'));
// Šajā rindā tiek izveidota konstante About, kas izmanto slinku ielādi, lai dinamiski importētu komponentu ar nosaukumu About no faila tajā pašā direktorijā, kur šis fails (lietotnes komponents).
const Contact = React.lazy(() => import('./Contact')); // Šajā rindā tiek izveidota konstante ar nosaukumu Kontaktpersona, kas izmanto slinku ielādi, lai dinamiski importētu komponentu ar nosaukumu Kontaktpersona no faila tajā pašā direktorijā, kurā atrodas šis fails (lietotnes komponents).
5. function App() { return ( // Šī ir bultiņas funkcija, kas atgriež JSX kodu, kas ietīts maršrutētāja tagā, kas importēts agrāk
6.Notiek ielāde…
}> //Šī spriedzes atzīme visus mūsu maršrutus apvij ar ielādēšanas atkāpšanās rekvizītiem... ja kāda maršruta ielāde prasa laiku.
7. //Taga maiņa nodrošinās, ka vienlaikus tiek renderēts tikai viens maršruts
8. //Šis maršruts atveidos mājas komponentu, ja tiks atrasts precīzs ceļš “/”.
9. //Šis maršruts tiks renderēts About Component, kad tiks atrasts ceļš “/about”.
10. //Šis maršruts atveidos kontakta komponentu, kad tiks atrasts ceļš “/contact” ) } eksportēt noklusējuma lietotni; //Visbeidzot mēs aizveram visus tagus un eksportējam savu lietotni
Slinkas slodzes problēma
Slinka ielāde ir paņēmiens, ko izmanto, lai aizkavētu noteiktu komponentu ielādi, līdz tie ir nepieciešami. Tas var palīdzēt uzlabot lietojumprogrammas veiktspēju, ielādējot tikai to, kas ir nepieciešams jebkurā brīdī. Tomēr tā var būt problēma, izmantojot React Router, jo tas neatbalsta slinku ielādi no kastes. Lai novērstu šo problēmu, izstrādātājiem ir manuāli jākonfigurē savi maršruti, lai iespējotu slinko ielādi. Tas var ietvert dinamiskas importēšanas un koda sadalīšanas iestatīšanu, kas var būt sarežģīti un laikietilpīgi uzdevumi. Turklāt dažas bibliotēkas, piemēram, React Loadable, var būt jāizmanto, lai pareizi ieviestu slinko ielādi ar React Router.
Kas ir React slinks load
React Lazy load ir React Router funkcija, kas ļauj ielādēt komponentus pēc pieprasījuma. Tas nozīmē, ka tā vietā, lai ielādētu visas sastāvdaļas vienlaikus, nepieciešamības gadījumā tiek ielādētas tikai nepieciešamās sastāvdaļas. Tas palīdz samazināt sākotnējo lapas ielādes laiku un uzlabot veiktspēju. Tas arī ļauj labāk organizēt kodu un nošķirt problēmas, jo katru komponentu var ielādēt neatkarīgi.
Kā maršrutētājā izmantot React Lazy
React lazy ir React funkcija, kas ļauj dinamiski importēt komponentus. Tas nozīmē, ka tā vietā, lai ielādētu visus komponentus iepriekš, jūs varat tos ielādēt pēc vajadzības. Tas var būt noderīgi, lai optimizētu veiktspēju lielās lietojumprogrammās.
Lai savā maršrutētājā lietotu React Lazy programmā React Router, dinamiskā importēšanas izsaukumā ir jāietver komponents, kuru vēlaties slinki ielādēt. Piemēram:
const MyComponent = React.slink(() => import('./MyComponent'));
Pēc tam, definējot maršrutus, vienkārši nododiet komponentu MyComponent komponentam Route šādi:
Tas liks React Router dinamiski ielādēt MyComponent komponentu, navigējot uz šo maršrutu.
