Efektīva React Developer Tools izmantošana Chrome pārlūkprogrammā

Šajā pamācībā uzzināsiet, kā efektīvi izmantot pārlūkprogrammas papildinājumu React Developer Tools. React DevTools paplašina Chrome izstrādātāja rīkus ar īpašām funkcijām, kas palīdz labāk izprast jūsu React komponentu struktūru un pārbaudīt to rekvizītus un stāvokli. Šajā visaptverošajā ievadā ir parādīts, kā instalēt papildinājumu un izmantot to ikdienas izstrādē.

Galvenās atziņas

• Lai efektīvi analizētu savu React komponentu struktūru pārlūkprogrammā Chrome, jums vajadzētu instalēt React izstrādātāja rīkus.
• Jūs gūsiet ieskatu par savu komponentu rekvizītiem, stāvokli un hierarhiju.
• Profilēšanas rīka izmantošana var palīdzēt jums identificēt veiktspējas problēmas jūsu lietojumprogrammā.

Soli pa solim

Vispirms Chrome pārlūkprogrammā ir jāinstalē React Developer Tools. Lai to izdarītu, dodieties uz React tīmekļa vietni react.dev. Šeit atradīsiet informāciju par papildinājuma instalēšanu dažādām pārlūkprogrammām. Attiecībā uz Chrome izvēlieties "Install in Chrome", un jūs tiksiet novirzīts uz Chrome interneta veikalu.

Lai paplašinājumu izmantotu, pēc instalēšanas ir jāpārliecinās, ka jums ir piešķirta piekļuve DevTools. Lai to izdarītu, atveriet izstrādātāja rīkus (F12) un noklikšķiniet uz cilnes "Paplašinājumi", lai apstiprinātu nepieciešamās pilnvaras. Pārlādējiet lapu, lai DevTools būtu redzamas jaunās cilnes.

Pēc instalēšanas Chrome izstrādātāja rīkos jāredz divas jaunas cilnes: "Components" un "Profiler". Noklikšķiniet uz "Components". Šeit varat analizēt savu React komponentu un to rekvizītu hierarhiju. Analizējot vietni, jūs pamanīsiet, ka komponentu nosaukumi var būt saīsināti vai saīsināti, jo, iespējams, strādājat ražošanas vidē.

Ja vēlaties analizēt konkrētu komponentu, varat noklikšķināt uz trīs punktu izvēlnes izstrādātāja rīku saskarnē un doties uz "Select element" (Izvēlēties elementu). Noklikšķinot uz attiecīgā komponenta lapā, tas tiks izcelts, un jūs uzreiz redzēsiet, kur tas atrodas React hierarhijā DevTools.

Noklikšķinot uz dažādiem komponentiem, jūs iegūsiet piekļuvi visiem šiem komponentiem piešķirtajiem rekvizītiem. Piemēram, jūs varat redzēt "classname", kas norāda, kuras CSS klases tiek izmantotas komponenta stilizēšanai. Tiek parādīts arī konteksts, no kura nāk komponents.

Strādājot ar savām React lietojumprogrammām, pārliecinieties, ka izmantojat atkļūdošanas attēlus, nevis minificētas ražošanas versijas. Tādējādi iegūsiet vairāk svarīgas informācijas par komponentu nosaukumiem un to struktūru. Piemēram, React DevTools cilnē "Components" (Komponenti) varat redzēt savas lietotnes komponenti un pamatā esošās komponentes, piemēram, komponenti "Entry" (Ievads).

Tagad pāriesim pie React DevTools funkcionalitātes "Profiler". Šī funkcija ir īpaši noderīga, lai uzraudzītu jūsu lietojumprogrammas veiktspēju. Ierakstīšanas procesu var sākt, noklikšķinot uz pogas "Start Profiling" (Sākt profilēšanu). Pievienojiet dažus elementus, lai izveidotu atveidojumus, un pēc tam noklikšķiniet uz "Stop".

Profilēšanas sadaļā varat iegūt pārskatu par visiem renderēšanas procesiem, to ilgumu un iemesliem, kāpēc tie ir notikuši. Piemēram, ja redzat, ka kāds elementa elements tiek atveidots bieži, tas var liecināt par veiktspējas problēmām, kuras vajadzētu detalizēti analizēt.

Ja apskatāt skatu "Flame Graph" (liesmu grafiks), varat redzēt atsevišķus komponentus un to renderēšanas procesus. Vienkārši noklikšķinot uz tiem, varat izsaukt vēl detalizētāku informāciju par katru renderēšanas procesu.

Lai vēl vairāk uzlabotu lietojumprogrammas veiktspēju, jums vajadzētu arī aktivizēt atkārtotas izlīdzināšanas izcēlumus. React DevTools iestatījumos varat aktivizēt šo funkciju, lai komponentu renderēšanas laikā parādītos vizuāli norādījumi. Tas palīdz jums atpazīt, kuras jūsu lietojumprogrammas daļas tiek bieži atjauninātas un kurās ir nepieciešama optimizācija.

Paturiet prātā arī citas DevTools funkcijas. Tur var būt arī citas noderīgas funkcijas, kas var palīdzēt jums izstrādes procesā. Iepazīstieties ar dažādiem iestatījumiem un to priekšrocībām.

Kopsavilkums

Šajā rokasgrāmatā esat uzzinājis, kā instalēt un izmantot React Developer rīkus. DevTools sniedz vērtīgu ieskatu jūsu React lietojumprogrammu struktūrā un veiktspējā. Jūs varat uzraudzīt rekvizītus, stāvokli un renderēšanas procesus, lai optimizētu savu lietojumprogrammu. Izmēģiniet prezentētās funkcijas un uzziniet, kā tās var palīdzēt jūsu projektos.