10 tipp, hogyan lehet a ReactJS kódot úgy készíteni, mint egy PRO

Sokan, frontend fejlesztők, js fejlesztők és reagáló fejlesztők is azokban a csapatokban dolgoznak, amelyekben különböző készségekkel rendelkező fejlesztők vannak. Kódunk fejlesztésének legjobb módja a JÓ MINŐSÉGI KÓD ÁTTEKINTÉSE - de nem azért, hogy ellenőrizzük, hogy vajon mindenki működik-e, hanem azt is, hogy a kollégáink hogyan hozták ezt az eredményt - tehát tiszta kódot kell biztosítanunk.

Miért? Ez egyszerű - ha a csapat legfeljebb 5 főre számít, akkor könnyű megkérdezni, hogy működik. De ha a csapat hatalmas vagy sok dinamikus változás történik, akkor ez a jó minőségű kód segít nekünk és egy másik fejlesztőnek megérteni azt, és természetesen úgy érzi magát, mint egy profi; P

Tíz legjobb gyakorlatot hoztam, amelyek segítenek nekem és a csapatomnak a kód minőségének javításában a React Projektjeinkben. Ez a tipp általában az ES6 funkcionalitásain alapszik, de mi nem mindig használjuk őket. Keresse meg őket, és nyugodtan használja is !!

1. Osztálykomponensek VS funkciókomponensek

Mindannyian nagyon boldogok vagyunk, hogy az ES6-ban osztálytámogatást vezettek be - imádom! A reagálás során elkészíthetünk egy komponenst a „React.Component” elnevezésű egyszerű osztály kibővítésével. Ott vannak egyszerű államkezelési módszerek, komponensek támogatása stb. Időnként túl sokra van szükségünk, de tudjuk, hogy tudjuk használni.

importálja a React, {Component} fájlt a 'react' helyről
a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    visszatérés 

Hello {this.props.text}

  } }

De a reagálás fejlesztésében sok fejlesztő elfelejti, hogyan tudunk egy komponenst egyszerűen funkcionális komponens felhasználásával előállítani, ami egy paraméterrel - rekvisszusokkal - függvény lehet.

import reagálni a 'react'
const MyComponent = (kellékek) => 

Helló {props.text}

De ennek a két alkotóelemnek a használata ugyanúgy néz ki!

Oké - miért kellene használni a funkcionális összetevőket? Mert sokkal könnyebb, mint a kibővített osztály. Ne feledje, hogy a React és egy másik reaktív keretrendszert használjuk, mert a memóriahasználatra gondolunk - ez a keretrendszer virtuális DOM-ot hoz létre felesleges kellékek és módszerek nélkül, hogy könnyebben, gyorsabban kezeljék és kevesebb memóriát foglaljanak el. Tehát, ha az optimalizálásra gondolunk, akkor erre a különbségre is gondolkodnunk kell.

Oké - szóval mikor használhatjuk az osztálykomponenseket, és ha a funkcionális alkatrészeket? A szabályok nagyon egyszerűek - MINDEN, HOGY FELHASZNÁLHATÓ, HOGY FUNKCIÓS ALKALMAZHATÓNAK NEM HASZNÁLJON - HASZNÁLJON OSZTÁLYOS ALKATRÉSZET!

Nagyon könnyű? Igen! Elemeket írhat Önnek a vázlatból, például funkcionális komponensből. Amikor észreveszi, hogy valamilyen állapotot kell használnia, vagy észlelnie kell bizonyos változásokat az összetevőben - mint például a komponensWillMount () stb., Akkor átalakíthatja osztálykomponenssé.

Ha erre gondolsz, hogy milyen típusú alkatrészt használ, akkor olyan leszel, mint egy profi!

2. „If” állítások az összetevő sablonban

Lásd alább ... Tudod, mi a baj ezzel a kijelentési módszerrel?

{a> b? : null}

Ha a feltétel nem következetes, akkor a React érvénytelenné válik. Hmm ... rendben van - nem látom, tehát nincs probléma ... NEM !!!

Ez a null még mindig létezik a DOM-ban, tehát ha az összes gyermeket fel akarja venni a listájából, vagy felhívja az n. Gyermeket, akkor ezt a nullát számítják !!!

Megoldás?

{a> b && }

Olyan egyszerű, olyan elegáns. Mint egy profi!

3. Funkciókötés

Szeretlek ES6! Szeretem a nyíl funkciókat !!! De ha megérti, hogy valóban hogyan működnek, akkor reagálniuk nagyon egyszerű. Többet róla (Itt). Röviden: a nyíl funkció megkapja a közvetlen szüleik körét, hogy deklaráltak.

Miért beszélek erről a funkciókötési hivatkozásról? Mert nagyon egyszerű trükk van, hogy tisztábbá tegye a kódot. A normál eseményhez kötődő funkció így néz ki:

a MyComponent osztály kibővíti az összetevőt {
  kivitelező (kellékek) {
    super (kellékek)
    this.clickHander = this.clickHander.bind (ez)
  }
  clickHander (e) {
    e.preventDefault ();
    riasztás ('Hello' + this.props.text)
  }
  Vakol() {
    return  
  }
}

Bejelentettük a clickHandler funkciót, de ezek legfontosabb kontextusa (ez) a gomb, amelyre kattintunk. Tehát, ha ezt osztályunkként akarjuk megkötni, akkor azt építőként kell megkötni.

Megkönnyíthetem? TERMÉSZETESEN!!! Nyíl funkcióval, mivel a közvetlen szülőktől kap hatókört, hogy deklaráltak (másolás felülről).

a MyComponent osztály kibővíti az összetevőt {
  clickHander = (e) => {
    riasztás ('Hello' + this.props.text)
  }
 Vakol() {
    return  
  }
}

Könnyebb, gyorsabb, és úgy néz ki, mint egy profi !!!!

** FONTOS **

Ha használni szeretné ezt a struktúrát - ne feledje, hogy ez jelenleg kísérleti jellegű, tehát babel segítségével kell lefordítanunk a transform-class-tulajdonság használatával, amely a létrehozás-reagálás-alkalmazásban alapvető. Referencia itt

4. Rövidebb kellékek és állapotok

Egy másik dolog, amelyet felhasználhatunk az ES6-ból, de elfelejtettük - a pusztítás. Sok kódértékelésben láthatjuk, hogy hatalmas tárgyakat kis részekre bontanak.

...
var width = this.props.myObject.width,
    magasság = this.props.myObject.height,
    color = this.props.myObject.color;
...

Ez túl hosszú és nem rugalmas megoldás. Nagyon egyszerű módja van ennek az okosabbnak a szerkezetének átalakítására.

...
var {szélesség, magasság, szín} = this.props.myObject;
...

Nagyon könnyű, ha azt akarjuk, hogy változó azonos nevű legyen, mint az objektum kulcsa.

Hogyan tudjuk felhasználni reagálni?

importálja a React, {Component} fájlt a 'react' helyről
a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    legyen {név, életkor} = this.props
    return 

A neve {név}. {Age} éves vagyok.

  } }

vagy funkciókomponenssel

import reagálni a 'react'
const MyComponent = ({név, életkor}) => 

A nevem {név}. {Age} éves vagyok.

Egy másik példa? Ha nagy kellékek vagy államok szerkezetét használja.

importálja a React, {Component} fájlt a 'react' helyről
a MyComponent osztály kibővíti az összetevőt {
  állam = {
    csapat: [
      {
        személy: {
          alapinformáció: {
            név: „Michal”,
            életkor: 27 év
          }
        }
      }
    ]
  }
  Vakol() {
    legyen {név, életkor} = this.props.team [0] .person.basicInfo
    
    return 

A neve {név}. {Age} éves vagyok.

  } }

Könnyen? Könnyen! És úgy néz ki, mint egy PRO;)

5. A stílusok elválasztása

Nagyon gyors tanácsadás - KÜLÖNLEGES TÍPUSOK !!! : D

De két helyzetünk van:

  1. Külső stílusokat használhatunk a fájlokból (.css, .scss)
  2. Olyan alkatrészeket használunk, amelyek az építési stílusukat használják, de csak vonalvezetéseket használnak, mint például az material-ui

Az első helyzet meglehetősen egyszerű, beteszem a webpack nyakába és a stílusbetöltőbe, és ennyi is!

A második helyzet azonban kicsit nehéz, és szeretnék néhány megoldást bemutatni:

# 1. Const stílusokkal

importálja a React, {Component} fájlt a 'react' helyről
const stílusok = {
  bekezdés: {
    'FontSize': '10px'
    'Szín': '# FF0000'
  }
}
a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    Visszatérés (
      
        

Ez az első szövegem

        

Ez a második szöveg

           )   } }

# 2. CSS modulok

Nagyon jó ötlet a CSS-ben szereplő objektum és hivatkozás betöltése az osztályba, amely létezik a css-fájlban.

importálja a React, {Component} fájlt a 'react' helyről
importáljon osztályokat a './style.css'
a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    Visszatérés (
      
        

Ez az első szövegem

        

Ez a második szöveg

           )   } }

Gyors videó arról, hogyan lehet webpack-ot elkészíteni a CSS-hez

És ne feledje - ha el tudja különíteni fájljait és megkönnyíti a szerkesztést, akkor úgy működik, mint egy profi!

6. A környezeti függőségek

Szeretünk prototípusokat készíteni, de nem akartuk elkészíteni valamit a verzióhoz. Hogyan rejthetjük el töredékeinket, vagy csak a fejlesztők számára vagy a fejlesztési módban elérhető valamit?

Használja a KÖRNYEZETVÁLTOZÓK - extra változót, amelyet hozzárendelhet a projekt elindításakor vagy építésekor. Ha bármilyen műveletet elindít a terminálról, akkor hozzáadhat további változókat, amelyeket az alkalmazás által a csomópont továbbít a process.env-be, majd bármit megilleszthet.

volt. MY_VARIABLE = "Helló világ!" npm futási indítás

Aztán a process.env.MY_VARIABLE-ban látnunk kell az értéket.

Ha a create-react-app alkalmazást használja, akkor beépített változóval rendelkezik, mint például a NODE_ENV, amely visszatérési módot nyújt az építkezéshez, például fejlesztés, gyártás vagy teszt. És mindez alapvető használatra.

const isDebug = process.env.NODE_ENV === 'fejlesztés'

Hogyan lehet használni a gyakorlatban?

importálja a React, {Component} fájlt a 'react' helyről
const isDebug = process.env.NODE_ENV === 'fejlesztés'
a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    Visszatérés (
      
        

Ez a nyilvános szövegem

        {isDebug &&

Ez a fejlesztésem szövege

}            )   } }

Nem vagyok biztos benne, hogy olyan, mint egy PRO, de átadhatja az ENV VÁLTOZATOS környezeti szempontból érzékeny információkat, például az API gyökér URL-jét, vagy a projekt címét stb.

** Fontos **

Ne felejtse el, hogy ha valaki dekódolni akarja a forráskódot, akkor láthatja a függőségeket.

7. Emlékezzen az alkatrészek tesztelésének lehetőségeire

Ez meglehetősen könnyű megérteni - ha a tesztelésre gondol, akkor reagál az alkalmazás, akkor valószínűleg a Jest-et szeretné használni a teszteléshez. De nem szabad elfelejtenie, hogy ha összekapcsolja az összetevőket olyan háttérrendszerekkel, mint az Apollo (a GraphQL számára), vagy az állami gépeket, mint például a Redux vagy más HOC, akkor ne feledje, hogy ezek a kiterjesztések nem érhetők el egyszerű összetevő teszteléskor. És ez normális. Ha meg akarja tesztelni a SINGLE összetevőt, akkor csak ott működik a tesztelés - ellenőrzi, hogy a bemeneti támaszok és az összetevő műveletei megfelelően működnek-e.

Tehát hogyan lehet felkészíteni az alkatrészeket a tesztelésre?

Ha még nincs HOC, akkor az export általában:

importálja a React, {Component} fájlt a 'react' helyről
a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    legyen {név, életkor} = this.props
    return 

A neve {név}. {Age} éves vagyok.

  } }
alapértelmezett MyComponent exportálása

de ha bármilyen HOC-t szeretne használni, akkor használja ezt a mintát:

importálja a React, {Component} fájlt a 'react' helyről
export osztály A MyComponent kiterjeszti a {
  Vakol() {
    legyen {név, életkor} = this.props
    return 

A neve {név}. {Age} éves vagyok.

  } }
alapértelmezett myHocFunction (MyComponent) exportálása

Miért? Mert amikor más dokumentumba szeretne importálni, akkor a HOC-val összetevőként használja:

importálja a MyComponent a './components/MyComponent' webhelyről

de a tesztekben használhatsz

{MyComponent} importálása a './components/MyComponent' könyvtárból

Egyszerű kód, egyszerű megoldás, de sokféle felhasználási lehetőség - természetesen PRO vagyunk;)

8. Használjon segítőket

Nagyon, nagyon egyszerű és fontos dolog. Időnként ugyanazokat a funkciókat használja, vagy sok összetevőben ugyanazok a szabályok vannak. Nem szükséges a kódot lemásolni. Csak válassza el a segítő funkciókat egy másik fájlból, és helyezze el a globális helper könyvtárba:

nyilvános
src
  segítők
    globals.js
  modulok
    felhasználók
      segítők
        index.js
      UserList.js
      user.js
  app.js

** Fontos **
Ha másolja a kódját - javítania kell!

A fájlszétválasztás a legjobb módja annak, hogy profi lehessen!

9. Reagáljon a fragmentumokra

Ön elkészítette a legjobb elrendezést, a HTML-jelölés a legjobb, minden gondolat nagyon szép ... ARHHHH HÁLÓDÓ, csak reagáljon a megvalósításra ... fejléc… tökéletesen néz ki ... jumbotron ... fantasztikus ... várjon ... Van egy részem, amely nincs becsomagolva ... OH NEM ... reagálj ... SZÉT!

Ez volt a probléma, ha olyan összetevőt szeretne készíteni, amelynek nem volt burkolója. Sokáig mindent be kell csomagolnunk:

a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    Visszatérés (
      
        

Ez az első szövegem

        

Ez a második szöveg

           )   } }

mert a reagálás nem tette lehetővé, hogy egyedül tegyük. miért - nem használták, ha minden elem belsejében van saját uniq kulcsa, hogy felismerje a DOM melyik része az ő alkotóeleme.

A React új funkciót adott hozzá, amely a „React Fragments” elnevezésű, amely lehetővé teszi, hogy összeállítson egy összetevőt, amely sok elemet csoportosít anélkül, hogy a DOM-ba be kellene csomagolni. Ugyanaz működik, mint a div csomagolás, de a div helyett a utasítást vagy rövid verziót <>

Volt.

a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    Visszatérés (
      
        

Ez az első szövegem

        

Ez a második szöveg

      
    )   } }

vagy

a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    Visszatérés (
      <>
        

Ez az első szövegem

        

Ez a második szöveg

           )   } }

Csodálatos - olyan vagy, mint egy profi, olvassa el a teljes cikket a dokumentációból

10. A PRO-k a Prop típusokat és az Alapértelmezett kellékeket használják

Ha PRO vagy, akkor azon dolgokra gondolsz, amelyekre szükséged van. Miért kellene használni a PropTypes szoftvert?

A fejlesztés során biztos lehet benne, hogy más alkatrészei megfelelő módon átadják-e őket. Ha húrot akar használni, akkor a kellékeiben húrnak kell lennie, mert az ex. meg lehet csinálni a karakterláncon belül összetevő-specifikus dolgokat. Az alapértelmezettProps hozzáadása, ha a propType-re nincs szükség, megóvja Önt, hogy Ön / vagy a projekt kollégiuma elfelejtse hozzáadni valamilyen prop elemet.

importálja a React, {Component} fájlt a 'react' helyről
PropTípusok importálása a „prop-típusokból”
a MyComponent osztály kibővíti az összetevőt {
  Vakol() {
    visszatérés 

üdvözlet {this.props.text.toLocaleUpperCase ()}

  } }
MyComponent.propTypes = {
  szöveg: PropTypes.string
}
MyComponent.defaultProps = {
  szöveg: 'Világ'
}

És többet szeretne tudni a PropTypes-ről - Teljes dokumentáció

Összefoglaló

Mint láthatja, a 10 tipp nagyon könnyű végrehajtani a kódját. Olvassa el még egyszer, adjon hozzá reakciót, ha tetszik, és írjon megjegyzésekbe, ha van valami bizonytalan, vagy ha valami konkrétabbról szeretne olvasni! Sok szerencsét!