15 reageeri parimatele tavadele, mida peate järgima 2020. aastal

Reageeri parimatele tavadele


Kui olete esiplaanil töötav arendaja, kes tegeleb väga interaktiivsete kasutajaliideste loomisega, olete tõenäoliselt oma tööriistakomplekti lisanud reaalaja. Reaktisega töötavate loomingute kallal töötades peaksite olema ettevaatlik, et asjad toimuksid vastavalt Reakti parimatele tavadele. See aitab teie koodi paremini korraldada.

Nagu teate, on React Facebooki loodud raamatukogu ja see võimaldab integreerida paljude huvitavate komponentidega. Tegelikult saab iga arendaja luua oma komponendid ja muuta need kogukonnale kättesaadavaks.

Täna võtame teema teema ette ja näitame teile Reaxi parimate tavade kõige põhilisem:

�� 1. Hoidke komponendid väikesed ja funktsioonispetsiifilised

Nagu me kõik teame, on Reaktis võimalik saada tohutuid komponente, mis täidavad mitmeid ülesandeid. Kuid parem viis komponentide kujundamiseks on hoida need väikesed, nii et üks komponent vastab ühele funktsioonile. Ideaalis peaks üks komponent renderdama teie lehe kindla biti või muutma konkreetset käitumist. Sellel on palju eeliseid:

  • Funktsioonipõhised komponendid võivad olla eraldiseisvad, mis muudab testimise ja hoolduse lihtsamaks.
  • Iga väikest komponenti saab kasutada mitme projekti raames.
  • Üldfunktsioone täitvaid komponente saab kogukonnale kättesaadavaks teha.
  • Väiksemate komponentidega on jõudluse optimeerimine lihtsam.
  • Väiksemate komponentide värskendamine on lihtsam.
  • Suuremad komponendid peavad töötama raskemalt ja neid võib olla keeruline hooldada.

Tasakaal ühe lühikese komponendi ja mitme funktsioonispetsiifilise komponendi loomise vahel võib organisatsiooniti erineda. Lõppude lõpuks võib teil olla nii palju komponente kui soovite ja neid lõpptulemuse saavutamiseks võite igal viisil uuesti ühendada.

♻️ 2. Korduvkasutatavus on oluline, nii et hoidke uute komponentide loomist minimaalses ulatuses

Järgides reegli üks funktsioon = üks komponent, saate parandada komponentide korduvkasutatavust. See tähendab, et peaksite vahele jätma funktsiooni uue komponendi loomise, kui selle funktsiooni jaoks komponent on juba olemas.

Kasutades komponente kogu projekti või paljude projektide kaudu, saavutate mitte ainult järjepidevuse, vaid panustate ka kogukonda.

Teisest küljest, kui mõni komponent muutub tohutuks, raskeks ja raskesti hooldatavaks, on parem jagada see nii paljudeks väiksemateks komponentideks kui vaja.

Näiteks võite minna isegi kaugemale ja luua nupu komponendi, mis saab hakkama ikoonidega. Seejärel on teil iga kord, kui vajate nuppu, mõni komponent, mida kasutada. Moodulisemaks muutmine võimaldab teil paljudel juhtudel katta sama kooditükiga. Peate sihtima kuskile keskele. Teie komponendid peaksid olema piisavalt abstraktsed, kuid ei tohiks olla liiga keerulised.

klass IconButton laiendab React.Component {
[…]
renderdama () {
tagasi (

);
}
}

�� 3. Topeltkoodi koondamine – kuivatage oma kood ära

Kõigi koodide üldine reegel on see, et see oleks võimalikult lühike ja sisutihe.

Ka siin pole vahet, sest ka Reakti parimad tavad juhendavad teid koodi lühikest ja täpset hoidma. Üks viis selleks on dubleerimise vältimine – ärge korrake ennast (kuivatage).

Selle saavutamiseks võite kontrollida mustrite ja sarnasuste koodi. Kui leiate, siis võite koodi korrata ja dubleerimise on võimalik vältida. Tõenäoliselt võib natuke ümberkirjutamist muuta selle kokkuvõtlikumaks.

See sõltub suuresti Reakti korduvkasutatavuse põhimõttest. Oletame, et soovite lisada mitu nuppu, mis sisaldavad ikoone, selle asemel, et igale nupule juurde lisada märgistus, võite lihtsalt kasutada komponenti IconButton, mida me ülal näitasime. Võite isegi minna kaugemale, kaardistades kõik massiivi.

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

tagasi (

{
nupud.map ((nupp) => {
tagasi (

);
})
}

);

�� 4. Pange CSS JavaScripti

Kui hakkate projekti kallal töötama, on tavaks hoida kõiki CSS-i stiile ühes SCSS-failis. Globaalse prefiksi kasutamine hoiab ära nime võimalikud kokkupõrked. Kui teie projekt suureneb, ei pruugi see lahendus siiski teostatav olla.

On palju raamatukogusid, mis võimaldavad teil JS-is CSS-i kirjutada. EmotsioonJS ja Glamuurne on kaks kõige populaarsemat CSS-i JS-i raamatukogudes.

Siin on näide EmotionJS-i kasutamisest oma projektis. EmotionJS võib teie tootmiseks genereerida täielikke CSS-faile. Esiteks installige EmotionJS, kasutades npm.

npm install –save @ emotsioon / tuum

Järgmisena peate oma rakendusse importima EmotionJS.

{jsx} importimine emotsioonist / tuumast

Elemendi atribuudid saate määrata vastavalt allolevale lõigule:

las Komponent = rekvisiidid => {
tagasi (

)
}

Siin on link täielikule EmotionJS dokumentatsioon.

�� 5. Kommenteerige ainult vajadusel

Lisage kommentaarid koodiga ainult vajadusel. See ei ole ainult kooskõlas Reakti parimate tavadega, vaid teenib samal ajal ka kahte eesmärki:

  • See hoiab koodi visuaalselt segamini.
  • Vältite potentsiaalset vastuolu kommentaari ja koodi vahel, kui muudate koodi hiljem.

6. Pange funktsioonile nimi

Komponent on hea nimetada funktsiooni järgi, mida see täidab, et see oleks hõlpsasti äratuntav.

Näiteks ProductTable – see annab kohe teada, mida komponent teeb. Teisest küljest, kui nimetate komponendi koodi vajaduse järgi, võib see teid tulevikus ajadusse ajada.

Veel üheks näiteks on soovitatav nimetada komponendiks Avatar, nii et seda saaks kasutada kõikjal – autorite, kasutajate või kommentaaridena. Selle asemel, kui nimetame komponendi AutorAvatar selle kasutamise kontekstis, piiraksime selle komponendi kasulikkust.

Komponendi nimetamine funktsiooni järel muudab selle kogukonnale kasulikumaks, kuna see on tõenäolisem, et see avastatakse.

�� 7. Komponentide nimede jaoks kasutage suurtähti

Kui kasutate nagu enamik inimesi, JSX-i (JavaScripti laiend), peavad loodud komponentide nimed algama suurtähtedega. Näiteks nimetage komponente valimisnupu asemel nupuks Vali nupp või menüü asemel menüüks Menüü. Teeme seda nii, et JSX saaks neid tuvastada erinevalt vaike HTML-siltidest.

Varasemates Reaketi versioonides oli kõigi sisseehitatud nimede loend, et eristada neid kohandatud nimedest. Kuid kuna nimekiri vajas pidevat ajakohastamist, lammutati see ära ja pealinnadest sai norm.

Kui JSX pole teie valitud keel, võite kasutada väiketähti. Kuid see võib vähendada komponentide korduvkasutatavust väljaspool teie projekti.

�� 8. Pidage meeles teisi nimetamise tavasid

Reaketiga töötades kasutate üldiselt JSX (JavaScripti laiendus) faile. Kõik komponendid, mille loote Reacti jaoks, tuleks seetõttu nimetada Pascali või ülemise kaameli puhul. See tähendab tühikuteta nimesid ja iga sõna suurtähtedega suurtähti.

Kui soovite luua vormi edastava funktsiooni, peaksite selle nimetama kaameli suurtäheks SubmitForm, mitte SubmitForm, Submit_form või Submit_form. Ülemist kaameli juhtumit nimetatakse sagedamini Pascali juhtumiks. Siin on veel üks näidete loetelu muutujate ja funktsioonide nimede arv Pascali juhul.

�� 9. Eraldage riiklikud aspektid renderdamisest

Reaktis olevad komponendid võivad olla riiklikud või kodakondsuseta. Riiklikud komponendid salvestavad teavet komponendi oleku kohta ja pakuvad vajalikku konteksti. Seevastu kodakondsuseta komponentidel pole mälu ja need ei anna konteksti teistele kasutajaliidese osadele. Nad võtavad vanemkomponendilt vastu ainult rekvisiite (sisendeid) ja tagastavad teile JSX elemendid. Need on skaleeritavad ja korduvkasutatavad ning sarnased JavaScripti puhta funktsiooniga.

Üks Reaxi parimatest tavadest on hoida oma riiklikku andmete laadimise loogikat kodakondsusetuks muutmise loogikast eraldi. Parem on andmete laadimiseks üks olekukas komponent ja teine ​​kodakondsuseta komponent nende andmete kuvamiseks. See vähendab komponentide keerukust.

Hilisematel Reacti versioonidel v16.8 on uus funktsioon – React Hooks, mis kirjutavad olekuga funktsioonidega seotud komponente. See võib lõpuks kaotada vajaduse klassipõhiste komponentide järele.

Näiteks tõmbab teie rakendus mõnda teavet kinnituse kohta. Mida soovite teha, on hallata põhikomponendi andmeid ja edastada keerukas renderdusülesanne alamkomponendile rekvisiitidena.

importige RenderTable kataloogist ‘./RenderTable’;

klassitabel laiendab komponenti {
olek = {laadimine: tõsi};

renderdama () {
const {loading, tableData} = this.state;
laadimist tagasi? :;
}

komponentDidMount () {
fetchTableData (). siis (tableData => {
this.setState ({laadimine: vale, tableData});
});
}
}

10. Kood peaks toimima ootuspäraselt ja olema testitav

Tõesti, see reegel ei vaja selgitust. Teie kirjutatud kood peaks käituma ootuspäraselt ning olema kergesti ja kiiresti kontrollitav. Hea tava on nimetada oma testfailid identseteks lähtefailidega .test järelliidetega. Seejärel on testifaile lihtne leida.

Saate kasutada JEST-i oma React-koodi testimiseks.

�� 11. Kõik ühe komponendiga seotud failid peaksid olema ühes kaustas

Hoidke kõiki ühe komponendiga seotud faile ühes kaustas, sealhulgas stiilifaile.

Kui on mõni väike komponent, mida kasutab ainult konkreetne komponent, on mõistlik hoida neid väiksemaid komponente koos selle komponendi kausta. Seejärel on hierarhia hõlpsasti mõistetav – suurtel komponentidel on oma kaust ja kõik nende väiksemad osad on jagatud alamkaustadeks. Nii saate koodi hõlpsalt ekstraheerida mis tahes muusse projekti või isegi muuta koodi igal ajal, kui soovite.

Näiteks vormi komponendi puhul peaksid kõik tükid, näiteks CSS-failid, ikoonid, pildid, testid ja muud vormiga seotud alamkomponendid asuma samas kaustas. Kui nimetate faile mõistlikult ja hoiate nendega seotud faile loogiliselt koos, pole teil hiljem raskusi nende leidmisega.

�� 12. Kasutage selliseid tööriistu nagu Bit

Üks Reaxi parimaid tavasid, mis aitab kõiki teie Reaxi komponente korraldada, on selliste tööriistade kasutamine nagu Natuke.

Need tööriistad aitavad koodi säilitada ja taaskasutada. Lisaks aitab see koodil leitavaks muutuda ja edendab meeskondade koostööd komponentide ehitamisel. Samuti saab koodi sünkroonida projektide vahel.

�� 13. Kasutage katkendite teeke

Koodilõigud aitavad teil olla kursis parima ja värskeima süntaksiga. Samuti aitavad need teie koodi suhteliselt veavabalt hoida, nii et see on üks Reaxi parimaid tavasid, millest ei tohiks ilma jääda..

Seal on palju katkendite teeke, mida saate kasutada, näiteks ES7 React, Redux, JS Fragmentid jne..

✍️ 14. Kirjutage kõigi koodide testid

Mis tahes programmeerimiskeeles tagab piisav testimine, et iga teie projekti lisatud uus kood integreerub hästi olemasoleva koodiga ega riku olemasolevat funktsionaalsust. Tasub kirjutada testid iga teie loodud uue komponendi jaoks. Hea tava kohaselt peaksite kõigi asjakohaste testide jaoks oma komponendi kataloogis looma kataloogi __Test__.

Reakti testid saate laias laastus jagada kaheks osaks: komponentide funktsionaalsuse testimiseks Reacti rakenduse abil ja testid kogu rakendusega, kui see brauseris kuvatakse. Viimase kategooria testide jaoks saate kasutada brauseriüleseid testimisriistu.

Esimeste jaoks võite kasutada JavaScripti testijooksjat, Jest HTML-i domeeni jäljendamiseks, kasutades jsdomi Reacti komponentide testimiseks. Kui täiesti täpne testimine on võimalik ainult reaalse seadme brauseris, pakub Jest teie projekti arendusetapis hea lähenemise tegelikule testimiskeskkonnale..

�� 15. Järgige värvimisreegleid, katkestage liiga pikad read

Lintimine on protsess, kus käitame programmi, mis analüüsib võimalike vigade koodi.

Enamasti kasutame seda keelega seotud küsimustes. Kuid see võib parandada ka paljusid muid probleeme, eriti koodistiili. Vooderduse kasutamine oma React-koodis aitab hoida koodi suhteliselt vigadeta.

Lõppsõna reaalajas parimate tavade kohta

Loodan, et see Reaxi parimate tavade loetelu aitab teil projektid õigele teele suunata ja vältida võimalikke probleeme hiljem.

Kui teil on Reactiga seotud küsimusi, esitage need allpool esitatud kommentaarides.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Andrei Băicuși koodinäited. Sisu värskendused esitas 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