Šioje pamokoje sužinosite, kaip efektyviai naudoti " React Developer Tools" naršyklės priedą. "React DevTools" išplečia " Chrome" programuotojo įrankius specialiomis funkcijomis, kurios padeda geriau suprasti "React" komponentų struktūrą ir tikrinti jų rekvizitus bei būseną. Šiame išsamiame įvade parodoma, kaip įdiegti priedą ir naudoti jį kasdienėje programavimo veikloje.
Pagrindinės žinios
- Turėtumėte įsidiegti "React" programuotojo įrankius, kad galėtumėte efektyviai analizuoti savo "React" komponentų struktūrą "Chrome" naršyklėje.
- Gausite informacijos apie savo komponentų rekvizitus, būseną ir hierarchiją.
- Naudodamiesi profiliavimo įrankiu galite nustatyti savo programos našumo problemas.
Žingsnis po žingsnio vadovas
Pirmiausia "Chrome" naršyklėje turite įdiegti "React Developer Tools". Norėdami tai padaryti, eikite į "React" svetainę adresu react.dev. Čia rasite informacijos, kaip įdiegti priedą įvairioms naršyklėms. Jei naudojate "Chrome", pasirinkite "Install in Chrome" ir būsite nukreipti į "Chrome" interneto parduotuvę.
Norėdami naudoti plėtinį, turite įsitikinti, kad po įdiegimo suteikėte prieigą prie "DevTools". Norėdami tai padaryti, atidarykite programuotojo įrankius (F12) ir spustelėkite skirtuką "Extensions" (plėtiniai), kad patvirtintumėte reikiamus įgaliojimus. Perkraukite puslapį, kad naujieji skirtukai būtų matomi "DevTools" įrankiuose.
Po įdiegimo "Chrome" programuotojo įrankiuose turėtumėte matyti du naujus skirtukus: "Components" ir "Profiler". Spustelėkite "Components". Čia galite analizuoti savo "React" komponentų ir jų rekvizitų hierarchiją. Analizuodami svetainę pastebėsite, kad komponentų pavadinimai gali būti sutrumpinti arba sumažinti, nes galbūt dirbate gamybinėje aplinkoje.
Jei norite analizuoti konkretų komponentą, galite spustelėti kūrėjo įrankių sąsajoje esantį trijų taškų meniu ir eiti į "Select element" (pasirinkti elementą). Kai spustelėsite atitinkamą puslapio komponentą, jis bus paryškintas ir iš karto pamatysite, kur jis yra "DevTools" "React" hierarchijoje.
Spustelėję skirtingus komponentus, gausite prieigą prie visų šiems komponentams priskirtų rekvizitų. Pavyzdžiui, galite matyti "classname", kuris nurodo, kokios CSS klasės naudojamos komponentui stilizuoti. Taip pat rodomas kontekstas, iš kurio kilęs komponentas.
Dirbdami su savo "React" programomis įsitikinkite, kad naudojate derinimo vaizdus, o ne minifikuotas gamybines versijas. Taip gausite daugiau svarbios informacijos apie komponentų pavadinimus ir jų struktūrą. Pavyzdžiui, "React DevTools" skirtuke "Components" (Komponentai) galite matyti savo programos komponentą ir pagrindinius komponentus, pvz.
Dabar pereikime prie "React DevTools" funkcijos "Profiler". Ši funkcija ypač naudinga stebint jūsų programos našumą. Galite pradėti įrašymo procesą spustelėję mygtuką "Start Profiling" (pradėti profiliavimą). Pridėkite keletą elementų, kad sukurtumėte atvaizdus, ir spustelėkite "Stop".
Profiliavimo skyriuje galite apžvelgti visus atvaizdavimo procesus, jų trukmę ir priežastis, dėl kurių jie įvyko. Pavyzdžiui, jei matote, kad elementas dažnai atvaizduojamas, tai gali reikšti našumo problemas, kurias turėtumėte išsamiai išanalizuoti.
Peržiūrėję vaizdą "Flame Graph" (liepsnos grafikas), galite matyti atskirus komponentus ir jų atvaizdavimo procesus. Tiesiog spustelėję juos, galite iškviesti dar išsamesnę informaciją apie kiekvieną atvaizdavimo procesą.
Norėdami dar labiau pagerinti savo programos našumą, taip pat turėtumėte suaktyvinti pakartotinio perteikimo paryškinimus. Programos "React DevTools" nustatymuose galite aktyvuoti šią funkciją, kad komponentų atvaizdavimo metu būtų rodomos vaizdinės nuorodos. Tai padeda atpažinti, kurios jūsų programos dalys dažnai atnaujinamos ir kurias reikia optimizuoti.
Taip pat nepamirškite ir kitų "DevTools" funkcijų. Gali būti ir kitų naudingų funkcijų, kurios padės jums kūrimo procese. Susipažinkite su įvairiais nustatymais ir jų teikiama nauda.
Apibendrinimas
Šiame vadove sužinojote, kaip įdiegti ir naudoti "React Developer Tools". DevTools suteikia vertingų įžvalgų apie jūsų "React" programų struktūrą ir našumą. Galite stebėti rekvizitus, būseną ir atvaizdavimo procesus, kad optimizuotumėte savo programą. Išbandykite pristatytas funkcijas ir sužinokite, kaip jos gali padėti jums įgyvendinant projektus.
Dažniausiai užduodami klausimai
Kaip įdiegti "React Developer Tools" į "Chrome"?Eikite į svetainę react.dev, spustelėkite "Install in Chrome" ir vadovaukitės "Chrome Web Store" pateiktomis instrukcijomis.
Kaip suteikti prieigą prie "React DevTools"? Atidarykite "Developer Tools", eikite į skirtuką "Extensions" ir patvirtinkite prieigą. Tada iš naujo įkelkite puslapį.
Ką galiu matyti skirtuke "Components"? Skirtuke "Components" galite peržiūrėti ir analizuoti savo "React" komponentų ir jų rekvizitų hierarchiją.
Kaip galiu stebėti savo "React" programos našumą? Naudokitės skirtuku "Profiler", kad galėtumėte stebėti ir analizuoti atvaizdavimo procesus. Galite paleisti įrašus ir patikrinti atvaizdavimo procesų trukmę.
Kaip "React DevTools" programoje aktyvuoti pakartotinio atvaizdavimo paryškinimus? Eikite į "DevTools" nustatymus ir aktyvuokite pakartotinio atvaizdavimo paryškinimų parinktį, kad atvaizdavimo metu gautumėte vaizdinių užuominų.
