15 reaguokite į geriausią praktiką, kurios turite laikytis 2020 m

Reaguokite į geriausią praktiką


Jei esate fasadų kūrėjas, užsiimantis labai interaktyvių vartotojo sąsajų kūrimu, greičiausiai į savo priemonių rinkinį įtraukėte „Reaguoti“. Dirbdami prie savo „React“ sukurtų kūrinių, turėtumėte būti atsargūs, darydami dalykus, laikydamiesi geriausios „React“ praktikos. Tai padės geriau sutvarkyti jūsų kodą.

Kaip žinote, „React“ yra „Facebook“ sukurta biblioteka, leidžianti integruotis su daugeliu įdomių komponentų. Tiesą sakant, bet kuris kūrėjas gali sukurti savo komponentus ir padaryti juos prieinamus bendruomenei.

Šiandien mes imame galvos ir parodysime jums svarbiausia „React“ geriausia praktika:

�� 1. Laikykite komponentus mažus ir būdingus tik tam tikrai funkcijai

Kaip mes visi žinome, naudodamiesi „React“, galima turėti didžiulius komponentus, kurie atlieka daugybę užduočių. Bet geresnis komponentų projektavimo būdas yra išlaikyti juos mažus, kad vienas komponentas atitiktų vieną funkciją. Idealiu atveju vienas komponentas turėtų pateikti tam tikrą jūsų puslapio bitą arba pakeisti tam tikrą elgesį. Tam yra daug privalumų:

  • Konkrečioms funkcijoms būdingi komponentai gali būti atskiri, todėl testavimas ir priežiūra tampa lengvesni.
  • Kiekvienas mažas komponentas gali būti pakartotinai panaudotas keliems projektams.
  • Komponentai, atliekantys bendrąsias funkcijas, gali būti prieinami bendruomenei.
  • Naudojant mažesnius komponentus, lengviau optimizuoti našumą.
  • Lengviau atnaujinti mažesnius komponentus.
  • Didesni komponentai turi būti sunkesni ir gali būti sunkiai prižiūrimi.

Pusiausvyra tarp vieno glaustaus komponento ir kelių funkcijai būdingų komponentų sukūrimo kiekvienoje organizacijoje gali skirtis. Galų gale, jūs galite turėti tiek komponentų, kiek norite, ir derinti juos bet kokiu būdu, jei norite pasiekti tą patį galutinį rezultatą.

♻️ 2. Svarbu pakartotinio naudojimo galimybė, todėl kuo mažiau kurkite naujų komponentų

Laikydamiesi vienos funkcijos = vieno komponento taisyklės, galite pagerinti komponentų pakartotinį naudojimą. Tai reiškia, kad turėtumėte praleisti bandymą sukurti naują funkcijos komponentą, jei jau yra tos funkcijos komponentas.

Pakartotinai panaudodami komponentus visame savo projekte ar daugybėje kitų projektų, ne tik pasieksite nuoseklumo, bet ir prisidėsite prie bendruomenės.

Kita vertus, jei kuris nors komponentas tampa didžiulis, sunkus ir sunkiai prižiūrimas, geriau jį suskaidyti į tiek, kiek reikia mažesnių komponentų.

Pvz., Netgi galite eiti toliau ir sukurti mygtuką „Button“, kuris galėtų valdyti piktogramas. Tada kiekvieną kartą, kai jums reikia mygtuko, turėsite komponentą, kurį naudosite. Padarę jį labiau moduliniu, galėsite apimti daugybę atvejų tuo pačiu kodo fragmentu. Jūs turite nusitaikyti kažkur per vidurį. Jūsų komponentai turėtų būti pakankamai abstraktūs, tačiau neturėtų būti pernelyg sudėtingi.

klasės „IconButton“ pratęsia „React.Component“ {
[…]
pateikti () {
grįžti (

);
}
}

�� 3. Sujungti dublikatą – išdžiovinkite savo kodą

Įprasta viso kodo taisyklė yra kuo trumpesnė ir glausta.

Čia taip pat nesiskiria, nes „React“ geriausia praktika taip pat nurodo, kad kodas būtų trumpas ir tikslus. Vienas iš būdų tai padaryti yra vengti dubliavimosi – „Nekartokite savęs“ (DRY).

Tai galite pasiekti patikrinę modelį ir panašumus. Jei radote, galite pakartoti kodą, todėl galite išvengti dubliavimosi. Labiausiai tikėtina, kad šiek tiek perrašius, tai gali būti glausta.

Tai labai priklauso nuo pakartotinio panaudojimo principo „React“ sistemoje. Tarkime, kad norite pridėti kelis mygtukus, kuriuose yra piktogramų, užuot pridėję kiekvieno mygtuko žymėjimą, galite tiesiog naudoti „IconButton“ komponentą, kurį rodėme aukščiau. Jūs netgi galėjote žengti toliau, viską suplanuodami į masyvą.

const mygtukai = [‘facebook’, ‘twitter’, ‘youtube’];

grįžti (

{
mygtukai.map ((mygtukas) => {
grįžti (

);
})
}

);

�� 4. Įdėkite CSS į „JavaScript“

Pradėjus dirbti prie projekto, įprasta visus CSS stilius laikyti viename SCSS faile. Visuotinio priešdėlio naudojimas užkerta kelią galimam vardų susidūrimui. Tačiau kai jūsų projektas padidėja, šis sprendimas gali būti neįmanomas.

Yra daug bibliotekų, leidžiančių rašyti CSS JS. JausmaiJS ir Spalvingi yra dvi populiariausios CSS JS bibliotekose.

Čia yra „EmotionJS“ panaudojimo jūsų projekte pavyzdys. „EmotionJS“ gali sugeneruoti visus CSS failus jūsų produkcijai. Pirmiausia įdiekite „EmotionJS“ naudodami npm.

npm įdiegti – išsaugoti @ emocija / branduolys

Tada turite į savo programą importuoti „EmotionJS“.

importuoti {jsx} iš „@ emotion / core“

Galite nustatyti elemento savybes, kaip parodyta žemiau esančiame fragmente:

tegul komponentas = rekvizitai => {
grįžti (

)
}

Čia yra nuoroda į pilną „EmotionJS“ dokumentacija.

Comment 5. Komentuokite tik ten, kur reikia

Pridėkite komentarus prie kodo tik ten, kur reikia. Tai ne tik laikosi geriausios „React“ praktikos, bet ir tuo pačiu atlieka du tikslus:

  • Tai užtikrins, kad kodas netrukdytų.
  • Vengsite galimo komentaro ir kodo prieštaravimo, jei kodą pakeisite vėliau.

Name 6. Pavadinkite komponentą po funkcijos

Verta pavadinti komponentą pagal jo vykdomą funkciją, kad jis būtų lengvai atpažįstamas.

Pavyzdžiui, „ProductTable“ – jis akimirksniu perteikia tai, ką daro komponentas. Kita vertus, jei komponentą pavadinsite pagal kodo poreikį, tai gali jus supainioti ateityje..

Kitas pavyzdys – geriau pavadinti komponentą „Avataras“, kad jį būtų galima naudoti bet kur – autoriams, vartotojams ar komentaruose. Vietoj to, jei pavadintume komponentą „AuthorAvatar“ jo naudojimo kontekste, mes apribotume to komponento naudingumą.

Be to, pavadindami komponentą po funkcijos, jis tampa naudingesnis bendruomenei, nes jis labiau tikėtinas.

Component 7. Komponentų pavadinimams naudokite didžiosios raidės

Jei, kaip ir dauguma žmonių, naudojate JSX („JavaScript“ plėtinį), jūsų kuriami komponentų pavadinimai turi prasidėti didžiosiomis raidėmis. Pvz., Komponentus vadinsite „SelectButton“, o ne „Select Button“ arba „Menu“, o ne meniu. Mes darome tai taip, kad JSX galėtų juos atpažinti kitaip nei numatytąsias HTML žymas.

Ankstesnėse „React“ versijose buvo visų įtaisytų vardų sąrašas, kad jie būtų atskirti nuo pasirinktinių pavadinimų. Kadangi sąrašą reikėjo nuolat atnaujinti, jis buvo pašalintas ir didžiosios raidės tapo norma.

Jei JSX nėra jūsų pasirinkta kalba, galite naudoti mažąsias raides. Tačiau tai gali sumažinti komponentų pakartotinį naudojimą už jūsų projekto ribų.

Mind 8. Atminkite kitus įvardijimo būdus

Kai dirbate su „React“, paprastai naudojate JSX („JavaScript“ plėtinį) failus. Todėl bet kuris komponentas, kurį sukuriate „React“, turėtų būti įvardijamas Paskalio arba viršutinio kupranugario dėka. Tai reiškia, kad vardai be tarpų ir kiekvieno žodžio didžiosios raidės yra didžiosios.

Jei norite sukurti funkciją, pateikiančią formą, turėtumėte pavadinti ją „SubmitForm“ didžiosiomis kupranugario raidėmis, o ne pateikti „Form “,„ Submit_form “arba„ Submit_form “. Viršutinis kupranugario atvejis labiau vadinamas Paskalio atveju. Čia yra dar daugiau pavyzdžių sąrašas kintamųjų ir funkcijų pavadinimų skaičius Pascal atveju.

�� 9. Atskirkite valstybinius aspektus nuo perteikimo

Komponentai, esantys „React“, gali būti valstybiniai arba neturintys jokio valstybės statuso. Valstybiniai komponentai saugo informaciją apie komponento būseną ir pateikia reikiamą kontekstą. Priešingai, komponentai be pilietybės neturi atminties ir negali suteikti konteksto kitoms vartotojo sąsajos dalims. Jie gauna tik rekvizitus (įvestis) iš pagrindinio komponento ir grąžina jums JSX elementus. Jie yra keičiami ir daugkartinio naudojimo bei panašūs į gryną „JavaScript“ funkciją.

Viena iš „React“ geriausių praktikų yra saugoti jūsų valstybinę duomenų įkėlimo logiką nuo pateikimo be pilietybės logikos. Geriau turėti vieną valstybinį komponentą duomenims įkelti, o kitą komponentą be pilietybės tiems duomenims rodyti. Tai sumažina komponentų sudėtingumą.

Vėlesnės „React“ versijos v16.8 turi naują funkciją – „React Hooks“, kurios rašo būsenas, susijusias su funkcija. Tai galiausiai gali panaikinti klasėje esančių komponentų poreikį.

Pvz., Jūsų programa gauna kai kuriuos duomenis apie prijungimą. Tai, ką norite padaryti, yra tvarkyti pagrindinio komponento duomenis ir perduoti sudėtingą perteikimo užduotį subkomponentui kaip rekvizitus.

importuoti „RenderTable“ iš „./RenderTable“;

klasės lentelė praplečia komponentą {
būsena = {pakrovimas: tiesa};

pateikti () {
const {loading, tableData} = this.state;
grąžinti pakrovimą? :;
}

komponentDidMount () {
fetchTableData (). tada (tableData => {
this.setState ({pakrovimas: klaidinga, tableData});
});
}
}

Code 10. Kodas turėtų būti vykdomas taip, kaip tikėtasi, ir būti išbandomas

Tikrai šiai taisyklei nereikia paaiškinti. Jūsų parašytas kodas turėtų elgtis taip, kaip tikėtasi, ir lengvai ir greitai išbandyti. Gera praktika yra pavadinti savo bandomuosius failus tapačiais šaltinio failais su .test priesaga. Tada bus nesunku rasti bandymo failus.

Galite naudoti JEST norėdami patikrinti savo „React“ kodą.

All 11. Visi failai, susiję su vienu komponentu, turėtų būti viename aplanke

Saugokite visus failus, susijusius su bet kuriuo komponentu, viename aplanke, įskaitant stiliaus failus.

Jei yra koks nors mažas komponentas, kurį naudoja tik tam tikras komponentas, prasminga šiuos mažesnius komponentus laikyti kartu tame komponentų aplanke. Tada hierarchiją bus nesunku suprasti – dideli komponentai turi savo aplanką, o visos mažesnės jų dalys yra padalijamos į pakatalogius. Tokiu būdu jūs galite lengvai išgauti kodą į bet kurį kitą projektą ar net modifikuoti kodą, kada tik norite.

Pavyzdžiui, visos formos sudedamosios dalys, tokios kaip CSS failai, piktogramos, vaizdai, testai ir kiti su forma susiję subkomponentai, turėtų būti tame pačiame aplanke. Jei failus pavadiniate protingai, o susijusius failus laikote logiškai, jums nebus sunku juos rasti vėliau.

�� 12. Naudokite tokias priemones kaip „Bit“

Viena iš geriausių „React“ praktikų, padedančių organizuoti visus jūsų „React“ komponentus, yra tokių įrankių kaip Šiek tiek.

Šios priemonės padeda išlaikyti ir pakartotinai naudoti kodą. Be to, tai padeda kodui tapti aptinkamam ir skatina komandos bendradarbiavimą kuriant komponentus. Be to, kodą galima sinchronizuoti visuose projektuose.

Use 13. Naudokite fragmentų bibliotekas

Kodo fragmentai padeda neatsilikti nuo geriausios ir naujausios sintaksės. Jie taip pat padeda užtikrinti, kad jūsų kodas būtų gana laisvas, taigi tai yra viena iš „React“ geriausių praktikų, kurių neturėtumėte praleisti.

Yra daugybė fragmentų bibliotekų, kurias galite naudoti, pvz., „ES7 React“, „Redux“, JS fragmentai ir kt..

✍️ 14. Parašykite visų kodų testus

Bet kuria programavimo kalba tinkamas testavimas užtikrina, kad kiekvienas jūsų projektui pridėtas naujas kodas gerai integruojamas su esamu kodu ir nepažeidžia esamų funkcijų. Patartina parašyti bet kokio naujo jūsų sukurto komponento testus. Kaip gerą praktiką turėtumėte sukurti __Test__ katalogą savo komponento kataloge, kad apimtų visus susijusius testus.

Galite iš esmės padalinti „React“ testus į dvi dalis: komponentų funkcionalumo patikrinimą naudodami „React“ programą ir visos programos testus, kai jie tampa naršyklėje. Pastarosios kategorijos bandymams galite naudoti kelių naršyklių testavimo įrankius.

Pirmajam galite naudoti „JavaScript“ bandomąjį bėgiklį, Džestas mėgdžioti HTML DOM, naudodamas jsdom, norėdamas išbandyti „React“ komponentus. Nors visiškai tikslus testas įmanomas tik naršyklėje realiame įrenginyje, „Jest“ pateikia gerą apytikslę tikrąją testavimo aplinką jūsų projekto kūrimo etape..

�� 15. Laikykitės dažymo taisyklių, pertraukite linijas, kurios yra per ilgos

Vėrinimas yra procesas, kuriame vykdome programą, analizuojančią kodą, ar nėra galimų klaidų.

Dažniausiai jį naudojame su kalba susijusioms problemoms spręsti. Bet tai taip pat gali automatiškai išspręsti daugelį kitų problemų, ypač kodo stilių. Naudodamiesi sąrašu „React“ kode, jūsų kodas bus gana laisvas ir be klaidų.

Paskutiniai žodžiai apie „reaguoti“ geriausią praktiką

Tikiuosi, kad šis „React“ geriausios praktikos sąrašas padės jums tinkamai įgyvendinti savo projektus ir išvengti galimų problemų vėliau..

Jei turite klausimų, susijusių su „React“, nedvejodami pateikite juos toliau pateiktuose komentaruose.

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

Kodo pavyzdžiai: Andrei Băicuș. Turinio atnaujinimus pateikė Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map