Pagrindinė problema, susijusi su „React Router“ tingiu įkėlimu, yra ta, kad netinkamai įdiegus tai gali sukelti našumo problemų. Dėl tinginio įkėlimo gali pailgėti pradinis puslapio įkėlimo laikas, nes kiekvieno komponento kodą reikia įkelti atskirai. Be to, jei komponentas nenaudojamas dažnai, jis gali būti niekada neįkeltas, todėl bus švaistomi ištekliai. Galiausiai, yra galimų suderinamumo problemų su senesnėmis naršyklėmis, kurios nepalaiko tingaus įkėlimo.
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. importuoti React, { Suspense } iš 'react';
// Ši eilutė importuoja „React“ biblioteką ir „Suspense“ komponentą iš „React“ bibliotekos.
2. importuoti { BrowserRouter as Router, Route, Switch } iš 'react-router-dom';
// Ši eilutė importuoja „BrowserRouter“, „Route“ ir „Switch“ komponentus iš „react-router-dom“ bibliotekos.
3. const Home = React.lazy(() => import('./Home'));
// Ši eilutė sukuria konstantą pavadinimu Home, kuri naudoja tingaus įkėlimo funkciją React, kad dinamiškai importuotų komponentą pavadinimu Home iš failo, esančio tame pačiame kataloge kaip ir šis failas (programos komponentas).
4. const Apie = React.lazy(() => import('./Apie'));
// Ši eilutė sukuria konstantą pavadinimu About, kuri naudoja tingų įkėlimą, kad dinamiškai importuotų komponentą pavadinimu About iš failo, esančio tame pačiame kataloge kaip ir šis failas (programos komponentas).
const Contact = React.lazy(() => import('./Contact')); // Ši eilutė sukuria konstantą pavadinimu Kontaktas, kuris naudoja tingų įkėlimą, kad dinamiškai importuotų komponentą pavadinimu Kontaktas iš failo, esančio tame pačiame kataloge kaip ir šis failas (programos komponentas).
5. function App() { return ( // Tai rodyklės funkcija, kuri grąžina JSX kodą, įvyniotą į maršrutizatoriaus žymą, kuri buvo importuota anksčiau
6.Kraunasi ...
}> //Ši „Suspense“ žyma apvynioja visus mūsų maršrutus su atsarginiais įkėlimo rekvizitais... jei kuriam nors maršrutui įkelti reikia laiko
7. //Perjungti žymą užtikrins, kad vienu metu būtų pateiktas tik vienas maršrutas
8. //Šis maršrutas pateiks pagrindinį komponentą, kai bus suderintas tikslus kelias „/“.
9. //Šis maršrutas bus pateiktas apie komponentą, kai bus suderintas kelias „/about“.
10. //Šis maršrutas pateiks kontaktinį komponentą, kai bus suderintas kelias „/contact“ ) } eksportuoti numatytąją programą; //Galiausiai uždarome visas žymas ir eksportuojame savo programą
Tinginio apkrovimo problema
Tingus įkėlimas yra metodas, naudojamas atidėti tam tikrų komponentų įkėlimą, kol jų prireiks. Tai gali padėti pagerinti programos našumą įkeliant tik tai, kas būtina bet kuriuo metu. Tačiau tai gali būti problema naudojant „React Router“, nes jis nepalaiko tingaus įkėlimo iš dėžutės. Norėdami išspręsti šią problemą, kūrėjai turi rankiniu būdu sukonfigūruoti savo maršrutus, kad įgalintų tingų įkėlimą. Tai gali apimti dinaminio importavimo ir kodo padalijimo nustatymą, o tai gali būti sudėtingos ir daug laiko reikalaujančios užduotys. Be to, gali reikėti naudoti kai kurias bibliotekas, pvz., „React Loadable“, kad būtų galima tinkamai įgyvendinti „React Router“ įkėlimą.
Kas yra React tingus apkrova
„React Lazy load“ yra „React Router“ funkcija, leidžianti įkelti komponentus pagal poreikį. Tai reiškia, kad užuot kraunus visus komponentus iš karto, prireikus įkeliami tik būtini komponentai. Tai padeda sutrumpinti pradinį puslapio įkėlimo laiką ir pagerinti našumą. Tai taip pat leidžia geriau organizuoti kodą ir atskirti problemas, nes kiekvieną komponentą galima įkelti atskirai.
Kaip maršrutizatoriuje naudoti React lazy
„React lazy“ yra „React“ funkcija, leidžianti dinamiškai importuoti komponentus. Tai reiškia, kad užuot įkelę visus komponentus iš anksto, galite juos įkelti pagal poreikį. Tai gali būti naudinga optimizuojant našumą didelėse programose.
Norėdami naudoti React lazy savo maršrutizatoriuje React Router, turite įtraukti komponentą, kurį norite tingiai įkelti, į dinaminį importavimo skambutį. Pavyzdžiui:
const MyComponent = React.lazy(() => import('./MyComponent'));
Tada, apibrėždami maršrutus, tiesiog perkelkite komponentą „MyComponent“ į „Route“ komponentą taip:
Dėl to „React Router“ dinamiškai įkels „MyComponent“ komponentą naviguodamas į tą maršrutą.
