A React Router lusta betöltésével kapcsolatos fő probléma az, hogy teljesítménybeli problémákat okozhat, ha nem megfelelően implementálják. A késleltetett betöltés megnövelheti a kezdeti oldalbetöltési időt, mivel az egyes összetevők kódját külön kell betölteni. Ezenkívül, ha egy összetevőt nem használnak gyakran, előfordulhat, hogy egyáltalán nem töltődik be, ami erőforrások pazarlását eredményezi. Végül lehetséges kompatibilitási problémák is felmerülhetnek a régebbi böngészőkkel, amelyek nem támogatják a lusta betöltést.
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. React, { Suspense } importálása a 'react'-ból;
// Ez a sor importálja a React könyvtárat és a Suspense összetevőt a React könyvtárból.
2. import { BrowserRouter as Router, Route, Switch } a 'react-router-dom'-ból;
// Ez a sor importálja a BrowserRouter, Route és Switch összetevőket a react-router-dom könyvtárból.
3. const Home = React.lazy(() => import('./Home'));
// Ez a sor létrehoz egy Home nevű állandót, amely a React lusta betöltési funkcióját használja, hogy dinamikusan importáljon egy Home nevű összetevőt a fájllal ugyanabban a könyvtárban lévő fájlból (az App komponens).
4. const Névjegy = React.lazy(() => import('./About'));
// Ez a sor létrehoz egy Névjegy nevű konstanst, amely lusta betöltés segítségével dinamikusan importál egy About nevű összetevőt a fájllal ugyanabban a könyvtárban lévő fájlból (az App komponens).
const Kapcsolat = React.lazy(() => import('./Kapcsolat')); // Ez a sor létrehoz egy Contact nevű állandót, amely lusta betöltést használ, hogy dinamikusan importálja a Contact nevű összetevőt a fájllal ugyanabban a könyvtárban lévő fájlból (az App komponens).
5. function App() { return ( // Ez egy nyílfüggvény, amely a korábban importált Router címkébe csomagolt JSX kódot ad vissza
6.Betöltés…
}> //Ez a Suspense címke az összes útvonalunkat a Loading tartalék segédanyagaival burkolja, ha bármely útvonal betöltése időt vesz igénybe
7. //A címke váltása biztosítja, hogy egyszerre csak egy útvonal kerüljön megjelenítésre
8. //Ez az útvonal akkor jeleníti meg az otthoni összetevőt, ha a pontos „/” elérési út megegyezik
9. //A(z) „/about” elérési út esetén ez az útvonal megjeleníti az About Componentet
10. //Ez az útvonal akkor jeleníti meg a kapcsolati összetevőt, ha a „/contact” elérési út egyezik ) } alapértelmezett alkalmazás exportálása; //Végül bezárjuk az összes címkét, és exportáljuk az alkalmazásunkat
Lusta terhelési probléma
A lusta betöltés egy olyan technika, amellyel bizonyos komponensek betöltését késleltetik, amíg szükség van rájuk. Ez segíthet egy alkalmazás teljesítményének javításában, ha csak azt tölti be, ami adott időpontban szükséges. Ez azonban problémát jelenthet a React Router használatakor, mivel nem támogatja a lusta betöltést a dobozból. A probléma megkerüléséhez a fejlesztőknek manuálisan kell konfigurálniuk az útvonalakat, hogy lehetővé tegyék a lusta betöltést. Ez magában foglalhatja a dinamikus importálás és a kódfelosztás beállítását, amelyek összetett és időigényes feladatok lehetnek. Ezenkívül előfordulhat, hogy bizonyos könyvtárakat, például a React Loadable-t használni kell a React Router lusta betöltésének megfelelő végrehajtásához.
Mi az a React lusta terhelés
A React lazy load a React Router olyan funkciója, amely lehetővé teszi az alkatrészek igény szerinti betöltését. Ez azt jelenti, hogy ahelyett, hogy az összes komponenst egyszerre töltené be, csak a szükséges alkatrészeket tölti be szükség esetén. Ez segít csökkenteni az oldal kezdeti betöltési idejét és javítani a teljesítményt. Lehetővé teszi a kód jobb szervezését és az aggodalmak szétválasztását is, mivel az egyes összetevők egymástól függetlenül tölthetők be.
Hogyan használhatom a React lazy-t a routeren
A React lazy a React egyik funkciója, amely lehetővé teszi az összetevők dinamikus importálását. Ez azt jelenti, hogy ahelyett, hogy az összes összetevőt előre betöltené, szükség szerint betöltheti őket. Ez hasznos lehet a teljesítmény optimalizálásához nagy alkalmazásokban.
A React lazy használatához az útválasztón a React Routerben, dinamikus importálási hívásba kell csomagolnia a lusta módon betölteni kívánt összetevőt. Például:
const MyComponent = React.lazy(() => import('./MyComponent'));
Ezután az útvonalak meghatározásakor egyszerűen adja át a MyComponent összetevőt az Útvonal komponensnek, így:
Ez azt eredményezi, hogy a React Router dinamikusan betölti a MyComponent összetevőt, amikor arra az útvonalra navigál.
