Главни проблем у вези са лењим учитавањем Реацт рутера је тај што може изазвати проблеме са перформансама ако се не примени правилно. Лено учитавање може повећати почетно време учитавања странице, пошто код за сваку компоненту треба да се учита засебно. Поред тога, ако се компонента не користи често, можда се никада неће учитати, што резултира губитком ресурса. Коначно, постоје потенцијални проблеми са компатибилношћу са старијим прегледачима који не подржавају лењо учитавање.
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. импорт Реацт, { Суспенсе } из 'реацт';
// Ова линија увози Реацт библиотеку и компоненту Суспенсе из Реацт библиотеке.
2. импорт { БровсерРоутер ас Роутер, Роуте, Свитцх } из 'реацт-роутер-дом';
// Ова линија увози компоненте БровсерРоутер, Роуте и Свитцх из библиотеке реацт-роутер-дом.
3. цонст Хоме = Реацт.лази(() => импорт('./Хоме'));
// Ова линија креира константу под називом Хоме која користи функцију лењог учитавања Реацт-а за динамички увоз компоненте под називом Хоме из датотеке у истом директоријуму као и ова датотека (компонента апликације).
4. цонст Абоут = Реацт.лази(() => импорт('./Абоут'));
// Ова линија креира константу под називом Абоут која користи лење учитавање за динамички увоз компоненте под називом Абоут из датотеке у истом директоријуму као и ова датотека (компонента апликације).
цонст Контакт = Реацт.лази(() => импорт('./Цонтацт')); // Ова линија креира константу под називом Цонтацт која користи лењо учитавање за динамички увоз компоненте под називом Цонтацт из датотеке у истом директоријуму као и ова датотека (компонента апликације).
5. фунцтион Апп() { ретурн ( // Ово је функција стрелице која враћа ЈСКС код умотан у ознаку рутера која је раније увезена
6.Лоадинг ...
}> //Ова неизвесна ознака обмотава све наше руте резервним реквизитима учитавања... ако је потребно време да се учитава било којој рути
7. //Свитцх таг ће осигурати да се само једна рута прикаже одједном
8. //Ова рута ће приказати почетну компоненту када се тачна путања “/” подудара
9. //Ова рута ће приказати О компоненти када се поклопи путања „/абоут“.
КСНУМКС. //Ова рута ће приказати компоненту контакта када се путања “/цонтацт” подудара ) } извоз подразумеване апликације; //Коначно затварамо све ознаке и извозимо нашу апликацију
Проблем са лењим учитавањем
Лено учитавање је техника која се користи за одлагање учитавања одређених компоненти док не буду потребне. Ово може помоћи у побољшању перформанси апликације учитавањем само онога што је неопходно у било ком тренутку. Међутим, ово може бити проблем када користите Реацт Роутер, јер не подржава лењо учитавање из кутије. Да би заобишли овај проблем, програмери морају ручно да конфигуришу своје руте да би омогућили лењо учитавање. Ово може укључивати подешавање динамичког увоза и раздвајања кода, што може бити сложен и дуготрајан задатак. Поред тога, неке библиотеке као што је Реацт Лоадабле ће можда морати да се користе да би се правилно имплементирало лењо учитавање са Реацт Роутером.
Шта је Реацт лази лоад
Реацт лази лоад је карактеристика Реацт Роутера која омогућава учитавање компоненти на захтев. То значи да уместо учитавања свих компоненти одједном, само потребне компоненте се учитавају када је то потребно. Ово помаже да се смањи почетно време учитавања странице и побољша перформансе. Такође омогућава бољу организацију кода и раздвајање брига, јер се свака компонента може учитати независно.
Како да користим Реацт лази на свом рутеру
Реацт лази је карактеристика Реацт-а која вам омогућава да динамички увозите компоненте. То значи да уместо да унапред учитавате све компоненте, можете их учитати по потреби. Ово може бити корисно за оптимизацију перформанси у великим апликацијама.
Да бисте користили Реацт лази на свом рутеру у Реацт Роутер-у, морате да умотате компоненту коју желите да лењо учитате у позив динамичког увоза. На пример:
цонст МиЦомпонент = Реацт.лази(() => импорт('./МиЦомпонент'));
Затим, када дефинишете своје руте, једноставно проследите компоненту МиЦомпонент у компоненту Роуте на следећи начин:
Ово ће довести до тога да Реацт Роутер динамички учитава компоненту МиЦомпонент приликом навигације до те руте.
