Kuinka välttää potkuriporausta koostumuksella

Kuva Rawpixel on Unsplash

React.js on yksi suosituimmista käyttöliittymistä. Se on loistava komponenttipohjainen kehys, jossa on deklaratiivinen sovellusliittymä, jonka avulla kehittäjä voi ajatella käyttöliittymää tilan ja rekvisiittien funktiona eikä ajan funktiona. Toisin sanoen sinun täytyy kuvata komponentin ulkonäkö sisään siirrettyjen tietojen perusteella.

Ensisijainen tapa, jolla tietoja siirretään, on rekvisiitta. Yksinkertaisesti sanottuna rekvisiitta on argumentti JSX: n palauttaville toiminnoille. Itse asiassa komponentin yksinkertaisin muoto on juuri tämä: JavaScript-toiminto.

const Header = rekvisiitta => {
    palata(
         
            

{props.title}               ); }

Rekvisiitta voidaan käyttää useisiin asioihin samassa komponentissa. Yllä olevassa esimerkissä käytämme sitä css-luokan määrittämiseen: tumma tai vaalea. Sitä käytetään myös otsikkotunnisteen tietojen toimittamiseen. Voimme sitten käyttää komponenttia siirtämällä rekvisiitteja ominaisuuksina JSX: ssä, kuten tämä:

const App = rekvisiitta => {
    palata(
         
                           ); }

Kuten näette, rekvisiitta voi olla erittäin voimakas. Jos ne pannaan täytäntöön väärin, niihin voi kuitenkin olla vaikea puuttua. Yksi suurimmista rekvisiitta-aineiden "ei-ei" -tehtävistä on tehdä niin sanottua "potkuriporausta". Tukiporat on silloin, kun potkuri siirretään komponentille vain tarkoituksenaan siirtää se lapselle.

const Vanhempi = ({luokanimi, otsikko}) => {
    palata(
         
            {...}                            ); }

Yllä olevassa esimerkissä otsikkopalvelu välitetään vanhemmalle, mutta vanhempi ei käytä sitä muuta kuin luovuttaakseen sen lapsikomponentille. Tämä ei ole ihanteellinen tapa siirtää tietoja. Oletetaan, että lapsikomponentillamme on toinen rekvisiitti, jota meidän on hyödynnettävä, joudumme nyt siirtämään se potkuri vanhempaan komponenttiin vain siirtämään sen sitten lapselle. Mitä enemmän aikaa kuluu ja koodikantomme kasvaa, sitä enemmän virheille alttiita ovat tiedot ja komponentit. (BTW, käytän yllä olevassa esimerkissä ES6-operaattoria, jota kutsutaan tuhoamiseksi, josta voit oppia lisää MDN: ssä)

Huolimatta tosiasiasta, että tiedämme välttää sitä, potkuriporaukset hiipivät hiljaa, kun edes huomaa. Tässä on tosielämän esimerkki projektista, jolla työskentelin. Työskentelin Hero-osiossa, jolla oli otsikko, tekstitys ja luettelo 'To To Call' -painikkeista. Tästä aloitin (yksinkertaistin esimerkkiä helpottaaksesi lukemista):

const Hero = ({otsikko, tekstitys, ctas}) => {
    palata(
         
             {title} 
             {tekstitys} 
            
               {ctas.map (cta => )}
            
         
    );
}

Yllä oleva esimerkki käsitti kolme rekvisiittaa: otsikko, tekstitys ja joukko cta-arvoja (toimintakutsut). Otsikko ja tekstitys laitetaan vastaaviin komponentteihin ja sitten kartoitetaan ctas: n yli saadaksesi taulukko LinkButtons. Tätä on melko helppo seurata ja se toimi hyvin.

Myöhemmin törmäsin tarpeeseen olla rivi LinkButtons-sovelluksia jossain muualla sovelluksessani. Onneksi Reaktin avulla on helppo käyttää uudestaan ​​koodia ja muotoilin uudelleen painikerivin sankarikomponentistani, jotta voisin käyttää sitä uudelleen molemmissa paikoissa. Näin päädyin:

const ActionButtons = ({toiminnot}) => {
    palata(
       
          {action.map (action => )}
       
    );
}
const Hero = ({otsikko, tekstitys, ctas}) => {
    palata(
         
             {title} 
             {tekstitys} 
            
         
    );
}

Näitkö mitä tapahtui? En edes huomannut sitä aluksi. Oli niin helppo refaktoroida vain tarvitsemani osa, etten edes huomannut, että olin juuri luonut itselleni potkuriporaustilanteen. Annoin ctas-prop-sankarikomponenttiin vain kääntyäksesi ja siirtääkseni toiselle komponentille. Tämä olisi voinut aiheuttaa minulle suuria päänsärkyjä myöhemmin, ja yritin vain hyödyntää koodin uudelleenkäyttöä.

Onneksi kiinni itsestäni ja uusin koodin uudelleen tällä tavalla:

const Hero = ({otsikko, tekstitys, lapset}) => {
    palata(
         
             {title} 
             {tekstitys} 
            {Lapset}
         
    );
}

   

Kuten huomaat, en enää enää nimenomaisesti tee ActionButtons-komponenttia sankarikomponentissani. Annan vain lasten potkurin, joka on kaikkien React-komponenttien käytettävissä. Tämä malli antaa ohjauksen takaisin kehittäjien käsiin valitakseen mitä ja milloin tehdä sieltä jotain. Sitten välitän ActionButtons-komponentti lapsena Hero-komponentille. Tämän avulla voin siirtää tiedot suoraan ActionButtons-komponenttiin ilman, että sankarikomponentin tarvitsee edes tietää mitään ActionButtons-komponentin sovellusliittymästä.

Komponenttien kulkeutumista lapsina kutsutaan ”koostumukseksi”. Se on tehokas malli, joka mahdollistaa sekä komponenttien irrottamisen että koodin uudelleenkäytön. Jos haluat lisätietoja sävellyksestä ja sen käytöstä, suosittelen, että tutustu Reaktin aloitussivulle Sävellys vs. perintö.

Koodillani on nyt se etu, että kun ActionButtons-komponentti paranee ja muuttuu, sankarikomponentin ei tarvitse tietää. Se antoi sankarikomponentille myös enemmän joustavuutta, koska sitä ei enää kytketty ActionButtons-komponenttiin, joten se voi nyt tehdä mitä tarvitsen tai ei mitään. Koodini on paljon ylläpidettävämpi, kun koodikanta kasvaa.