React navigācijas pamati

Šajā rakstā jūs uzzināsiet par atšķirībām starp tradicionālajām tīmekļa lapām un React-powered tīmekļa lapām (SPAs —single page applications/ vienas lapas lietojumprogrammas).

Kad sapratīsiet atšķirību starp šiem diviem tīmekļa lapu veidošanas veidiem, varēsiet saprast nepieciešamo atšķirību starp to, kā navigācija darbojas tradicionālajās tīmekļa lietotnēs un kā tā darbojas mūsdienu SPAs vietnēs.

Pirms vienas lapas lietotnēm…

Pirms moderno JavaScript ietvaru parādīšanās lielākā daļa vietņu tika ieviestas kā vairāku lapu lietojumprogrammas. Tas ir, kad lietotājs noklikšķina uz saites, pārlūkprogramma pāriet uz jaunu tīmekļa lapu, nosūta pieprasījumu tīmekļa serverim; tas atbild ar pilnu tīmekļa lapu, un pārlūkprogrammā tiek parādīta jaunā lapa.

Tas var padarīt jūsu lietojumprogrammas resursu lieki “smagu” tīmekļa serverim. CPU laiks tiek tērēts dinamisku lapu renderēšanai, un tiek izmantots tīkla joslas platums, sūtot atpakaļ visas tīmekļa lapas katram pieprasījumam. Ja jūsu vietne ir sarežģīta, lietotājiem tā var šķist lēna un pat lēnāka, ja viņiem ir lēns vai ierobežots interneta savienojums.

Lai atrisinātu šo problēmu, daudzi tīmekļa izstrādātāji izstrādā savas tīmekļa lietojumprogrammas kā vienas lapas lietojumprogrammas.

Tagad vienas lapas lietotnes…

Jūs katru dienu izmantojat daudzas vienas lapas lietojumprogrammas. Padomājiet par savu iecienītāko sociālo tīklu vai tiešsaistes e-pasta pakalpojumu sniedzēju, vai kartes lietojumprogrammu, kuru izmantojat, lai atrastu vietējos uzņēmumus. Viņu lielisko lietotāju pieredzi nodrošina vienas lapas lietojumprogrammas.

Vienas lapas lietojumprogramma ļauj lietotājam mijiedarboties ar vietni, nelejupielādējot pilnīgi jaunas tīmekļa lapas. Tā vietā tā pārraksta pašreizējo tīmekļa lapu, kad lietotājs ar to mijiedarbojas. Rezultāts ir tāds, ka lietojumprogramma lietotājam šķitīs ātrāka un atsaucīgāka.

Kā darbojas vienas lapas lietotne?

Kad lietotājs pārlūkprogrammā pāriet uz tīmekļa lietojumprogrammu, tīmekļa serveris atgriezīs lietojumprogrammas palaišanai nepieciešamos resursus. Ir divas pieejas koda un resursu apkalpošanai vienas lapas lietojumprogrammās.

Kad pārlūkprogramma pieprasa lietojumprogrammu, nekavējoties atgriezieties un ielādējiet visu nepieciešamo HTML, CSS un JavaScript. To sauc par grupēšanu “bundling”.

Kad pārlūkprogramma pieprasa lietojumprogrammu, atgrieziet tikai minimālo HTML, CSS un JavaScript, kas nepieciešams lietojumprogrammas ielādei. Papildu resursi tiek lejupielādēti atbilstoši lietojumprogrammai, piemēram, kad lietotājs pāriet uz noteiktu lietojumprogrammas sadaļu. To sauc par slinko ielādi “lazy loading” vai koda sadalīšanu “splitting”.

Abas pieejas ir derīgas un tiek izmantotas atkarībā no lietojumprogrammas lieluma, sarežģītības un joslas platuma prasībām. Ja jūsu lietojumprogramma ir sarežģīta un tai ir daudz resursu, jūsu komplekti izaugs diezgan lieli, un to lejupielāde prasīs daudz laika — iespējams, tas beigsies lēnāk nekā tradicionālā tīmekļa lietojumprogramma!

Kad lietojumprogramma ir ielādēta, visa loģika un izmaiņas tiek piemērotas pašreizējai tīmekļa lapai.

Apskatīsim piemēru.

Tradicionālas lapas dzīves cikls

SPAs lapas dzīves cikls

Vienas lapas lietotnes piemērs…

Iedomājieties, ka ir tīmekļa lapa, kurai ir Leibls un poga. Noklikšķinot uz pogas, tas parādīs nejaušu filmas nosaukumu.

Tradicionālā vietnē, noklikšķinot uz pogas, pārlūkprogramma tīmekļa serverim nosūtīs POST pieprasījumu. Tīmekļa serveris atgriezīs jaunu tīmekļa lapu, kurā būs poga un filmas nosaukums, un tīmekļa pārlūkprogramma atveido jauno lapu.

Vienas lapas lietojumprogrammā, noklikšķinot uz pogas, pārlūkprogramma nosūtīs POST pieprasījumu tīmekļa serverim. Tīmekļa serveris atgriezīs JSON objektu. Lietojumprogramma nolasa objektu un atjaunina etiķeti ar filmas nosaukumu.

Tātad tas ir daudz efektīvāk un resursus taupošāk!

Bet ko darīt, ja mūsu lietojumprogrammā ir jābūt vairākām lapām ar dažādiem izkārtojumiem?

Apskatīsim citu piemēru.

Praktiskas atšķirības starp vienas lapas lietotnēm un vairāku lapu lietotnēm…

Lapa netiek pārlādēta pēc pieprasījuma

Visa lapa tiek pārlādēta pēc katra pieprasījuma

Jums ir tīmekļa lietojumprogramma, kuras augšpusē ir navigācijas josla un divas lapas. Vienā lapā tiek rādītas jaunākās ziņas, bet otrā – pašreizējā lietotāja profila lapa. Navigācijas joslā ir saite uz katru lapu.

Tradicionālā vietnē, kad lietotājs noklikšķina uz saites Profils, tīmekļa pārlūkprogramma nosūta pieprasījumu tīmekļa serverim. Tīmekļa serveris ģenerē HTML lapu un nosūta to atpakaļ uz tīmekļa pārlūkprogrammu. Pēc tam tīmekļa pārlūkprogramma atveido jauno tīmekļa lapu.

Vienas lapas lietojumprogrammā dažādas lapas tiek sadalītas veidnēs (vai skatos) / templates (or views). Katrā skatā būs HTML kods, kas satur mainīgos lielumus, kurus lietojumprogramma var atjaunināt.

Tīmekļa pārlūkprogramma nosūta pieprasījumu tīmekļa serverim, un tīmekļa serveris nosūta atpakaļ JSON objektu. Pēc tam tīmekļa pārlūkprogramma atjaunina tīmekļa lapu, ievietojot veidni ar mainīgajiem, kas aizstāti ar vērtībām JSON objektā.

Enkura tagu elementi vienas lapas elementos

Anchor Tag

Vienas lapas lietojumprogrammai nevar būt regulāri enkura tagu elementi, kā to var izmantot tradicionālā tīmekļa lietotne.

Iemesls tam ir tāds, ka enkura taga noklusējuma darbība ir cita HTML faila ielāde no servera un lapas atsvaidzināšana. Šī lapas atsvaidzināšana nav iespējama SPA, ko nodrošina bibliotēka, piemēram, React, jo pilnīga lapas atsvaidzināšana nav veids, kā SPA darbojas, kā paskaidrots iepriekš šajā rakstā.

Tā vietā SPA ir aprīkots ar īpašu enkura tagu un saišu ieviešanu, kas tikai rada ilūziju par dažādu lapu ielādi gala lietotājam, lai gan patiesībā tās vienkārši ielādē dažādas sastāvdaļas vienā reālā DOM elementā, kurā tiek ievietots virtuālais. DOM koks tiek uzstādīts un atjaunināts.

Tāpēc navigācija vienas lapas lietotnē būtiski atšķiras no tās līdzinieces vairāku lapu lietotnē. Izpratne par šajā rakstā izklāstītajiem jēdzieniem padarīs jūs par vispusīgāku React izstrādātāju.

Bet plašāk par šo jau rakstīšu savos nakošajos rakstos…