Głównym problemem związanym z leniwym ładowaniem routera React jest to, że może powodować problemy z wydajnością, jeśli nie zostanie poprawnie zaimplementowany. Leniwe ładowanie może wydłużyć początkowy czas ładowania strony, ponieważ kod każdego komponentu musi być ładowany osobno. Ponadto, jeśli komponent nie jest często używany, może nigdy nie zostać załadowany, co skutkuje marnowaniem zasobów. Wreszcie, istnieją potencjalne problemy ze zgodnością ze starszymi przeglądarkami, które nie obsługują leniwego ładowania.
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. zaimportuj reakcję, { suspens } z „reaguj”;
// Ta linia importuje bibliotekę React i komponent Suspense z biblioteki React.
2. zaimportuj {BrowserRouter as Router, Route, Switch} z 'react-router-dom';
// Ta linia importuje komponenty BrowserRouter, Route i Switch z biblioteki react-router-dom.
3. const Dom = React.lazy(() => import('./Dom'));
// Ta linia tworzy stałą o nazwie Home, która wykorzystuje funkcję leniwego ładowania Reacta do dynamicznego importowania komponentu o nazwie Home z pliku znajdującego się w tym samym katalogu co ten plik (komponent App).
4. const O = React.lazy(() => import('./O'));
// Ten wiersz tworzy stałą o nazwie About, która używa leniwego ładowania do dynamicznego importowania komponentu o nazwie About z pliku znajdującego się w tym samym katalogu co ten plik (komponent App).
const Kontakt = Reaguj. leniwy(() => import('./Kontakt')); // Ta linia tworzy stałą o nazwie Contact, która używa leniwego ładowania do dynamicznego importowania komponentu o nazwie Contact z pliku znajdującego się w tym samym katalogu co ten plik (komponent App).
5. funkcja App() { powrót ( // Jest to funkcja strzałki, która zwraca kod JSX opakowany w zaimportowany wcześniej znacznik routera
6.Ładuję…
}> //Ten tag Suspense obejmuje wszystkie nasze trasy awaryjnymi rekwizytami Loading… jeśli jakakolwiek trasa wymaga czasu, aby się załadować
7. //Switch tag sprawi, że tylko jedna trasa będzie renderowana jednocześnie
8. //Ta trasa wyrenderuje Home Component, gdy dokładna ścieżka „/” zostanie dopasowana
9. //Ta trasa będzie renderować komponent About, gdy ścieżka „/about” zostanie dopasowana
10. //Ta trasa wyrenderuje komponent Contact, gdy ścieżka „/contact” zostanie dopasowana ) } export default App; //Na koniec zamykamy wszystkie tagi i eksportujemy naszą aplikację
Problem z leniwym ładowaniem
Leniwe ładowanie to technika używana do opóźniania ładowania niektórych komponentów, dopóki nie będą potrzebne. Może to pomóc poprawić wydajność aplikacji, ładując tylko to, co jest niezbędne w danym momencie. Może to jednak stanowić problem podczas korzystania z React Router, ponieważ nie obsługuje on leniwego ładowania po wyjęciu z pudełka. Aby obejść ten problem, programiści muszą ręcznie skonfigurować swoje trasy, aby umożliwić ładowanie z opóźnieniem. Może to obejmować konfigurowanie importów dynamicznych i dzielenie kodu, co może być złożonym i czasochłonnym zadaniem. Ponadto niektóre biblioteki, takie jak React Loadable, mogą wymagać użycia w celu prawidłowego zaimplementowania leniwego ładowania za pomocą React Router.
Co to jest leniwe ładowanie React
React lazy load to funkcja React Router, która pozwala na ładowanie komponentów na żądanie. Oznacza to, że zamiast ładować wszystkie komponenty naraz, w razie potrzeby ładowane są tylko niezbędne komponenty. Pomaga to skrócić czas początkowego ładowania strony i poprawić wydajność. Pozwala również na lepszą organizację kodu i rozdzielenie problemów, ponieważ każdy komponent może być ładowany niezależnie.
Jak korzystać z funkcji React lazy na moim routerze
React lazy to funkcja React, która umożliwia dynamiczne importowanie komponentów. Oznacza to, że zamiast ładować wszystkie komponenty z góry, możesz załadować je w razie potrzeby. Może to być przydatne do optymalizacji wydajności w dużych aplikacjach.
Aby użyć React lazy na routerze w React Router, musisz owinąć komponent, który chcesz leniwie załadować, w dynamicznym wywołaniu importu. Na przykład:
const Mój Składnik = React.lazy(() => import('./Mój Składnik'));
Następnie, podczas definiowania tras, po prostu przekaż komponent MyComponent do komponentu Route w następujący sposób:
Spowoduje to, że React Router będzie dynamicznie ładować komponent MyComponent podczas nawigacji do tej trasy.
