15 reagál a 2020-ban követendő bevált gyakorlatokra

Reagáljon a legjobb gyakorlatokra


Ha Ön előlapi fejlesztő, amely nagyon interaktív felhasználói felületek készítésével foglalkozik, akkor valószínűleg a Reaktív szerepelt az eszközkészletben. A React-alapú alkotásainak kidolgozásakor ügyeljen arra, hogy a React bevált gyakorlatainak megfelelően dolgozzon. Ez elősegíti a kód jobb szervezését.

Mint tudod, a React egy Facebook által létrehozott könyvtár, amely számos érdekes összetevővel integrálható. Valójában bármely fejlesztő létrehozhatja saját összetevőit, és elérhetővé teszi azokat a közösség számára.

Ma vesszük a témát, és megmutatjuk a React bevált gyakorlatainak legalapvetőbb elemei:

�� 1. Tartsa az alkatrészeket kicsiben és funkcióspecifikusan

Mint mindannyian tudjuk, a React segítségével hatalmas komponensek is lehetnek, amelyek számos feladatot végrehajtanak. Az összetevők megtervezésének jobb módja az, ha kicsiben tartják őket, hogy egy elem megfeleljen egy funkciónak. Ideális esetben egy összetevőnek megjelenítenie kell az Ön oldalának egy bizonyos részét, vagy módosítania kell egy adott viselkedést. Ennek számos előnye van:

  • A funkcióspecifikus alkatrészek önállóak lehetnek, ami megkönnyíti a tesztelést és a karbantartást.
  • Minden apró elem felhasználható több projektben.
  • Az általános funkciókat végrehajtó alkatrészek a közösség rendelkezésére bocsáthatók.
  • Kisebb alkatrészekkel könnyebb végrehajtani a teljesítmény-optimalizálást.
  • Könnyebb frissíteni a kisebb összetevőket.
  • A nagyobb alkatrészek nehezebben teljesítenek, és nehéz lehet karbantartani.

Az egy tömör összetevő és a több funkcióspecifikus összetevő létrehozása közötti egyensúly szervezetenként változhat. Végül is annyi komponenst tartalmazhat, amennyit csak akar, és bármilyen módon újratervezheti azokat, amelyekkel ugyanazt a végeredményt szeretné elérni.

♻️ 2. Fontos az újrafelhasználhatóság, ezért tartsa be az új összetevők létrehozását a szükséges minimumon

Ha betartja az egyik funkció = egy komponens szabályát, javíthatja az összetevők újrafelhasználhatóságát. Ez azt jelenti, hogy el kell hagynia egy funkció új elemének felépítését, ha már létezik egy elem a funkcióhoz.

Ha a komponenseket újra felhasználja a projekten vagy számos projekten keresztül, akkor nemcsak a következetességet fogja elérni, hanem a közösséghez is hozzájárul majd.

Másrészt, ha valamelyik elem hatalmas, nehézkes és nehezen karbantartható, jobb, ha azt kisebb részre osztja fel, amennyire szükség van.

Például még továbbléphet és létrehozhat egy Button összetevőt, amely képes kezelni az ikonokat. Ezután minden alkalommal, amikor gombra van szüksége, lesz egy komponense, amelyet használni szeretne. Modulárisabbá tétele lehetővé teszi, hogy sok esetet ugyanazzal a kóddal fedje le. Valahol a közepén kell céloznod. Az összetevőknek elég elvontnak kell lenniük, de nem lehetnek túlságosan összetettek.

osztály IconButton kiterjeszti a React.Component {
[…]
Vakol() {
Visszatérés (

);
}
}

�� 3. Konszolidálja a másodpéldányt – SZÁRÍTSA ki a kódot

Valamennyi kód általános szabálya, hogy a lehető legrövidebb és tömörebb legyen.

Itt sem különbözik, mivel a React bevált gyakorlata azt is utasítja, hogy a kód rövid és pontos legyen. Ennek egyik módja a párhuzamos munkavégzés elkerülése – ne ismételje meg önmagát (DRY).

Ezt úgy érheti el, ha megvizsgálja a kódot a minták és hasonlóságok szempontjából. Ha talál, lehetséges, hogy megismétli a kódot, és van lehetőség a duplikáció kiküszöbölésére. Valószínűsíthető, hogy egy kis átírás lehetővé teszi, hogy tömörebbé tegye.

Ez nagymértékben függ a React újrahasznosíthatóságának elvétől. Tegyük fel, hogy több gombokat is tartalmaz, amelyek ikonokat tartalmaznak, és nemcsak az egyes gombok jelöléseit, hanem egyszerűen használhatja a fent bemutatott IconButton összetevőt. Még tovább is haladhat, ha mindent tömbbe rendez.

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

Visszatérés (

{
gombok térkép ((gomb) => {
Visszatérés (

);
})
}

);

�� 4. Helyezze a CSS-t JavaScript-be

Amikor egy projekten dolgozik, általános gyakorlat, hogy az összes CSS-stílust egyetlen SCSS-fájlban tárolja. A globális előtag használata megakadályozza az esetleges név ütközéseket. Amikor azonban a projekt méretezõdik, ez a megoldás lehet, hogy nem kivitelezhetõ.

Sok könyvtár lehetővé teszi a CSS írását a JS-ben. EmotionJS és Elbűvölő a JS könyvtárakban a két legnépszerűbb CSS.

Íme egy példa az EmotionJS használatára a projektben. Az EmotionJS teljes CSS fájlokat hozhat létre a termeléshez. Először telepítse az EmotionJS programot az npm használatával.

npm install –save @ emotion / core

Ezután importálnia kell az EmotionJS-t az alkalmazásába.

{jsx} importálása az ‘@ érzelem / mag’

Beállíthatja az elem tulajdonságait az alábbi részlet szerint:

hadd komponens = kellékek => {
Visszatérés (

)
}

Itt található a teljes link link az EmotionJS dokumentációja.

�� 5. Csak kommentáljon, ha szükséges

Csak akkor csatolja a megjegyzéseket a kódhoz, ha szükséges. Ez nemcsak a React bevált gyakorlatainak felel meg, hanem egyszerre két célt is szolgál:

  • A kód vizuálisan rendetlenségétől mentes.
  • Kerülheti a potenciális ütközést a megjegyzés és a kód között, ha később megváltoztatja a kódot.

�� 6. Nevezze el az összetevőt a funkció után

Érdemes elnevezni egy összetevőt annak végrehajtása után, hogy könnyen felismerhető legyen.

Például a ProductTable – azonnal megmutatja, mit csinál az alkatrész. Másrészt, ha az összetevőt a kód igénye alapján nevezi el, akkor ez egy későbbi időpontban megzavarhatja Önt.

Egy másik példa, ha inkább elnevez egy komponens Avatárt, hogy bárhol felhasználható legyen – a szerzők, a felhasználók vagy a megjegyzések formájában. Ehelyett, ha elneveznénk az AuthorAvatar összetevőt annak használatával összefüggésben, akkor korlátoznánk az összetevő hasznosságát.

Ezen felül, ha egy összetevő elnevezése a függvény után, akkor hasznosabbá válik a közösség számára, mivel valószínűbb, hogy felfedezésre kerül.

�� 7. Használjon nagybetűket az összetevők nevéhez

Ha a legtöbb emberhez hasonlóan JSX-t (JavaScript kiterjesztés) használ, akkor a létrehozott összetevők nevének nagybetűvel kell kezdődnie. Például az összetevőket SelectButton néven, a Select gomb helyett, vagy a Menü menü helyett nevezheti el. Ezt úgy tesszük, hogy a JSX az alapértelmezett HTML-címkéktől eltérően azonosítsa őket.

A React korábbi verziói fenntartották az összes beépített név listáját, hogy megkülönböztessék őket az egyedi nevektől. Mivel azonban a listának folyamatos frissítésre volt szüksége, azt lebontották, és a nagybetűk váltak normává.

Ha a JSX nem az Ön által választott nyelv, használhat kisbetűket. Ez azonban csökkentheti az összetevők újrafelhasználhatóságát a projekten kívül.

�� 8. Vegye figyelembe a többi elnevezési konvenciót

A Reaktívan való munka során általában JSX (JavaScript kiterjesztés) fájlokat használ. Ezért minden olyan összetevőt, amelyet létrehozott a React számára, Pascal-esetben vagy felső teve-esetben kell nevezni. Ez azt jelenti, hogy szóköz nélküli nevek és minden szó első betűje nagybetűvel jelenik meg.

Ha olyan függvényt szeretne létrehozni, amely űrlapot nyújt be, akkor a teve nagybetűjében nevezze el SubmitForm-t, ne a SubmitForm, a Submit_form vagy a Submit_form helyett. A felső teve esetét általában Pascal-esetnek nevezik. Itt van egy további példák listája változó- és függvénynevek száma Pascal esetben.

�� 9. Válassza el az államszerű szempontokat a megjelenítéstől

A React komponensei lehetnek állapotok vagy állapotok is. Az állapotalapú komponensek információkat tárolnak az alkatrész állapotáról, és biztosítják a szükséges összefüggéseket. Ezzel szemben a hontalan komponenseknek nincs memória, és nem adhatnak összefüggéseket az UI más részeinek. Csak támaszokat (bemeneteket) fogadnak a szülő összetevőktől, és visszatérnek a JSX elemekhez. Skálázhatók és újrafelhasználhatók, és hasonlóak a JavaScript tiszta funkciójához.

A React egyik legjobb gyakorlata az, hogy az állapotalapú adatbetöltési logikáját külön tartsa az állapot nélküli logikától. Sokkal jobb, ha van egy állapotalapú elem az adatok betöltéséhez, és egy másik állapot nélküli komponens az adatok megjelenítéséhez. Ez csökkenti az összetevők bonyolultságát.

A későbbi React v16.8 verziók új funkcióval rendelkeznek – React Hooks, amelyek állapotfüggő összetevőket írnak. Ez végül kiküszöböli az osztályalapú komponensek szükségességét.

Például alkalmazásod bizonyos adatokat tölt be a csatlakoztatásról. Amit tenné, az a fő összetevőben lévő adatok kezelése, és a komplex megjelenítési feladat átadása kellékeknek egy alkomponensre.

import RenderTable a ‘./RenderTable’-ből;

osztálytábla kiterjeszti az összetevőt {
állapot = {betöltés: igaz};

Vakol() {
const {loading, tableData} = this.state;
berakodás? :;
}

komponentDidMount () {
fetchTableData ()., majd (tableData => {
this.setState ({betöltése: hamis, tableData});
});
}
}

�� 10. A kódnak a várt módon végre kell hajtania és ellenőrizhetőnek kell lennie

Valójában ez a szabály nem igényel magyarázatot. A beírt kódnak a vártnak kell lennie, és könnyen és gyorsan tesztelhetőnek kell lennie. Jó gyakorlat, ha a tesztfájlokat megegyezik a forrásfájlokkal .test utótaggal. Ezután könnyű megtalálni a teszt fájlokat.

A JEST segítségével ellenőrizheti a React kódot.

�� 11. Az összes elemhez kapcsolódó összes fájlnak egyetlen mappában kell lennie

Az összes alkatrészre vonatkozó fájlt, a stílusfájlokat is beleértve, tárolja egyetlen mappában.

Ha van valamilyen kicsi elem, amelyet csak egy adott elem használ, akkor érdemes ezeket a kisebb komponenseket együtt tartani az adott mappában. A hierarchia ekkor könnyen megérthető – a nagy összetevők megvannak a saját mappájuk, és minden kisebb részük almappákra van felosztva. Így bármilyen más projekthez könnyen kibonthatja a kódot, vagy bármikor módosíthatja a kódot, amikor csak akarja.

Például az Űrlap összetevőnél az összes elem, mint például a CSS fájlok, ikonok, képek, tesztek és az űrlappal kapcsolatos összes többi alkotóelemnek ugyanabban a mappában kell lennie. Ha ésszerűen nevez fájlokat, és logikusan tartja össze a kapcsolódó fájlokat, akkor nem lesz nehéz később megtalálni őket.

�� 12. Használjon olyan eszközöket, mint a Bit

Az összes olyan React legjobb gyakorlat, amely elősegíti az összes React összetevő megszervezését, az olyan eszközök használata, mint a Bit.

Ezek az eszközök elősegítik a kód karbantartását és újrafelhasználását. Ezen túlmenően elősegíti a kód felfedezésének lehetőségeit, és elősegíti a csapat együttműködését az alkatrészek építésében. A kód szinkronizálható a projektek között.

�� 13. Használjon kivonat-könyvtárakat

A kódrészletek segítnek lépést tartani a legújabb és legfrissebb szintaxissal. Segítik a kód viszonylag hibamentességét is, tehát ez a React egyik legjobb gyakorlata, amelyet ne hagyjon ki..

Számos kivonatkönyvtár létezik, például ES7 React, Redux, JS Snippets stb..

Write️ 14. Írjon teszteket minden kódra

Bármely programozási nyelven a megfelelő tesztelés biztosítja, hogy a projekthez hozzáadott új kód jól integrálódjon a meglévő kódhoz, és ne szakítsa meg a meglévő funkciókat. Jó ötlet teszteket írni a létrehozott új összetevőkre. Helyes gyakorlatként létre kell hoznia egy __Test__ könyvtárat az alkotóelem könyvtárában az összes vonatkozó teszt tárolására.

A React teszteit nagyjából feloszthatja két részre: az alkatrészek funkcionalitásának tesztelése a React alkalmazás használatával, és a teljes alkalmazás tesztelése, miután megjelenik a böngészőben. Az utóbbi kategóriában végzett teszteléshez használhat böngészőközi tesztelési eszközöket.

Az előbbihez használhat egy JavaScript tesztfutót, Tréfa a HTML DOM emulálása jsdom segítségével a React összetevők teszteléséhez. Míg egy teljesen pontos teszt csak valós eszköz böngészőjében lehetséges, a Jest a projekt fejlesztési szakaszában jó becslést ad a valós tesztelési környezetre..

15. Kövesse a befestési szabályokat, szétvágja a túl hosszú vonalakat

A villanás olyan folyamat, amelynek során olyan programot futtatunk, amely a potenciális hibák kódját elemzi.

Leginkább nyelvekkel kapcsolatos kérdésekben használjuk. De sok más kérdést is automatikusan kijavíthat, különösen a kódstílust. Ha egy vonalhasználatot használ a React kódban, ez segít abban, hogy a kód viszonylag hibamentes és hibamentes maradjon.

Végső szavak a legjobb reagálási gyakorlatról

Remélem, hogy a React bevált gyakorlatainak ez a listája segíteni fogja a projektek megfelelő útjára állításában, és később elkerülheti a lehetséges problémákat..

Ha bármilyen kérdése van a Reaktálással kapcsolatban, nyugodtan küldje el azokat az alábbi megjegyzésekben.

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Kód példák: Andrei Băicuș. Tartalomfrissítések: 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