Vaadake, kui hõlpsalt saate reageerimislehti luua

Foto autor Blake Connally saidil Unsplash

Uus React Context API on ametlikult väljas ja seda on ohutu kasutada!

Võite mind jälgida twitteris või vaadata mu viimaseid artikleid minu saidil yaabed.com. Samuti on mul minu väljaanne keskmises ajaveebis.yaabed.com.

Seda API-d kasutatakse peamiselt asjade jagamiseks Reaxi komponentide vahel rekvisiitide puurimise probleemi lahendamiseks. Rekvisiitide puurimine on rekvisiitide jagamine vanematest komponentidest rakenduse muudesse alaosadesse, veendudes, et kõik oleks tehtud siis, kui seda vaja on. Aga miks jagada kõik need rekvisiidid elementide vahel, kui seda ei pruugita nõuda? Siit tuleb ContextAPI.

Inimesed lähevad mõnikord segadusse ja hakkavad ContextAPI-d kasutama kõikjal, ilma et oleks vaja seda kasutada. Nagu inimesed hakkavad Reduxit kasutama ja ühendavad selle projekti kõigi komponentidega.

Ärge kasutage konteksti lihtsalt selleks, et vältida rekvisiitide mõne taseme alla laskmist. Pidage kinni juhtudest, kus samadele andmetele tuleb juurde pääseda mitme komponendi mitmel tasandil. - reageeri meeskond.

Mõnda aega oli react teami tutvustatud uus ContextAPI. Niisiis, otsustasin selle uue lähenemisviisi abil lihtsa idee ellu viia, et selle kohta rohkem teada saada. Hakkan otsima, mida saaksin täita. Siis mõne aja pärast otsustan reageerimiskaardid.

Kui hakkan reageerima sakki üksikut komponenti rakendama, kirjutasin kõik eesmärgi saavutamiseks vajalikud sammud ja teisendasin need selle artikli jaoks.

“Arvutiteadus ei tähenda ainult arvuteid, vaid astronoomia on seotud teleskoopidega.” - Edsger Dijkstra

Kasutusnäide pärast juurutamist

Siin on viimane näide koodist pärast seda, kui olen lõpetanud reageerimise vahekaartide juurutamise konteksti API abil.

Avaldasin selle komponendi npm-ni ja lõin lihtsa liivakasti näite, näidates, kuidas seda kasutada:


   
      
          See on vahekaart 1 
      
      
          See on vahekaart 2 
      
   

Rakendage vahekaardid React ilma kontekstita API

Soovitan uute asjade õppimisel kirjutada kood teile teadaoleval viisil ja teisendada see uhiuueks stiiliks, mida soovite õppida. Näiteks kui teate liitkomponentide kontseptsiooni kraami jagamiseks. Looge lähtekomponent nimega tabs-parent, mis sisaldab vahekaardi olekut ja sisaldab meetodeid vahelehtede lisamiseks, vahekaartide eemaldamiseks, aktiivne vahekaart ja eelmine aktiivne vahekaart. Seejärel jagage see asjade vahel ära. Ma näitan teile näite, kuidas reageerivaid sakke luua ühendikomponentide mustri abil.

Maagia algab liitkomponentide allolevast koodist. Tänu Kent C. Doddsile kursuse eest edasijõudnute Reaxi komponentide mustrite kohta. Samuti saate vaadata seda tema kirjutatud artiklit „Täpsemad reageerimise komponendi mustrid”.

Kui kasutate laste vara kaardifunktsiooni, saate oma komponendis olevad elemendid läbi lüüa ja neid uute elementidena kloonida ning kõik vajaliku edasi anda. See trikk ei selgita ka nende lastekomponentide omadusi, mis on väljastpoolt kolitud, see kopeerib need ja liidab need ümbrise põhikomponendiga teie komponendi olekuga.

{React.Children.map (this.props.children, laps =>
  React.cloneElement (laps, {
    activeTab: this.state.activeTab,
    addTab: this.addTab
  })
)}

Siin on koodiliivakast täielikuks juurutamiseks:

Nüüd on aeg kasutada uut ContextAPI

Uus kontekstis API on varasemast palju sirgem, et rekvisiitide jagamiseks ja olekuks muutmiseks pole vaja määratleda vanem- ja lastekomponendis mitut asja. Jagatud väärtuste jaoks vajate lihtsalt pakkujat ja tarbijad annavad teile teenusepakkuja salvestatud väärtused. Kontrollige allpool olevat näidiskoodi, et näha, kuidas on ContextAPI kasutamist lihtne alustada.

const InitValue = {
    kasutaja: {},
    logUserIn: () => {}
};
/ **
* Siin saate määratleda konteksti api, kasutades reageerimise loomise konteksti * tehas sisaldab seda tehast konteksti pakkujat ja konteksti * tarbijat
** /
const UserContext = React.createContext (esialgne väärtus);
klassi rakendus laiendab rakendust React.Component {
  logUserIn () {// logi kasutaja kood sisse}
  renderdama () {
   const context = {kasutaja: this.state.user, logUserIn: this.logUserIn};
    tagasi (
      {/ * Siit saate teada, kuidas teenuseosutajale juurde pääseda. Peate oma rakenduse pakkima selle teenusepakkuja või kõrgema vanema komponendiga * /}
       
           
       
    );
  }
}
funktsiooni päis (rekvisiidid) {
  tagasi (
    
       {/ * Siit saate teada, kuidas tarbijat teenusepakkuja komponendilt väärtuste ja andmete saamiseks * /}                    {kontekst =>               context.user.isLoggedIn?                `tere tulemast $ {context.user.name} ':                                    Logi sisse                             }              
  ); }

Rakendage vahekaardid React, kasutades ContextAPI

See on sama kui liitkomponentide muster, mille eest üks vanem vastutab komponentidevahelise asja jagamise eest. Saidil ContextAPI helistati pakkujale. Kõik pakkuja sees olevad lapsed saavad tarbija abil saada oleku teenusepakkujasse. See on sama kui ühendikomponendid, kus kasutatakse vajalike andmetega kloonitud lapsi. Allpool saate kontrollida näidiskoodi ja teha kahe mustri võrdlus.

Vahelehtede kontekstikomponent

See kontekst sisaldab vahekaartide komponendi ja vahekaartide ühist olekut.

  • Vahekaardid: vahekaartide arv lisatud vahekaartide salvestamiseks, et need ülaosas saaks, nii et kasutaja saaks ühel neist klõpsata ja olekut ise muuta.
  • Aktiivne vahekaart: objekt selle salvestamiseks, millist vahekaarti kuvatakse kasutajale, see on nõutav üksus, kui reageerimise vahekaartide komponent sisaldab aktiivse vahelehe ID-d.
  • Lisa vahekaart: funktsioon, mis võimaldab komponendil Vahekaart alammenüüd lisada pärast paigaldamist.
  • On Click: funktsioon aktiivse vahelehe muutmiseks, kui klõpsatakse uut vahekaarti.

Vahelehe konteineri komponent

Allolev kood näitab sakki konteineri komponenti ja see lihtsalt näitab, millal selle ID on aktiivne.

Kõikide vahelehtede konteiner

Kui teil on küsimus, miks ma kasutan glamuurset, arvan, et CSS-JS-i lähenemisviisi kasutamine Reacti komponentide kujundamisel on tähelepanuväärne asi, kuna teil on kontroller ükskõik mille peal ja kapseldate oma elemendi endaga. Soovitan selleks kasutada glamuurset, sest see on liiga paljudel juhtudel paindlik.

Järeldus

Seal on liiga palju mustreid. Kuid veenduge, et valiksite teie jaoks sobivaima režiimi. Korduvkasutatavate komponentide õigel loomine on üks võtmeelemente, et olla esiosade insener. Nii et ärge kleepige ja alustage oma elementide kodeerimist, kasutades seal näidatud uusi mustreid, ja vali sobiv. Ärge hoidke ka ühte režiimi ja jätke teistele head.

Kirjutan blogis.yaabed.com. Kui teile see artikkel meeldis, siis jagage seda kindlasti ka teistega. Ja ärge unustage, et vajutate järgmiste artiklite jaoks nuppu Jälgi, jälgige mind ka twitteris.

Tere, minu nimi on Yazan Aabed. Kasvas üles Palestiinas. Minu peamine oli informaatika alal. Olen Frontend Engineer ja JavaScripti väljavalitu . Enamasti töötatakse Frontendi raamistikega nagu (AngularJs, ReactJS). Võite helistada mulle #Geek . Samuti meeldib mulle jagada oma teadmisi teiste inimestega ja neilt õppida 🌪. Leiate mind GitHubis, keskkonnas, Twitteris.