2019 ReactJS bevált gyakorlatok

[frissítés, 2019. május 22.] - Adjon hozzá egy újabb bevált gyakorlatot a listához. Lásd alább.

[frissítés, 2019. május 19.] - Új cikket tettünk a Reduxról és a Redux-Thunkról. Egyszerűen magyarázva, sok példával.

[frissítés, 2019. július 23.] - Sok kérés miatt új cikket fogunk hozzáadni a ReactJS ANTIpatterns-ről. A linket itt közzétesszük. Kérjük, támogassa egy tapsolással. Köszönöm!

1. Kérjük, üdvözlettel, ReactJS

Az elmúlt öt évben a ReactJS népszerűsége gyorsan növekszik, és 2018 elejére népszerűbbé vált, mint a jQuery, legalább a Google keresések szempontjából. Nem fogjuk összehasonlítani az eszközöket a keresőmotorok iránti kereslet szempontjából; ez azonban egyértelmű megértést ad nekünk, hogy a ReactJS könyvtár határozottan népszerű. Ezzel összefüggésben beszéljünk a ReactJS használatáról jobb Front-End alkalmazások létrehozására.

Nagyon örülünk annak, hogy élvezi írásainkat. Tehát ha hasznosnak találja ezt a bejegyzést, érintse meg az alábbi gombot :)

Mi teszi annyira népszerűvé a ReactJS-t, hogy a Facebook létrehozta? Úgy gondoljuk, hogy annak oka, hogy a ReactJS egyszerűen dolgozik együtt. Könnyen megtanulható és a virtuális DOM használatával optimalizálva van a teljesítményre. A virtuális DOM megvalósításával a ReactJS egy renderelőmotornak kínál lehetőséget arra, hogy csak azokat az elemeket gyorsan újra megjelenítsék, amelyeket frissíteni kell. Ennek eredményeként a ReactJS fejlesztői gyorsan és kellemesen használható alkalmazásokat kapnak.

A ReactJS egy olyan könyvtár, amely JavaScriptet használ alkalmazásokat létrehozni. Ahhoz, hogy elindítson alkalmazásokat a ReactJS-ben, meg kell tanulnia annak API-ját és ismernie kell a JavaScriptet. A JavaScript valószínűleg a legnépszerűbb programozási nyelv manapság. A ReactJS lehetővé teszi a fejlesztők számára az alkalmazás modellezését és leírását a felhasználói felület komponenseiben. Tehát csak azt mondod, hogy mit tegyek, és a ReactJS tudja, hogyan kell csinálni.

Íme néhány tendencia az elmúlt öt évben a Google-tól:

Az egyik fő ReactJS koncepció az, hogy újrafelhasználható, összetartó összetevőket hoz létre, amelyek összeállíthatók és alkalmazást alkothatnak. Minden alkotóelemnek lehet saját állapota, kivéve, ha állapotmentes (erről bővebben később). A ReactJS összegyűjti az összes összetevőt egy vödörbe, és néhány olyan optimalizálási technikát alkalmaz, mint például a virtuális DOM, az alkalmazás hatékony megjelenítéséhez a böngészőben.

Kezdjük azzal, hogy tisztázzuk, mi az összetevő és mi nem. Az összetevő az UI önellátó, független része. Minden összetevő beágyazhat más összetevőket, ahol mindegyiknek megvan az állapota és az API. Megállapodás szerint az összetevőkkel kapcsolatos kódot egy adott mappában kell tartania. Ha az egyes összetevők összes fájlját egyetlen mappában tárolja, újrahasznosítható összetevőket hozhat létre, így felhasználhatja azokat a többi alkalmazásban.

2. A ReactJS komponensek típusai

A ReactJS komponensek négy fő típusa van:

  1. Állami teljes vagy osztályalapú alkatrészek
  2. Állapot nélküli vagy funkcióalapú komponensek
  3. Bemutató (vagy nagy sorrendű) komponensek
  4. Konténer alkatrészek

Az összetevők fajának előnyben részesített struktúrája a bal oldalon látható.

Állami teljes elemek vagy osztályalapú alkatrészek

Az állapot-teljes összetevőnek az állapota és az adatok hozzá vannak társítva az állapothoz. Az ilyen típusú összetevőn belül adatokat továbbíthat az állapot vagy objektumok segítségével. Az államilag teljes összetevőket szintén nehezebb támogatni, mivel bizonyos adatok megmaradnak, és megváltoztathatják az alkalmazás globális állapotát. Ezenkívül az államilag teljes összetevők általában osztályalapú összetevők, amelyek konstruktorral rendelkeznek (legjobb gyakorlatnak tekintik, ha az összetevő állapotát beállítják a konstruktorban).

Íme egy példa az állami teljes, osztályalapú ReactJS összetevőre:

A kellékek változhatatlanok és egyirányúak az államhoz kötve, és ezért nem változtathatja meg azokat az összetevőn belül. A kellékek használatával beállíthatja az összetevő állapotát, és megjelenítheti annak felhasználói felületét. Ha megpróbálja megváltoztatni a kellékeket az összetevőben, akkor típushiba jelenik meg.

Az állapot egy objektum, amely ki van téve egy összetevőnek. Az állami hatókör az összetevő belsejében korlátozódik, ahol azt deklarálják. Az összetevők inicializálhatják az állapotot, és átadhatják egy másik összetevőnek. Az állapotot kétféle módon deklarálhatjuk, kivitelező segítségével vagy állami tulajdonság deklarálásával. A második esetben ez csak a szintaktikus cukor, és az átültető (például Bábel) az állami vagyonnyilatkozatot a motorháztető alatt kivitelezővé teszi. Állam nélküli komponensek vagy függvényalapú komponensek, valamint a React Hooks a Funkcionális komponensek számára egyszerű JavaScript funkciók. A függvényalapú összetevők visszaadják a ReactJS elemet vagy gyűjteményt, amely lehet „részleges összetevő”, például <> ... , vagy teljesen funkcionális alapú összetevő logikával és beágyazott összetevőkkel. Mivel nem használhat konstruktort funkcionális alapú összetevőkben (jó, valójában így van, mivel a ReactJS v16.8), akkor az összetevőt nem lehet teljes állapotba állítani. Állapot nélküli, mert az ilyen típusú összetevőkben nem maradhat adat. Leggyakrabban a reklamációkat átadja a függvényalapú komponenseknek, hogy megjelenítsék az UI-t. Itt van egy példa az állapot nélküli, funkcióalapú ReactJS összetevőre:

A teljesítmény szempontjából gyakorlatilag nincs különbség az osztályalapú és a funkcióalapú komponensek használata között. A ReactJS megjelenítési mechanizmus elég okos ahhoz, hogy ezt számunkra optimalizáljuk.

A funkcionális alapú alkatrészekkel könnyebb dolgozni, és kényelmesebb a tesztelés. Ez az oka annak, hogy a ReactJS fejlesztői közösség arra ösztönzi Önt, hogy függvényalapú összetevőket írjon az osztályalapúak helyett. Az állam nélküli funkciófüggő komponenseknek vannak bizonyos korlátozásai, és alapvetően egy globális helynek kell lennie az állapot kezelésére. Ez különbözik a ReactJS írási komponensek paradigmájától (részletesebben lásd alább).

Annak lehetővé tétele érdekében, hogy a fejlesztők állapot-teljes, funkció-alapú összetevőket írjanak, és ezzel egyidejűleg lehetővé tegyék az állapot- és komponens-életciklus-módszerek használatát, a React v16.8 új funkcióval bővítette a React Hooks nevű elemet. Lényegében a React Hooks egy kísérlet az osztályalapú összetevők eltávolítására. A React Hooks segítségével állapotfüggő komponenseket írhat osztályok nélkül. Valószínűleg azt látjuk, hogy a jövőben az osztályalapú alkotóelemeket eltávolítják a Hooks segítségével.

A React Hooks célja az alkalmazástervezés egyszerűsítése is azáltal, hogy elkerüli az olyan összetevőket, amelyeknek nincs konstruktoruk vagy nincs rá szükségük, bár osztályoknak vannak nyilvánítva. Leggyakrabban állapotmentes komponensekkel dolgozik, ha az alkalmazás ideális kialakítására gondol. Amikor ReactJS alkalmazásokat építünk ügyfeleink számára, általában vékony réteget használunk az alkotóelemek ábrázolása és az alkalmazás logikája között. Ez lehetővé teszi, hogy a komponens vizuális ábrázolását elválasztjuk annak viselkedésétől.

3. Adatok lefelé, műveletek fel

Mi a «Data Down, Actions Up» tervezési mintája? Alapvetően azt jelenti, hogy van egy nagy sorrendű alkotóeleme (HOC - lásd alább), amely elfogadja az adatokat a "kellékeiben", és továbbítja ezeket az adatokat a nézetbe vagy a beágyazott összetevőkbe. Az összetevővel való interakcióhoz a felhasználók olyan műveleteket indítanak el, mint például egy gombnyomás, és az összetevő események kibocsátásával reagál erre az interakcióra. Tehát azt mondhatjuk, hogy ez eseményt vált fel, ellentétes irányban, mint az adatok átadása.

Ezeket az eseményeket vagy tevékenységeket egy szülőkomponensre továbbítják. A szülő összetevő újabb műveletet indít, amely megváltoztatja a globális alkalmazás állapotát.

4. Magas sorrendű alkatrész

A High Order Component (HOC) alapvetően tervezési minta, más néven dekorátor mintázat. A ReactJS-ben a HOC olyan összetevő, amely egy másik összetevőt körbeteker, kiegészítő funkcionalitás vagy kiegészítő tulajdonságok hozzáadásával. Ez lehetővé teszi az absztrakciót néhány általánosan használt logikától, és megőrzi a SZÁR kódját. Így lehet elosztani az összetett alkotóelem-struktúrát a ReactJS többi összetevője között, és hogyan lehet elválasztani az alkalmazás logikáját és az felhasználói felületet. Például használhat konténer összetevőt HOC-ként a prezentációs Button összetevőhöz.

Íme egy példa a HOC ReactJS komponensre:

5. Konténer alkatrészek

A tárolóelemek viszont logikával rendelkeznek az állapot beállítására, vagy olyan funkciókkal rendelkeznek, amelyek eseményeket bocsátanak ki egy szülőkomponensig. A hüvelykujj általános szabálya, hogy az összetevőt a lehető legegyszerűbben tartsa szem előtt az egységes felelősségvállalási alapelv tervezési elvével, ami lényegében azt jelenti, hogy az alkatrésznek egy dolgot kell tennie, de jól kell tennie. Leggyakrabban az ilyen típusú komponensek a HOC-k, amelyek kevés prezentációs komponenst tartalmaznak. Bemutató elemek Az egyszerű összetevők írása csökkentheti az alkalmazás általános bonyolultságát. Itt kerülnek bemutatásra a prezentációs összetevők. Ezeknek az összetevőknek minimálisnak vagy logikátlannak kell lenniük. A bemutató komponensek elfogadják az adatokat, és eseményeket bocsátanak ki visszahívásként, amelyeket a kellékek részeként kapnak. Alapvetően az ilyen típusú összetevő megjeleníti az UI-t, és végrehajt egy olyan funkciót, amelyet átadtak neki, amikor az UI-ban valamilyen művelet megtörtént. Az ilyen típusú alkotóelemek építőelemek, és néha alacsony sorrendű összetevőknek (vagy LOC) nevezik.

6. A legjobb gyakorlatok listája

  • [Frissítés 2019. május 22-ig] - ReduxJS használata esetén ossza meg Reducer kódját kisebb módszerekre, hogy elkerülje a hatalmas JSON-t a Reducerben.
  • Fontolja meg a TypeScript használatát az alkalmazásokban, ha még nem tette meg.
  • Használja a create-react-app generátort a ReactJS alkalmazás indításához.
  • Tartsa szárazon a kódot. Ne ismételje meg önmagát, de ne feledje, hogy a kódmásolat NEM mindig rossz dolog.
  • Kerülje a nagy osztályok, módszerek vagy alkatrészek, beleértve a reduktorokat.
  • Használjon robusztusabb kezelőket az alkalmazás állapotának, például a Redux kezeléséhez.
  • Használjon esemény-szinkronizálót, például a Redux-Thunk-t, hogy a hátsó API-jával lépjen kapcsolatba.
  • Kerülje a túl sok attribútum vagy érv átadását. Határozzon meg öt olyan kelléket, amelyet átad az alkotóelemnek.
  • Használja a ReactJS defaultProps és a ReactJS propTypes fájlokat.
  • Használjon bélést, szakítsa meg a túl hosszú vonalakat.
  • Tartsa a saját jslint konfigurációs fájlt.
  • Mindig használjon függőségi kezelőt egy zárfájllal, például NPM vagy fonal.
  • Tesztelje a gyakran használt kódot, az összetett és a hibákra hajlamos kódot.
  • Írjon további teszteket, amelyek nagyobb teszt lefedettséget biztosítanak a kódra egy kis erőfeszítéssel és a tesztkóddal annak megfelelő működésének biztosítása érdekében.
  • Minden alkalommal, amikor hibát talál, először írjon le teszt.
  • Használja a függvényalapú összetevőket a React Hooks használatának megkezdésével, amely egy új ReactJS módszer az állam-teljes összetevők létrehozására.
  • Használja az ES6 szerkezetátalakítását a kellékeihez.
  • Használjon feltételes renderelést.
  • A `map ()` felhasználó összetevőinek gyűjteményét és renderítését teszi lehetővé.
  • Használjon részleges összetevőket, mint például a <<> `…` `
  • Nevezze meg eseménykezelőit kezelő előtagokkal, mint például a „handleClick ()” vagy a „handleUpdate ()”.
  • A `onChange` gombbal vezérelheti a bemeneteket, például a` onChange = {this.handleInputChange ()} `.
  • A JEST segítségével ellenőrizze a ReactJS kódot.

Megemlítettük az eseményszinkronizálókat, mint például a Redux-Thunk. A ReactJS v16.3 új funkciót vezetett be a React Context API néven. Ennek egy része a redux-thunk funkciók utánozása és az események szinkronizálása a ReactJS eszközökkel. Ez egy olyan szolgáltatás, amelyre nagy igény van, mivel szinte minden ReactJS alkalmazás beszél az API lezárásáról, és szinkronizálnia kell a kéréseket és az eseményeket. Figyelemmel kísérjük ezt az API-t, és frissítéseket küldünk.

Íme egy példa az defaultProps és a propTypes használatára:

7. Következtetés

Reméljük, hogy ez a cikk rávilágít a ReactJS bevált gyakorlataira és mintáira, amelyek nagyon népszerûek a 2019-es évben. Bónuszként lásd az alábbiakban egy másik cikket, és ingyenes frissítések és új tananyagok feliratkozásához is regisztrálhat. Van még egy dolog ...

Nagyon szükségünk van a tapsodra! Ha hasznosnak találja ezt a bejegyzést, kérjük, érintse meg az alábbi gombot: :) Itt áll az első Önnek. Király vagy!

.

Bónusz anyag: Itt van a Reduxról és a Redux-Thunkról szóló legújabb cikkünk. Megmagyarázzuk, hogy kettő hogyan működik együtt.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188