Išsamus „React.js“ vadovas 2018 m

Šis straipsnis iš pradžių buvo paskelbtas 2015 m. Sausio mėn., Tačiau neseniai buvo atnaujintas į „React 16.3“ ir visas jame pateiktas gėrybes.

Komponentai yra „React“ statybiniai blokai. Jei esate kilęs iš kampinio fono, komponentai yra labai panašūs į direktyvas. Jei esate iš kitokio fono, jie iš esmės yra valdikliai ar moduliai.

Galite galvoti apie komponentą kaip HTML, CSS, JS rinkinį ir tam tikrus tam komponentui būdingus vidinius duomenis. Man patinka galvoti apie „React“ komponentus kaip internetinius „Kolaches“. Jie turi viską, ko jums reikia, suvyniotą į skanų kompozicinį ryšulį.

Šie komponentai yra apibrėžti gryname „JavaScript“ arba jie gali būti apibrėžti tuo, ką „React“ komanda vadina „JSX“. Jei nuspręsite naudoti JSX (kuris greičiausiai bus, jis yra gana standartinis - ir tai mes naudosime šiai mokymo programai), jums reikės kokio nors kompiliavimo etapo, kad JSX konvertuotumėte į „JavaScript“. Bet mes tai suprasime vėliau.

„React“ taip patogu kurti vartotojo sąsajas, nes duomenys gaunami arba iš pagrindinio komponento komponento, arba jie yra pačiame komponente. Prieš pradėdami mokytis kodo, įsitikinkime, ar gerai suprantame komponentus.

Virš mūsų yra mano „Twitter“ profilio nuotrauka. Jei mes ketintume iš naujo sukurti šį puslapį „React“, mes padalintume skirtingas dalis į skirtingus komponentus (paryškintus). Atminkite, kad komponentų viduje gali būti įdėtų komponentų.

Kairįjį komponentą (rausvą) galime pavadinti „UserInfo“ komponentu. Komponento „UserInfo“ viduje turime dar vieną komponentą (oranžinį), kurį galėtume pavadinti „UserImages“ komponentu. Tai, kaip veikia šie tėvų ir vaikų santykiai, yra „UserInfo“ komponentas, arba tėvinis komponentas, kur yra duomenų „būsena“ tiek apie save, tiek apie „UserImages“ komponentą (vaiko komponentą). Jei norėtume panaudoti bet kurį iš tėvų komponento duomenų komponentų, kuriuos mes darome, mes perduotume tuos duomenis antriniam komponentui kaip atributą. Šiame pavyzdyje mes perduodame „UserImages“ komponentui visus vaizdus, ​​kuriuos turi vartotojas (kurie šiuo metu gyvena komponente „UserInfo“).

Truputi įsigilinsime į išsamią kodo informaciją, bet noriu, kad suprastumėte didesnį vaizdą apie tai, kas čia vyksta. Ši tėvų / vaikų hierarchija leidžia palyginti lengvai valdyti mūsų duomenis, nes tiksliai žinome, kur gyvena mūsų duomenys, ir neturėtume niekur kitur tais duomenimis manipuliuoti.

Žemiau pateiktos temos yra tai, kas, mano manymu, yra pagrindiniai „React“ aspektai. Jei suprasite visus juos ir jų tikslus, perskaitę šią mokymo programą būsite labai geros vietoje.

JSX - leidžia mums rašyti HTML kaip sintaksė, kuri gaunama
paversta lengvais „Java“ objektais.
Virtualus DOM - tikrovės „JavaScript“ vaizdas
DOM.
„React.Component“ - būdas, kuriuo sukuriate naują komponentą.
atvaizdavimas (metodas) - apibūdina, kaip atrodys vartotojo sąsaja
tam tikras komponentas.
ReactDOM.render - pateikia „React“ komponentą DOM mazgui.
būsena - komponento vidinė duomenų saugykla (objektas).
konstruktorius (this.state) - būdas, kuriuo jūs įsitvirtinate
pradinė komponento būsena.
setState - pagalbinis metodas, naudojamas atnaujinti a būseną
komponentą ir iš naujo atvaizduoti vartotojo sąsają
rekvizitai - duomenys, kurie perduodami vaikų komponentui
iš pirminio komponento.
„propTypes“ - leidžia kontroliuoti buvimą ar tipus
tam tikri rekvizitai perduoti vaiko komponentui.
defaultProps - leidžia nustatyti numatytuosius komponentų rekvizitus.
Komponentas LifeCycle
  - componentsDidMount - sudedamas įdėjus komponentą
  - komponentasWillUnmount - suaktyvinamas prieš komponentą išmontuojant
  - getDerivedStateFromProps - suaktyvinamas, kai komponentas pritvirtinamas ir
kai butaforija pasikeičia. Naudojamas atnaujinti a būseną
komponentas, kai jo rekvizitai keičiasi
Renginiai
  - paspaudus
  - „onSubmit“
  - onChange

Aš žinau, kad tai atrodo labai daug, bet greitai pamatysite, koks svarbus kiekvienas kūrinys kuriant patikimas programas kartu su „React“ (ir aš taip pat ne juokavau, sakydamas, kad noriu, kad tai būtų išsamus vadovas).

Dabar turėtumėte labai gerai suprasti, kaip veikia „React“. Dabar pereikime prie kodo.

Pirmojo komponento kūrimas (JSX, Virtual DOM, render, ReactDOM.render)

Pabandykime sukurti savo pirmąjį „React“ komponentą.

Norėdami sukurti „React“ komponentą, naudosite ES6 klasę. Jei dar nesate susipažinę su klasėmis, galite toliau skaityti toliau arba išsamiau apie jas sužinoti čia:

importuoti „reaguoti“ iš „reaguoti“
importuoti „ReactDOM“ iš „react-dom“
klasė „HelloWorld“ praplečia „React.Component“ {
  pateikti () {
    grįžti (
      
Labas pasaulis!
    )   } }
ReactDOM.render (, document.getElementById ('root'));

Atminkite, kad vienintelis metodas mūsų klasėje yra pateikimas. Kiekvienam komponentui reikalingas pateikimo būdas. Pateikimo priežastis yra mūsų komponento vartotojo sąsajos (vartotojo sąsajos) aprašymas. Taigi šiame pavyzdyje tekstas, kuris ekrane rodomas, kur pateikiamas šis komponentas, yra „Hello World“!

Dabar pažiūrėkime, ką veikia „ReactDOM“. ReactDOM.render pateikia du argumentus. Pirmasis argumentas yra komponentas, kurį norite pateikti, o antrasis argumentas yra DOM mazgas, kuriame norite pateikti komponentą.

Atkreipkite dėmesį, kad mes naudojame „ReactDOM.render“, o ne „React.render“. Tai buvo pakeitimas „React“ .14, kad „React“ būtų labiau modulinis. Prasminga, kai manote, kad „Re reaguoti“ gali suteikti daugiau dalykų nei tik DOM elementas.

Aukščiau pateiktame pavyzdyje mes sakome „React“ paimti mūsų „HelloWorld“ komponentą ir pateikti jį elementui su šaknies ID. Dėl „React“ tėvų ir vaikų santykių, apie kuriuos kalbėjome anksčiau, paprastai turite naudoti „ReactDOM.render“ tik vieną kartą taikydamiesi, nes pateikus didžiausią komponentą, visi vaiko komponentai taip pat bus atkuriami.

Dabar jūs galite jaustis keistai įmesdami „HTML“ į „JavaScript“. Nuo tada, kai pradėjote mokytis interneto svetainių kūrimo, jums buvo pasakyta, kad turėtumėte atsisakyti savo logikos, tai yra, neleisti „JavaScript“ atsieti nuo HTML.

Ši paradigma yra stipri, tačiau ji turi tam tikrų trūkumų. Nenoriu, kad šis vadovėlis būtų ilgesnis, kai bandau įtikinti, kad ši idėja yra žingsnis teisinga linkme, todėl, jei ši idėja vis tiek jus vargina, galite patikrinti šią nuorodą. Sužinojus daugiau apie „React“, šis neramumas turėtų greitai išnykti.

„HTML“, kurį rašote pateikimo metodu, iš tikrųjų nėra HTML, tačiau būtent tai „React“ vadina „JSX“. JSX paprasčiausiai leidžia mums rašyti į HTML panašų sintaksę, kuri (galiausiai) virsta lengvais „JavaScript“ objektais. Tada „React“ gali paimti šiuos „JavaScript“ objektus ir iš jų suformuoti „virtualų DOM“ arba „JavaScript“ vaizdą iš tikro DOM. Tai sukuria „laimėk / laimėk“ situaciją, kai naudodamiesi „JavaScript“ gausite šablonų prieinamumą.

Pažvelgus į žemiau pateiktą pavyzdį, tai yra tai, į ką jūsų JSX galiausiai bus įtraukta.

klasė „HelloWorld“ praplečia „React.Component“ {
  pateikti () {
    grąžinti „React.createElement“ („div“, null, „Hello World“);
  }
}
Dabar galite atsisakyti JSX -> JS transformacijos etapo ir parašyti savo „React“ komponentus kaip aukščiau pateiktą kodą. Bet kaip jūs galite įsivaizduoti, tai būtų gana keblu. Aš nežinau nė vieno, kuris nesinaudoja JSX. Norėdami gauti daugiau informacijos apie tai, ką kaupia JSX, skaitykite „React Elements vs React Components“.

Iki šiol mes nelabai pabrėžėme šios naujos virtualios DOM paradigmos, į kurią mes einame, svarbą. Priežastis, kodėl „React“ komanda pasirinko šį požiūrį, yra ta, kad kadangi virtualus DOM yra tikrojo DOM „JavaScript“ vaizdas, „React“ gali sekti skirtumą tarp dabartinio virtualiojo DOM (apskaičiuoto atlikus tam tikrus duomenų pakeitimus) su ankstesniu virtualiu DOM (apskaičiuota prieš keičiant duomenis). Tada „Reaguoti“ išskiria pakeitimus tarp senojo ir naujojo virtualiojo DOM ir tik tada atnaujina tikrąjį DOM su reikiamais pakeitimais.

Kalbant plačiau, nes manipuliuojant tikru DOM lėtai, „React“ gali sumažinti manipuliacijas tikru DOM, stebėdamas virtualų DOM ir tik atnaujindamas tikrąjį DOM, kai reikia, ir atlikdamas tik reikiamus pakeitimus. (Daugiau informacijos rasite čia).

Paprastai vartotojo sąsajoje yra daug būsenų, kurios apsunkina valstybės valdymą. Pakartotinai pateikdami virtualų DOM kaskart, kai tik pasikeičia būsena, „React“ palengvina mąstymą apie tai, kokioje būsenoje yra jūsų programa. Procesas atrodo maždaug taip:

Kai kurie vartotojo įvykiai, keičiantys jūsų programos būseną → Padaryti virtualų DOM iš naujo → Paskleisti ankstesnį virtualų DOM su naujuoju virtualiu DOM → Tikruosius DOM atnaujinkite tik atlikdami reikiamus pakeitimus.

Kadangi vyksta šis pertvarkymo procesas iš JSX į JS, kurdami turite nustatyti tam tikrą pertvarkos etapą. Šios serijos 2 dalyje supažindinsiu su „Webpack“ ir „Babel“, kaip atlikti šią pertvarką.

Pažvelkime į kontrolinį sąrašą „Svarbiausios reagavimo dalys“ ir pažiūrėkime, kur esame dabar.

 JSX - leidžia mums rašyti HTML kaip sintaksė, kuri gaunama
paversta lengvais „Java“ objektais.
 Virtualus DOM - tikrovės „JavaScript“ vaizdas
DOM.
 „React.Component“ - būdas, kuriuo sukuriate naują komponentą.
 pateikti (metodas) - apibūdina, kaip atrodys vartotojo sąsaja
tam tikras komponentas.
 „ReactDOM.render“ - pateikia „React“ komponentą DOM mazgui.
būsena - komponento vidinė duomenų saugykla (objektas).
konstruktorius (this.state) - būdas, kuriuo jūs įsitvirtinate
pradinė komponento būsena.
setState - pagalbinis metodas, naudojamas atnaujinti a būseną
komponentą ir iš naujo atvaizduoti vartotojo sąsają
rekvizitai - duomenys, kurie perduodami vaikų komponentui
iš pirminio komponento.
„propTypes“ - leidžia kontroliuoti buvimą ar tipus
tam tikri rekvizitai perduoti vaiko komponentui.
defaultProps - leidžia nustatyti numatytuosius komponentų rekvizitus.
Komponentas LifeCycle
  - componentsDidMount - sudedamas įdėjus komponentą
  - komponentasWillUnmount - suaktyvinamas prieš komponentą išmontuojant
  - getDerivedStateFromProps - suaktyvinamas, kai komponentas pritvirtinamas ir
kai butaforija pasikeičia. Naudojamas atnaujinti a būseną
komponentas, kai jo rekvizitai keičiasi
Renginiai
  - paspaudus
  - „onSubmit“
  - onChange

Mes darome gerą tempą. Viskas paryškinta yra tai, ką mes jau aptarėme, ir jūs turėtumėte bent jau paaiškinti, kaip tie tam tikri komponentai tinka „React“ ekosistemai.

Įrašyta būsena prie jūsų komponento (būsena)

Kitas sąraše yra būklė. Anksčiau mes kalbėjome apie tai, kaip sunku valdyti vartotojo sąsajas, nes paprastai jos turi daug skirtingų būsenų. Ši sritis yra ta vieta, kur „React“ iš tikrųjų pradeda šviesti. Kiekvienas komponentas turi galimybę valdyti savo būseną ir, jei reikia, perduoti savo būseną antriniams komponentams.

Grįžtant prie ankstesnio „Twitter“ pavyzdžio, „UserInfo“ komponentas (paryškintas aukščiau rausva spalva) yra atsakingas už vartotojo informacijos būsenos (arba duomenų) valdymą. Jei kitam komponentui taip pat reikėjo šios būsenos / duomenų, tačiau ta būsena nebuvo tiesioginis „UserInfo“ komponento antrinis komponentas, tuomet sukursite kitą komponentą, kuris bus tiesioginis „UserInfo“ ir kito komponento (arba abiejų komponentų, kuriems reikalinga ta būsena) pradinė dalis ). Tada jūs perduosite būseną kaip atramas į vaiko komponentus. Kitaip tariant, jei turite daugiakomponentę hierarchiją, įprastas pirminis komponentas turėtų valdyti būseną ir perduoti ją savo komponentams naudodamas rekvizitus.

Pažvelkime į pavyzdinį komponentą naudodamiesi jo vidine būsena.

klasės „HelloUser“ pratęsia „React.Component“ {
  konstruktorius (rekvizitai) {
    super (rekvizitai)
this.state = {
      vartotojo vardas: 'tylermcginnis'
    }
  }
  pateikti () {
    grįžti (
      
        Sveiki, {this.state.username}       
    )   } }

Su šiuo pavyzdžiu pristatėme naują sintaksę. Pirmasis, kurį pastebėsite, yra konstruktoriaus metodas. Remiantis aukščiau pateiktu apibrėžimu, konstruktoriaus metodas yra „būdas, kuriuo jūs nustatote komponento būseną“. Kitaip tariant, visi duomenys, kuriuos įdėjote į šią valstybės sąvoką konstruktoriaus viduje, bus to komponento būsenos dalis.

Aukščiau pateiktame kode mes savo komponentui sakome, kad norime, kad jis sektų vartotojo vardą. Šį naudotojo vardą dabar galime naudoti mūsų komponente atlikdami {this.state.username}, tai yra būtent tai, ką darome pateikdami renderio metodą.

Paskutinis dalykas, apie kurį reikia kalbėti su valstybe, yra tas, kad mūsų komponentui reikia sugebėjimo modifikuoti savo vidinę būseną. Mes tai darome metodu, vadinamu setState. Prisimenate anksčiau, kai kalbėdavome apie virtualiojo domino perteikimą, kai tik pasikeitė duomenys?

Signalas pranešti apie mūsų programą pasikeitė kai kurie duomenys → Padaryti virtualų DOM iš naujo → Paskleisti ankstesnį virtualų DOM su nauju virtualiu DOM → Tikruosius DOM atnaujinti tik atlikus reikiamus pakeitimus.

Tas „signalas pranešti apie mūsų programos kai kuriuos duomenis pasikeitė“ iš tikrųjų yra tik „setState“. Kai iškviečiama „setState“, virtualus DOM vėl pateikiamas, diff algoritmas vykdomas, o tikrasis DOM atnaujinamas reikiamais pakeitimais.

Primename, kad žemiau pateiktame kode įvesdami „setState“, mes taip pat pristatysime kelis įvykius, kurie yra mūsų sąraše. Du paukščiai, vienas akmuo.

Taigi kitame kodo pavyzdyje dabar turėsime įvesties langelį, kuris, kas nors įvedus jį, automatiškai atnaujins mūsų būseną ir pakeis vartotojo vardą.

klasės „HelloUser“ pratęsia „React.Component“ {
  konstruktorius (rekvizitai) {
    super (rekvizitai)
this.state = {
      vartotojo vardas: 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind (tai)
  }
  „rankena pakeisti“ (e) {
    this.setState ({
      vartotojo vardas: e.target.value
    })
  }
  pateikti () {
    grįžti (
      
        Sveiki, {this.state.username}
        Pakeisti vardą:         <įvestis           type = "text"           value = {this.state.username}           onChange = {this.handleChange}         />       
    )   } }

Atminkite, kad pristatėme dar keletą dalykų. Pirmas dalykas yra „handChange“ metodas. Šis metodas skambins kiekvieną kartą, kai vartotojas įves įvesties lauką. Kai bus iškviestas „handChange“, jis paskambins „setState“, kad iš naujo apibrėžtų mūsų vartotojo vardą, atsižvelgdamas į tai, kas buvo įvesta įvesties laukelyje (e.target.value). Atminkite, kad kai tik pašaukiama „setState“, „React“ sukuria naują virtualų DOM, padaro diferencialą, tada atnaujina tikrą DOM.

Dabar pažvelkime į pateikimo metodą. Pridėjome naują eilutę, kurioje yra įvesties laukas. Akivaizdu, kad įvesties lauko tipas bus tekstas. Reikšmė bus mūsų vartotojo vardo, kuris iš pradžių buvo apibrėžtas naudojant metodą getInitialState, vertė, kuri bus atnaujinta rankinio keitimo metodu.

Atminkite, kad yra naujas atributas, kurio greičiausiai dar niekada nematėte, „onChange“. „onChange“ yra reagavimo dalykas, ir jis vadinsis bet kuriuo jūsų nurodytu metodu kiekvieną kartą, kai pasikeis vertė įvesties laukelyje - šiuo atveju mūsų nurodytas metodas buvo „handChange“.

Aukščiau pateikto kodo procesas vyks maždaug taip.

Vartotojas įveda į įvesties lauką → iškviečiamas tvarkymas „ChangeChange“ → mūsų komponento būsena nustatoma nauja reikšme → „React“ pateikia virtualų DOM → „React“ diferencijuoja pakeitimą → „Real DOM“ atnaujinama.

Vėliau, kai uždengsime rekvizitus, pamatysime keletą sudėtingesnių naudojimo atvejų, kai tvarkoma.

Mes jau ten! Jei negalite paaiškinti paryškintų elementų žemiau, eikite iš naujo perskaityti tą skyrių. Vienas patarimas, kaip tikrai mokytis reaguoti: neleiskite pasyviai skaityti tai, kad suteikiate klaidingą saugumo jausmą, kad iš tikrųjų žinote, kas vyksta, ir galite iš naujo sukurti tai, ką darome. Eikite į „CodeSandbox“ ir pabandykite atkurti (arba sukurti savo) komponentus, nežiūrėdami į tai, ką aš padariau. Tai yra vienintelis būdas, kai jūs tikrai pradėsite mokytis kurti naudodamiesi „React“. Tai reikalinga šiam mokymui ir kitiems dalykams.

 JSX - leidžia mums rašyti HTML kaip sintaksė, kuri gaunama
paversta lengvais „Java“ objektais.
 Virtualus DOM - tikrovės „JavaScript“ vaizdas
DOM.
 „React.Component“ - būdas, kuriuo sukuriate naują komponentą.
 pateikti (metodas) - apibūdina, kaip atrodys vartotojo sąsaja
tam tikras komponentas.
 „ReactDOM.render“ - pateikia „React“ komponentą DOM mazgui.
 būsena - komponento vidinė duomenų saugykla (objektas).
 konstruktorius (this.state) - būdas, kuriuo jūs įsitvirtinate
pradinė komponento būsena.
 „setState“ - pagalbinis metodas, naudojamas atnaujinti a būseną
komponentą ir iš naujo atvaizduoti vartotojo sąsają
rekvizitai - duomenys, kurie perduodami vaikų komponentui
iš pirminio komponento.
„propTypes“ - leidžia kontroliuoti buvimą ar tipus
tam tikri rekvizitai perduoti vaiko komponentui.
defaultProps - leidžia nustatyti numatytuosius komponentų rekvizitus.
Komponentas LifeCycle
  - componentsDidMount - sudedamas įdėjus komponentą
  - komponentasWillUnmount - suaktyvinamas prieš komponentą išmontuojant
  - getDerivedStateFromProps - suaktyvinamas, kai komponentas pritvirtinamas ir
kai butaforija pasikeičia. Naudojamas atnaujinti a būseną
komponentas, kai jo rekvizitai keičiasi
Renginiai
  - paspaudus
  - „onSubmit“
  - onChange

Priimančioji būsena iš pagrindinio komponento (rekvizitai, „propTypes“, „getDefaultProps“)

Jau keletą kartų kalbėjome apie butaforijas, nes sunku iš tikrųjų daug nuveikti be jų. Pagal mūsų aukščiau pateiktą apibrėžimą rekvizitai yra duomenys, kurie perduodami antriniam komponentui iš pirminio komponento. Tai leidžia mūsų „React“ architektūrai išlikti gana tiesmukiškai. Tvarkykite aukščiausią pirminį komponentą, kuriam reikia naudoti konkrečius duomenis, ir jei turite vaikų komponentą, kuriam taip pat reikia tų duomenų, perduokite tuos duomenis kaip rekvizitus.

Čia yra labai paprastas rekvizitų naudojimo pavyzdys.

klasės „HelloUser“ pratęsia „React.Component“ {
  pateikti () {
    grįžti (
      
Sveiki, {this.props.name}
    )   } }
ReactDOM.render (
  ,
  document.getElementById („šaknis“)
);

Pastaba 9 eilutėje turime atributą pavadinimu, kurio vertė yra „Tyler“. Dabar savo komponente galime naudoti {this.props.name} norėdami gauti „Tyler“.

Pažvelkime į sudėtingesnį pavyzdį. Dabar turėsime du komponentus. Vienas iš tėvų, vienas vaikas. Tėvas ketina sekti būseną ir perduoti dalį šios būsenos vaikui kaip rekvizitus. Pirmiausia pažvelkime į tą pagrindinį komponentą.

Pagrindinis komponentas:

klasės „FriendsContainer“ pratęsia „React.Component“ {
  konstruktorius (rekvizitai) {
    super (rekvizitai)
this.state = {
      pavadinimas: „Tyler McGinnis“,
      draugai: [
        „Jake Lingwall“,
        „Sarah Drasner“,
        „Merrick Christensen“
      ]
    }
  }
  pateikti () {
    grįžti (
      
        

Vardas: {this.state.name}

               
    )   } }

Šiame komponente, ko dar nematėme, vyksta labai mažai. Mes turime pradinę būseną ir dalį tos pradinės būsenos perduodame kitam komponentui. Didžioji naujojo kodo dalis bus iš šio antrinio komponento, todėl atidžiau pažvelkime į tai.

Vaiko komponentas:

klasės „ShowList“ pratęsia „React.Component“ {
  pateikti () {
    grįžti (
      
        

Draugai

        
              {this.props.names.map ((draugas) =>
  • {draugas}
  • )}         
      
    )   } }

Atminkite, kad kodas, kuris bus grąžintas naudojant mūsų pateikimo metodą, parodo, kaip turėtų atrodyti tikrasis DOM. Jei dar nesate susipažinę su Array.prototype.map, šis kodas gali atrodyti šiek tiek nuostabus. Visas žemėlapis yra toks: jis sukuria naują masyvą, iškviečia mūsų atgalinio iškvietimo funkciją kiekvienam masyvo elementui ir užpildo naują masyvą rezultatu, iškviečiant kiekvieno elemento atgalinio ryšio funkciją. Pavyzdžiui,

const draugai = [
  „Jake Lingwall“,
  „Sarah Drasner“,
  „Merrick Christensen“
];
const listItems = friends.map ((draugas) => {
  grąžinti „
  • “ + draugas + „
  • “; });
    console.log (listItems);

    Aukščiau pateiktame konsolės.log žurnale pateikiami [„

  • Jake Lingwall
  • “, „
  • Murphy Randall
  • “, „
  • Merrick Christensen
  • “].

    Atkreipkite dėmesį, kas nutiko, jei mes padarėme naują masyvą ir pridėjome

  • prie kiekvieno elemento originaliame masyve.

    Puiku, kad žemėlapis puikiai tinka „React“ (ir yra integruotas „JavaScript“). Taigi aukščiau esančiame vaikų komponente mes sudarome vardus, apvyniojame kiekvieną pavadinimą po

  • žymų ir įrašome juos į kintamąjį „listItems“. Tuomet mūsų pateikimo būdas grąžina netvarkingą sąrašą su visais mūsų draugais.

    Pažvelkime į dar vieną pavyzdį, prieš pradėdami kalbėti apie rekvizitus. Svarbu suprasti, kad ten, kur yra duomenys, yra tiksli vieta, kur norite manipuliuoti tais duomenimis. Tai palengvina jūsų duomenų pagrįstumą. Visi tam tikro duomenų gavimo / nustatymo metodai visada bus tame pačiame komponente, kur tie duomenys buvo apibrėžti. Jei jums reikėjo manipuliuoti kai kuriais duomenimis ne toje vietoje, kur duomenys yra, įterpimo / nustatymo metodą perduotumėte į tą komponentą kaip rekvizitus. Pažvelkime į tokį pavyzdį.

    klasės „FriendsContainer“ pratęsia „React.Component“ {
      konstruktorius (rekvizitai) {
        super (rekvizitai)
    this.state = {
          pavadinimas: „Tyler McGinnis“,
          draugai: [
            „Jake Lingwall“,
            „Sarah Drasner“,
            „Merrick Christensen“
          ],
        }
    this.addFriend = this.addFriend.bind (tai)
      }
      addFriend (draugas) {
        this.setState ((būsena) => ({
          draugai: state.friends.concat ([draugas])
        }))
      }
      pateikti () {
        grįžti (
          
            

    Vardas: {this.state.name}

                            
        )   } }
    . Atminkite, kad naudodami „addFriend“ metodą, mes pristatėme naują būdą, kaip iškviesti „setState“. Užuot perdavę objektą, mes perduodame jam funkciją, kuri tada perduodama būsenai. Kai nustatote naują savo komponento būseną pagal ankstesnę būseną (kaip tai darome su savo draugų masyvu), norite perduoti „setState“ funkciją, kuri įgauna esamą būseną ir grąžina duomenis, kad sujungtų su naujais. valstybės. Pažiūrėkite čia.
    klasės „AddFriend“ pratęsia „React.Component“ {
      konstruktorius (rekvizitai) {
        super (rekvizitai)
    this.state = {
          naujas draugas: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind (tai)
        this.handleAddNew = this.handleAddNew.bind (this)
      }
      „updateNewFriend“ (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          naujas draugas: ''
        })
      }
      pateikti () {
        grįžti (
          
            <įvestis           type = "text"           value = {this.state.newFriend}           onChange = {this.updateNewFriend}         />          Pridėti draugą       
        )   } }
    klasės „ShowList“ pratęsia „React.Component“ {
      pateikti () {
        grįžti (
          
            

    Draugai

            
                {this.props.names.map ((draugas) => {             grąžinti
    • {draugas}
    •           })}         
          
        )   } }

    Pastebėsite, kad aukščiau pateiktas kodas dažniausiai nesiskiria nuo ankstesnio pavyzdžio, išskyrus tai, kad dabar mes galime pridėti vardą į savo draugų sąrašą. Atkreipkite dėmesį, kaip aš sukūriau naują „AddFriend“ komponentą, kuris valdo naują draugą, kurį ketiname pridėti.

    Taip yra todėl, kad pagrindiniam komponentui („FriendContainer“) nerūpi jūsų pridedamas naujas draugas, jam rūpi tik visi jūsų draugai (draugų masyvas). Kadangi mes laikomės taisyklės, kad tik su manipuliatoriumi galite tvarkyti duomenis, kurie jam rūpi, mes perkėlėme „addFriend“ metodą į mūsų „AddFriend“ komponentą kaip rekvizitą ir mes jį vadiname su naujuoju draugu, kai tik tvarkome „AddNew “. metodas vadinamas.

    Šiuo metu aš rekomenduoju pabandyti atkurti tą pačią funkciją savarankiškai, naudodamas aukščiau pateiktą kodą kaip vadovą, kai esate užstrigę 3–4 minutes.

    Prieš pereidami iš rekvizitų, norėčiau aptarti dar dvi „React“ funkcijas, susijusias su rekvizitais. Jie yra „propTypes“ ir „defaultProps“. Čia per daug nesigilinsiu, nes abu yra gana tiesmukiški.

    atramos tipai leidžia jums kontroliuoti tam tikrų rekvizitų, perduodamų vaiko komponentui, buvimą ar tipus. Naudodami „propTypes“ galite nurodyti, kad reikia tam tikrų rekvizitų arba kad tam tikri rekvizitai yra tam tikro tipo.

    Nuo „React 15“ „PropTypes“ nebeįtraukiama į „React“ paketą. Turėsite įdiegti atskirai, paleisdami „npm install prop-tipus“.

    „defaultProps“ leidžia nurodyti tam tikrų rekvizitų numatytąją (arba atsarginę) vertę tuo atveju, jei tie rekvizitai niekada nebus perduoti komponentui.

    Aš modifikavau mūsų komponentus nuo ankstesnių iki dabar, naudodamas „propTypes“, norėdamas reikalauti, kad „addFriend“ būtų funkcija ir kad ji būtų perduota „AddFriend“ komponentui. Be to, naudodamas „defaultProps“, aš nurodiau, kad jei „ShowList“ komponentui nebus suteiktas joks draugų rinkinys, jis pagal nutylėjimą pasirinks tuščią masyvą.

    importuoti „reaguoti“ iš „reaguoti“
    importuoti „PropTypes“ iš „prop-tips“
    klasės „AddFriend“ pratęsia „React.Component“ {
      konstruktorius (rekvizitai) {
        super (rekvizitai)
    this.state = {
          naujas draugas: ''
        }
      }
      „updateNewFriend“ (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          naujas draugas: ''
        })
      }
      pateikti () {
        grįžti (
          
            <įvestis           type = "text"           value = {this.state.newFriend}           onChange = {this.updateNewFriend}         />          Pridėti draugą       
        )   } }
    „AddFriend.propTypes“: {
      „addNew“: „PropTypes.func.isRequired“
    }
    klasės „ShowList“ pratęsia „React.Component“ {
      pateikti () {
        grįžti (
          
            

    Draugai

            
                {this.props.names.map ((draugas) => {             grąžinti
    • {draugas}
    •           })}         
          
        )   } }
    ShowList.defaultProps = {
      vardai: []
    }

    Gerai, kad mes einame į paskutinę šios pirmosios pamokos dalį. Pažvelkime į mūsų vadovą ir sužinokime, ką mums liko.

     JSX - leidžia mums rašyti HTML kaip sintaksė, kuri gaunama
    paversta lengvais „JavaScript“ objektais.
     Virtualus DOM - tikrovės „JavaScript“ vaizdas
    DOM.
     „React.Component“ - būdas, kuriuo sukuriate naują komponentą.
     pateikti (metodas) - apibūdina, kaip atrodys vartotojo sąsaja
    tam tikras komponentas.
     „ReactDOM.render“ - pateikia „React“ komponentą DOM mazgui.
     būsena - komponento vidinė duomenų saugykla (objektas).
     konstruktorius (this.state) - būdas, kuriuo jūs įsitvirtinate
    pradinė komponento būsena.
     „setState“ - pagalbinis metodas, naudojamas atnaujinti a būseną
    komponentą ir iš naujo atvaizduoti vartotojo sąsają
    Ps rekvizitai - duomenys, perduodami į komponentą vaikams
    iš pirminio komponento.
     „propTypes“ - leidžia kontroliuoti buvimą ar tipus
    tam tikri rekvizitai perduoti vaiko komponentui.
     „defaultProps“ - leidžia nustatyti numatytuosius komponentų rekvizitus.
    Komponentas LifeCycle
      - componentsDidMount - sudedamas įdėjus komponentą
      - komponentasWillUnmount - suaktyvinamas prieš komponentą išmontuojant
      - getDerivedStateFromProps - suaktyvinamas, kai komponentas pritvirtinamas ir
    kai butaforija pasikeičia. Naudojamas atnaujinti a būseną
    komponentas, kai jo rekvizitai keičiasi
     Renginiai
      - paspaudus
      - „onSubmit“
      - onChange

    Mes taip arti!

    Komponentas LifeCycle

    Kiekvienas jūsų pagamintas komponentas turės savo gyvenimo ciklo įvykius, naudingus įvairiems dalykams. Pvz., Jei mes norėtume pateikti ajax užklausą dėl pradinio pateikimo ir surinkti tam tikrus duomenis, kur mes tai padarytume? Arba, jei mes norėtume vadovautis logika, kai pasikeis mūsų rekvizitai, kaip mes tai padarysime? Įvairūs gyvenimo ciklo įvykiai yra atsakymai į abu dalykus. Padalinkime juos.

    klasės programa išplečia „React.Component“ {
      konstruktorius (rekvizitai) {
        super (rekvizitai)
    this.state = {
          vardas: 'Tyler McGinnis'
        }
      }
      komponentDidMount () {
        // Iššaukiama, kai komponentas prijungiamas prie DOM
        // Tinka AJAX užklausoms
      }
      static getDerivedStateFromProps (nextProps, prevState) {
        // Objektas, kurį grįšite iš šios funkcijos
        // būti sujungtas su esama būkle.
      }
      componentsWillUnmount () {
        // NETIESIOGINIAI vadinami prieš išmontuojant komponentą
        // Geras klausytojams išvalyti
      }
      pateikti () {
        grįžti (
          
            Sveiki, {this.state.name}       
        )   } }

    komponentDidMount - iššaukiama vieną kartą po pirminio pateikimo. Kadangi komponentas jau buvo iškviestas, kai šis metodas yra iškviestas, jūs turite prieigą prie virtualiojo DOM, jei jums jo reikia. Tai padarysite paskambinę this.getDOMNode (). Taigi, tai yra gyvenimo ciklo įvykis, kuriame pateikite AJAX užklausas, kad gautumėte tam tikrus duomenis.

    komponentasWillUnmount - Šis gyvenimo ciklas iškviečiamas prieš pat komponentą atjungiant nuo DOM. Čia galite atlikti būtinus valymo darbus.

    getDerivedStateFromProps - kartais turėsite atnaujinti savo komponento būseną, remdamiesi rekvizitais, kurie yra perduodami. Tai yra gyvenimo ciklo metodas, kurį atlikdami tai atliksite. Tai bus perduota rekvizitai ir būsena, o grąžintas objektas bus sujungtas su dabartine būsena.

    Na, jei jūs manęs įstrigote iki šio momento, puikus darbas. Tikiuosi, kad ši instrukcija buvo jums naudinga, ir jūs bent jau jaučiatės švelniai su „React“.

    Norėdami pamatyti daug gilesnius „React“ pagrindus, apsilankykite mūsų „React“ pagrindų kursuose.

    Taileris McGinnis