Programų internetinių sistemų derinimas gali būti iššūkis, ypač kai kalbame apie sudėtingus karkasus kaip React. Šiame vadove parodysiu, kaip efektyviai valdyti React programų derinimą naudojant Google Chrome kūrėjų įrankius. Atkreipsiu dėmesį į specifines technikas, kaip rasti ir ištaisyti dažniausias klaidas. Turi būti susipažinęs su React, kad galėtum suprasti šiuos koncepcijas.
Svarbiausios išvados
- Suprasti Šaltinių Žemėlapių vaidmenį derinant jūsų React programėlę.
- Nustatyti sąlyginės reikšmės taškus strateginėse vietose, kad galėtumėte sekti programos srautą.
- Analizuoti skambučių steką, kad suprastumėte, kurią funkciją kada kviečiama.
Žingsnis po žingsnio vadovas
Norėdami pradėti derinti, paruošiau paprastą React programėlės pavyzdį, kurioje yra du mygtukai, skirti padidinti skaitiklius. Norime įsitikinti, kad programėlės būklė teisingai atnaujinama.
Pirmiausia atidarykite Kūrėjų įrankius „Chrome“. Galite tai padaryti, spustelėdami dešinįjį pelės klavišą puslapį ir pasirenkant „Tirti“ arba tiesiog spustelėdami „F12“ klavišą.
Pirmuoju žingsniu įkraukite iš naujo savo React programėlę, kad būtumėte įsitikinę, jog dirbate su naujausia versija. Kai programėlė yra įkrauta, pamatysite du mygtukus skaitikliui. Pirmas mygtukas didina pirmąjį skaitiklį, o antras mygtukas - antrąjį.
Čia matote, kad spustelėjus mygtukus, skaitiklių reikšmės matomai didėja. Šias padidintas reikšmes galite kontroliuoti konsolėje, kurią taip pat rasite Kūrėjų įrankiuose. Tam paspauskite du kartus „Escape“, kad įjungtumėte ar išjungtumėte konsolę.
Kitame žingsnyje keisite savo programėlės kodą, ypač UseEffect Hook. UseEffect Hook naudojamas tvarkyti React pasekmes. Mano pavyzdyje nustatau jį taip, kad jis konsolėje rodytų dabartinę skaitiklio vertę. Taip užtikrinama, kad suprastumėte, kaip dažnai ši pasekmė yra sukeliamą.
Konsolėje galite sekti kodą ir patikrinti, ar reikšmės teisingai išvedamos. Tačiau jei nepagrįstai nurodote UseEffect priklausomybių masyvą, tai gali sukelti netikėtą elgesį.
Tai patikrinti, pašalinkite priklausomybių masyvą trumpam ir stebėkite, kas vyksta. Grįžkite į programėlę ir nustatykite sąlyginę reikšmę. Paspauskite skaičių kairėje, norėdami nustatyti sąlygą.
Dabar paspauskite pirmąjį mygtuką ir stebėkite, kaip vykdomas sustabdo nustatytas sustojimo taškas. Tai leidžia jums analizuoti programos būklę, kai vykdomas paspaudimo tvarkytuvas.
Sužinokite, kad spustelėjus kiekvieną kartą būklė tik pakankamai atnaujinama tik ant mygtuko, kuris buvo paspaustas. Tačiau paspaudus ant kito mygtuko, pastebėsite, kad programos elgsena nebus tokia, kaip buvo tikėtasi.
Dabar pradėkite tirti klaidą. Pastebėsite, kad UseEffect kiekvienu atveju išveda ankstesnę skaitiklio vertę, net jei spustelėjote kitą skaitiklį.
Šioje vietoje turėtumėte vėl pridėti priklausomybių masyvą ir užtikrinti, kad jis turėtų dabartinę skaitiklio vertę kaip priklausomybę. Taip efektas bus aktyvuotas tik tada, kai keičiasi aktualus skaitiklis.
Jeigu pakartotinai įkrausite programą ir paspausite mygtukus, pamatysite, kad konsolėje informacija išvedama tik skaitiklio pasikeitimo metu. Pridėkite papildomą sąlyginio teiginio tašką savo Console.Log nurodyme, kad patikrintumėte, ar ten išvedamos tikėtos reikšmės.
Atkreipkite dėmesį, kad React kodo rodyme yra parinktis „Rodyti ignoruojamas rėmelių“ (Show ignore listed Frames-Option). Tai gali būti naudinga, kad bibliotekų kodai neatsirastų skambučių stekoje, kas galėtų sutrikdyti jūsų analizę.
Pataisius klaidą, būtų naudinga ją dar kartą patikrinti. Čia vėl įsitikinkite, kad kodas spaudimo funkcionalumas vėl būtų išbandytas, kad patvirtintumėte, jog pakeitimas turi norimą poveikį.
Be to, strategiškai galite įdėti pertraukas įvairiose pokalbių vietose ir toliau tirti funkcijų iškvietimus. Tuo metu reguliariai patikrinkite skambučių steką, kad atsektumėte visas funkcijas, kurios buvo iškviestos tam tikru momentu.
Debesime, kad asinchroniniai veiksmai gali lemti vietinės būsenos praradimą, todėl svarbu reguliariai patikrinti skambučių steką, kad išlaikytumėte apžvalgą apie savo React programėlės būseną.
Išvados
Šiame vadove išmokote, kaip svarbūs „Chrome Developer Tools“ yra efektyviam „React“ programų derinimui. Pertraukos nustatymas ir skambučių steko analizė yra esminiai žingsniai norint suprasti savo kodo srautą ir išspręsti problemas. Teisingai valdydami priklausomybes „UseEffect“, galite užtikrinti, kad jūsų programėlė rodytų norimą būseną.
Dažnai užduodami klausimai
Kas yra pertrauka?Pertrauka yra taškas kode, kuriame programos vykdymas sustoja, kad būtų nagrinėjamas dabartinis vykdymas.
Kaip naudotis priklausomybių masyvu „UseEffect“?Priklausomybių masyvas leidžia nurodyti, kurios kintamosios turėtų išprovokuoti efektą, kai jos pasikeičia.
Kas yra šaltinių žemėlapiai?Šaltinių žemėlapiai sujungia suspaustą ir transpiliuotą kodą su originaliu kodu, todėl derinimas palengvėja.
Kaip stebėti asinchroninius veiksmus skambučių stekoje?Atkreipkite dėmesį, kad asinchroniniai skambučiai naudojant „SetTimeout“ arba žadus gali paveikti programos būseną ir gali padaryti vietines kintamąsias nepasiekiamas tam tikru momentu.
