Hlavným problémom súvisiacim s lenivým načítaním React Router je to, že môže spôsobiť problémy s výkonom, ak nie je správne implementované. Lenivé načítanie môže predĺžiť počiatočný čas načítania stránky, pretože kód pre každý komponent je potrebné načítať samostatne. Navyše, ak sa komponent nepoužíva často, nemusí sa vôbec načítať, čo vedie k plytvaniu zdrojmi. Nakoniec existujú potenciálne problémy s kompatibilitou so staršími prehliadačmi, ktoré nepodporujú lenivé načítanie.
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. importovať React, { Suspense } z 'react';
// Tento riadok importuje knižnicu React a komponent Suspense z knižnice React.
2. import { BrowserRouter as Router, Route, Switch } z 'react-router-dom';
// Tento riadok importuje komponenty BrowserRouter, Route a Switch z knižnice respond-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Tento riadok vytvára konštantu s názvom Home, ktorá používa funkciu pomalého načítania React na dynamický import komponentu s názvom Home zo súboru v rovnakom adresári ako tento súbor (komponent App).
4. const About = React.lazy(() => import('./About'));
// Tento riadok vytvára konštantu s názvom About, ktorá využíva pomalé načítanie na dynamický import komponentu s názvom About zo súboru v rovnakom adresári ako tento súbor (komponent App).
const Contact = React.lazy(() => import('./Contact')); // Tento riadok vytvára konštantu s názvom Contact, ktorá využíva pomalé načítanie na dynamický import komponentu s názvom Contact zo súboru v rovnakom adresári ako tento súbor (komponent App).
5. function App() { return ( // Toto je funkcia šípky, ktorá vracia kód JSX zabalený do značky Router, ktorá bola importovaná skôr
6.Načítava…
}> //Táto značka Suspense obalí všetky naše trasy záložnými rekvizitami Načítavam... ak načítanie ktorejkoľvek trasy trvá dlho
7. //Switch tag zabezpečí, aby sa naraz vykreslila iba jedna trasa
8. //Táto trasa vykreslí Home Component, keď sa zhoduje presná cesta „/“.
9. //Táto trasa vykreslí o komponente, keď sa zhoduje cesta „/about“.
10. //Táto trasa vykreslí komponent kontaktu, keď sa zhoduje cesta „/contact“ ) } export default App; //Nakoniec zatvoríme všetky značky a exportujeme našu aplikáciu
Problém s lenivým zaťažením
Lazy loading je technika používaná na oneskorenie načítania určitých komponentov, kým nie sú potrebné. To môže pomôcť zlepšiť výkon aplikácie tým, že sa načíta len to, čo je v danom čase nevyhnutné. Pri používaní React Router to však môže byť problém, pretože nepodporuje lenivé načítanie po vybalení z krabice. Na vyriešenie tohto problému musia vývojári manuálne nakonfigurovať svoje trasy, aby umožnili lenivé načítanie. Môže to zahŕňať nastavenie dynamických importov a rozdeľovania kódu, čo môžu byť zložité a časovo náročné úlohy. Okrem toho môže byť potrebné použiť niektoré knižnice, ako napríklad React Loadable, aby bolo možné správne implementovať pomalé načítanie pomocou smerovača React Router.
Čo je React lazy load
React lazy load je vlastnosť React Router, ktorá umožňuje načítanie komponentov na požiadanie. To znamená, že namiesto načítania všetkých komponentov naraz sa v prípade potreby načítajú iba potrebné komponenty. Pomáha to skrátiť počiatočný čas načítania stránky a zlepšiť výkon. Umožňuje tiež lepšiu organizáciu kódu a oddelenie problémov, pretože každý komponent je možné načítať nezávisle.
Ako môžem použiť React lazy na mojom smerovači
React lazy je funkcia Reactu, ktorá vám umožňuje dynamicky importovať komponenty. To znamená, že namiesto načítania všetkých komponentov vopred ich môžete načítať podľa potreby. To môže byť užitočné pri optimalizácii výkonu vo veľkých aplikáciách.
Ak chcete použiť React lazy na vašom routeri v React Router, musíte komponent, ktorý chcete lenivo načítať, zabaliť do dynamického importu. Napríklad:
const MyComponent = React.lazy(() => import('./MyComponent'));
Potom pri definovaní trás jednoducho odovzdajte komponent MyComponent do komponentu Route takto:
To spôsobí, že React Router dynamicky načíta komponent MyComponent pri navigácii na túto trasu.
