Komplexný sprievodca pre React.js v roku 2018

Tento článok bol pôvodne publikovaný v januári 2015, ale bol nedávno aktualizovaný na React 16.3 a všetku dobrotu, ktorú obsahuje.

Komponenty sú stavebnými kameňmi React. Ak prichádzate z uhlového pozadia, komponenty sú veľmi podobné smerniciam. Ak prichádzate z iného prostredia, ide v podstate o widgety alebo moduly.

Komponent si môžete predstaviť ako súbor HTML, CSS, JS a niektoré interné údaje špecifické pre tento komponent. Rád považujem komponenty React za koly webu. Majú všetko, čo potrebujete, zabalené v príjemnom skladateľnom zväzku.

Tieto komponenty sú definované buď v čistom skripte JavaScript, alebo môžu byť definované v tom, čo tím React nazýva „JSX“. Ak sa rozhodnete používať JSX (čo pravdepodobne bude, je to celkom štandardné - a to je to, čo použijeme pre tento tutoriál), budete potrebovať nejakú fázu kompilácie, aby ste mohli previesť JSX na JavaScript. K tomu sa však dostaneme neskôr.

Čo robí React tak pohodlným na vytváranie používateľských rozhraní, je to, že údaje sa prijímajú buď z nadradeného komponentu komponentu, alebo sú obsiahnuté v samotnom komponente. Predtým, ako skočíme do kódu, skontrolujte, či máme na vysokej úrovni znalosti o komponentoch.

Hore máme fotku môjho Twitter profilu. Ak by sme chceli túto stránku v službe React znova vytvoriť, rozdelili by sme rôzne sekcie na rôzne komponenty (zvýraznené). Všimnite si, že komponenty môžu mať v sebe vnorené komponenty.

Mohli by sme pomenovať ľavý komponent (ružový) komponent UserInfo. Vo vnútri komponenty UserInfo máme ďalšiu súčasť (oranžovú), ktorú by sme mohli nazvať komponent UserImages. Spôsob, akým tento vzťah rodič / dieťa funguje, je náš komponent UserInfo alebo nadradený komponent, v ktorom žije „stav“ údajov pre seba aj pre komponent UserImages (podradený komponent). Ak by sme chceli použiť akúkoľvek časť údajov nadradeného komponentu v podradenom komponente, čo robíme, odovzdali by sme tieto údaje podradenému komponentu ako atribút. V tomto príklade odovzdáme komponentu UserImages všetky obrázky, ktoré má používateľ (ktoré momentálne žijú v komponente UserInfo).

O chvíľu sa dostaneme k podrobnostiam kódu, ale chcem, aby ste pochopili väčší obraz toho, čo sa tu deje. Táto hierarchia rodiča / dieťaťa robí správu našich údajov relatívne jednoduchou, pretože presne vieme, kde naše údaje žijú, a nemôžeme s nimi manipulovať nikde inde.

Nižšie uvedené témy sú základnými aspektmi programu React. Ak rozumiete všetkým a ich účelom, po prečítaní tohto návodu budete na veľmi dobrom mieste.

JSX - Umožňuje nám písať HTML ako syntax, ktorá sa získa
transformované na ľahké objekty JavaScriptu.
Virtual DOM - reprezentácia skutočného jazyka JavaScript
DOM.
React.Component - spôsob, akým vytvoríte novú súčasť.
render (metóda) - Opisuje, ako bude používateľské rozhranie vyzerať
konkrétny komponent.
ReactDOM.render - Poskytuje komponent React do uzla DOM.
state - Interný dátový sklad (objekt) komponentu.
constructor (this.state) - spôsob, akým založíte
počiatočný stav komponentu.
setState - Pomocná metóda použitá na aktualizáciu stavu a
komponent a opätovné vykreslenie používateľského rozhrania
rekvizity - údaje, ktoré sa odovzdávajú podradenému komponentu
z rodičovskej zložky.
propTypes - Umožňuje vám kontrolovať prítomnosť alebo typy
určité rekvizity odovzdané detskej komponente.
defaultProps - Umožňuje vám nastaviť predvolené rekvizity pre váš komponent.
Životný cyklus komponentov
  - componentDidMount - Vypaľuje sa po namontovaní komponentu
  - componentWillUnmount - Vypálené skôr, ako sa komponent odpojí
  - getDerivedStateFromProps - Vypaľuje sa, keď sa komponent pripojí a
vždy, keď sa podpery zmenia. Používa sa na aktualizáciu stavu a
komponent pri zmene jeho podpery
Diania
  - po kliknutí
  - onSubmit
  - onZmeniť

Viem, že sa to zdá veľa, ale čoskoro uvidíte, ako je každý kus zásadný pri zostavovaní robustných aplikácií s Reactom (a tiež som si nerobil srandu, keď som povedal, že to chcem urobiť komplexným sprievodcom).

V tomto okamihu by ste mali veľmi dobre pochopiť, ako React funguje. Teraz prejdeme na nejaký kód.

Vytvorenie prvého komponentu (JSX, Virtual DOM, render, ReactDOM.render)

Poďme do toho a postavíme si svoj prvý komponent React.

Na vytvorenie komponentu React použijete triedu ES6. Ak nie ste s triedami oboznámení, môžete si prečítať nižšie alebo si o nich môžete prečítať podrobnejšie tu:

import Reagovať z „reagovať“
import ReactDOM z 'Reagovať'
trieda HelloWorld rozširuje React.Component {
  render () {
    návrat (
      
Ahoj svet!
    )   } }
ReactDOM.render (, document.getElementById ('root'));

Všimnite si, že jedinou metódou v našej triede je render. Každá komponenta musí mať metódu renderovania. Dôvodom je vykreslenie je popis používateľského rozhrania (používateľského rozhrania) nášho komponentu. V tomto príklade je text, ktorý sa zobrazí na obrazovke, kde je táto komponenta vykreslená, Hello World!

Teraz sa pozrime, čo robí ReactDOM. ReactDOM.render má dva argumenty. Prvý argument je komponent, ktorý chcete vykresliť, zatiaľ čo druhým argumentom je uzol DOM, kde chcete komponent vykresliť.

Všimnite si, že používame server ReactDOM.render a nie React.render. To bola zmena vykonaná v React .14, aby sa React stal viac modulárnym. Dáva to zmysel, keď si myslíte, že React dokáže vykresliť viac vecí než len prvok DOM.

Vo vyššie uvedenom príklade hovoríme spoločnosti React, aby zobrala náš komponent HelloWorld a vykreslila ho k prvku s ID root. Z dôvodu vzťahov medzi rodičmi a deťmi spoločnosti React, o ktorých sme hovorili skôr, musíte vo svojej aplikácii ReactDOM.render zvyčajne používať iba raz, pretože vykreslením najviac rodičovskej súčasti sa vykreslia aj všetky podradené komponenty.

Teraz by ste sa mohli cítiť trochu čudne hádzať „HTML“ do svojho JavaScriptu. Od chvíle, keď ste sa začali učiť vývoj webových aplikácií, vám bolo povedané, že svoju logiku by ste mali mať mimo dohľadu, to znamená, že váš JavaScript by nemal byť oddelený od vášho HTML.

Táto paradigma je silná, má však určité slabiny. Nechcem, aby sa tento tutoriál dlhšie snažil presvedčiť, že táto myšlienka je krok správnym smerom, takže ak vás táto myšlienka stále obťažuje, môžete sa pozrieť na tento odkaz. Keď sa dozviete viac o React, malo by sa toto znepokojenie rýchlo zmierniť.

„HTML“, ktoré píšete metódou renderovania, nie je HTML, ale to, čo React nazýva „JSX“. JSX nám jednoducho umožňuje písať syntax podobnú HTML, ktorá sa (nakoniec) transformuje na ľahké objekty JavaScript. React potom dokáže tieto objekty JavaScript zobrať a vytvoriť z nich virtuálnu DOM alebo reprezentáciu skutočnej DOM v JavaScripte. Vytvára sa tak situácia, v ktorej môžete získať prístup k šablónam pomocou sily JavaScriptu.

Pri pohľade na príklad uvedený nižšie bude toto vaše JSX nakoniec skompilované.

trieda HelloWorld rozširuje React.Component {
  render () {
    return React.createElement ("div", null, "Hello World");
  }
}
Teraz sa môžete vzdať fázy transformácie JSX -> JS a napísať komponenty React, ako je vyššie uvedený kód. Ale ako si dokážete predstaviť, bolo by to dosť zložité. Neviem o nikom, kto nepoužíva JSX. Viac informácií o tom, čo JSX zostavuje, nájdete v časti React Elements vs React Components.

Až do tohto bodu sme skutočne zdôrazňovali význam tejto novej virtuálnej paradigmy DOM, do ktorej skočíme. Dôvod, prečo tím React šiel s týmto prístupom je ten, že keďže virtuálny DOM je skriptom JavaScript skutočnej DOM, React dokáže sledovať rozdiel medzi súčasným virtuálnym DOM (vypočítaný po niektorých zmenách údajov) s predchádzajúcim virtuálnym DOM (vypočítané pred niektorými zmenami údajov). React potom izoluje zmeny medzi starou a novou virtuálnou DOM a potom aktualizuje skutočnú DOM iba o potrebné zmeny.

Inými slovami, pretože manipulácia so skutočnou DOM je pomalá, je React schopný minimalizovať manipulácie so skutočnou DOM sledovaním virtuálnej DOM a aktualizovať skutočnú DOM iba v nevyhnutných prípadoch a iba s nevyhnutnými zmenami. (Viac informácií tu).

UI majú spravidla veľa štátov, ktoré sťažujú správu štátu. Opakovaným vykreslením virtuálnej DOM pri každej zmene stavu umožňuje React ľahšie premýšľať o tom, v akom stave je vaša aplikácia. Proces vyzerá takto:

Niektorá používateľská udalosť, ktorá mení stav vašej aplikácie → Znovu vykresliť virtuálnu DOM → Znížiť predchádzajúcu virtuálnu DOM s novou virtuálnou DOM → Aktualizovať iba skutočnú DOM s potrebnými zmenami.

Pretože sa jedná o tento proces transformácie z JSX na JS, musíte sa počas vývoja nastaviť nejakú fázu transformácie. V druhej časti tejto série predstavím Webpack a Babel, ktorí vykonajú túto transformáciu.

Pozrime sa na kontrolný zoznam „Najdôležitejšie súčasti reakcie“ a uvidíme, kde sa momentálne nachádzame.

 JSX - Umožňuje nám písať HTML ako syntax, ktorá sa získa
transformované na ľahké objekty JavaScriptu.
 Virtuálny DOM - reprezentácia skutočného jazyka JavaScript
DOM.
 React.Component - spôsob, akým vytvoríte novú súčasť.
 render (metóda) - Opisuje, ako bude používateľské rozhranie vyzerať
konkrétny komponent.
 ReactDOM.render - Poskytuje komponent React do uzla DOM.
state - Interný dátový sklad (objekt) komponentu.
constructor (this.state) - spôsob, akým založíte
počiatočný stav komponentu.
setState - Pomocná metóda použitá na aktualizáciu stavu a
komponent a znovu vykreslenie používateľského rozhrania
rekvizity - údaje, ktoré sa odovzdávajú podradenému komponentu
z rodičovskej zložky.
propTypes - Umožňuje vám kontrolovať prítomnosť alebo typy
určité rekvizity odovzdané detskej komponente.
defaultProps - Umožňuje vám nastaviť predvolené rekvizity pre váš komponent.
Životný cyklus komponentov
  - componentDidMount - Vypaľuje sa po namontovaní komponentu
  - componentWillUnmount - Vypálené skôr, ako sa komponent odpojí
  - getDerivedStateFromProps - Vypaľuje sa, keď sa komponent pripojí a
vždy, keď sa podpery zmenia. Používa sa na aktualizáciu stavu a
komponent pri zmene jeho podpery
Diania
  - po kliknutí
  - onSubmit
  - onZmeniť

Robíme dobré tempo. Všetko, čo je uvedené tučným písmom, je už pokryté a mali by ste byť schopní vysvetliť, ako sa tieto určité komponenty zmestia do ekosystému React.

Pridanie stavu do vášho komponentu (štátu)

Ďalej na zozname je stav. Skôr sme hovorili o tom, ako je ťažké spravovať používateľské rozhrania, pretože zvyčajne majú veľa rôznych stavov. To je miesto, kde React skutočne začína žiariť. Každý komponent má schopnosť riadiť svoj vlastný stav av prípade potreby odovzdať svoj stav nadradeným komponentom.

Vráťme sa k príkladu Twitteru z minulosti, komponent UserInfo (zvýraznený ružovou farbou vyššie) je zodpovedný za správu stavu (alebo údajov) informácií o používateľovi. Ak iný komponent tiež potreboval tento stav / dáta, ale tento stav nebol priamym podriadeným komponentom UserInfo, potom by ste vytvorili iný komponent, ktorý by bol priamym nadradeným používateľom UserInfo a druhého komponentu (alebo obidvoch komponentov, ktoré tento stav vyžadovali). ). Potom by ste štát odovzdali ako rekvizity do detských komponentov. Inými slovami, ak máte viaczložkovú hierarchiu, spoločný nadradený komponent by mal spravovať štát a prostredníctvom rekvizít ho odovzdávať svojim podradeným komponentom.

Pozrime sa na príklad komponentu pomocou vlastného vnútorného stavu.

trieda HelloUser rozširuje React.Component {
  konštruktor (rekvizity) {
    super (rekvizity)
this.state = {
      užívateľské meno: 'tylermcginnis'
    }
  }
  render () {
    návrat (
      
        Dobrý deň, {this.state.username}            )   } }

S týmto príkladom sme uviedli novú syntax. Prvá, ktorú si všimnete, je metóda konštruktora. Z vyššie uvedenej definície je metóda konštruktora „Spôsob, akým nastavíte stav komponentu“. Inými slovami, všetky údaje, ktoré vložíte na tento server.state vo vnútri konštruktora, budú súčasťou stavu tohto komponentu.

Vo vyššie uvedenom kóde hovoríme nášmu komponentu, že chceme, aby sledoval používateľské meno. Toto používateľské meno sa teraz dá použiť v rámci našej súčasti vykonaním {this.state.username}, čo je presne to, čo robíme v našej metóde renderovania.

Poslednou vecou, ​​o ktorej by sme mali hovoriť so štátom, je to, že naša zložka potrebuje schopnosť zmeniť svoj vnútorný stav. Robíme to pomocou metódy s názvom setState. Pamätáte si predtým, keď sme hovorili o opätovnom vykreslení virtuálneho domu pri každej zmene údajov?

Signál upozorňujúci na našu aplikáciu, že niektoré údaje sa zmenili → Znovu vykresliť virtuálnu DOM → Rozdiel s predchádzajúcou virtuálnou DOM s novou virtuálnou DOM → Aktualizovať iba skutočnú DOM s potrebnými zmenami.

Tento „signál upozorniť našu aplikáciu na niektoré údaje sa zmenil“ je vlastne iba setState. Vždy, keď sa volá setState, virtuálny DOM sa znova vykreslí, spustí sa algoritmus diff a skutočná DOM sa aktualizuje o potrebné zmeny.

Ako sprievodnú poznámku uvedieme v nasledujúcom kóde setState, predstavíme tiež niekoľko udalostí, ktoré sú na našom zozname. Dva vtáky, jeden kameň.

Takže v nasledujúcej ukážke kódu budeme mať vstupné pole, ktoré vždy, keď doň niekto zapíše, automaticky aktualizuje náš stav a zmení používateľské meno.

trieda HelloUser rozširuje React.Component {
  konštruktor (rekvizity) {
    super (rekvizity)
this.state = {
      užívateľské meno: 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind (this)
  }
  handleChange (e) {
    this.setState ({
      meno používateľa: e.target.value
    })
  }
  render () {
    návrat (
      
        Dobrý deň, {this.state.username}
        Zmeniť meno:                     )   } }

Upozorňujeme, že sme predstavili niekoľko ďalších vecí. Prvá vec je metóda handleChange. Táto metóda sa nazýva zakaždým, keď používateľ zadá vstupné pole. Keď sa volá handleChange, zavolá sa setState, aby sme znovu definovali naše používateľské meno podľa toho, čo bolo zadané do vstupného poľa (e.target.value). Pamätajte, že vždy, keď sa volá setState, React vytvorí nový virtuálny DOM, urobí rozdiel a potom aktualizuje skutočný DOM.

Teraz sa pozrime na náš spôsob vykreslenia. Pridali sme nový riadok, ktorý obsahuje vstupné pole. Typ vstupného poľa bude samozrejme text. Hodnota bude hodnota nášho používateľského mena, ktorá bola pôvodne definovaná v našej metóde getInitialState a bude aktualizovaná v metóde handleChange.

Všimnite si, že existuje nový atribút, ktorý ste pravdepodobne ešte nikdy nevideli. onChange je vec React a zavolá ktorúkoľvek metódu, ktorú zadáte pri každej zmene hodnoty vo vstupnom poli - v tomto prípade bola metóda, ktorú sme zadali, handleChange.

Postup pri vyššie uvedenom kóde by pokračoval takto.

Používateľ zadá do vstupného poľa → handleChange je vyvolaný → stav nášho komponentu je nastavený na novú hodnotu → React re-renderuje virtuálny DOM → React Diffs the change → Real DOM je aktualizovaný.

Neskôr, keď zakryjeme rekvizity, uvidíme niektoré pokročilejšie prípady použitia stavu manipulácie.

Dostávame sa tam! Ak neviete vysvetliť položky tučným písmom nižšie, prečítajte si znovu túto časť. Jeden tip na REÁLNE učenie Reagujte: nedovoľte, aby ste si to pasívne prečítali a poskytli vám falošný pocit bezpečia, že skutočne viete, čo sa deje, a môžete znova vytvoriť to, čo robíme. Zamierte na CodeSandbox a skúste znova vytvoriť (alebo vytvoriť vlastné) komponenty bez toho, aby ste sa zaoberali tým, čo som urobil. Je to jediný spôsob, ako sa skutočne môžete naučiť, ako s Reactom stavať. Toto platí pre tento tutoriál a nasledujúce.

 JSX - Umožňuje nám písať HTML ako syntax, ktorá sa získa
transformované na ľahké objekty JavaScriptu.
 Virtuálny DOM - reprezentácia skutočného jazyka JavaScript
DOM.
 React.Component - spôsob, akým vytvoríte novú súčasť.
 render (metóda) - Opisuje, ako bude používateľské rozhranie vyzerať
konkrétny komponent.
 ReactDOM.render - Poskytuje komponent React do uzla DOM.
 stav - Interný dátový sklad (objekt) komponentu.
 constructor (this.state) - spôsob, akým sa ustanovujete
počiatočný stav komponentu.
 setState - Pomocná metóda použitá na aktualizáciu stavu a
komponent a opätovné vykreslenie používateľského rozhrania
rekvizity - údaje, ktoré sa odovzdávajú podradenému komponentu
z rodičovskej zložky.
propTypes - Umožňuje vám kontrolovať prítomnosť alebo typy
určité rekvizity odovzdané detskej komponente.
defaultProps - Umožňuje vám nastaviť predvolené rekvizity pre váš komponent.
Životný cyklus komponentov
  - componentDidMount - Vypaľuje sa po namontovaní komponentu
  - componentWillUnmount - Vypálené skôr, ako sa komponent odpojí
  - getDerivedStateFromProps - Vypaľuje sa, keď sa komponent pripojí a
vždy, keď sa podpery zmenia. Používa sa na aktualizáciu stavu a
komponent pri zmene jeho podpery
Diania
  - po kliknutí
  - onSubmit
  - onZmeniť

Prijímajúci štát od nadradeného komponentu (rekvizity, propTypy, getDefaultProps)

O rekvizitách sme už niekoľkokrát hovorili, pretože bez nich je ťažké urobiť veľa. Podľa našej definície vyššie sú rekvizity údaje, ktoré sa prenášajú do podradeného komponentu z nadradeného komponentu. To umožňuje, aby naša architektúra React zostala celkom jednoduchá. Spracovať stav v najvyššej nadradenej súčasti, ktorá potrebuje použiť konkrétne údaje, a ak máte podradenú súčasť, ktorá tiež potrebuje tieto údaje, odovzdajte tieto údaje ako rekvizity.

Tu je veľmi jednoduchý príklad použitia rekvizít.

trieda HelloUser rozširuje React.Component {
  render () {
    návrat (
      
Dobrý deň, {this.props.name}
    )   } }
ReactDOM.render (
  ,
  document.getElementById ( 'koreň')
);

Všimnite si, že v riadku 9 máme atribút s názvom name s hodnotou „Tyler“. Teraz v našom komponente môžeme pomocou {this.props.name} získať „Tyler“.

Pozrime sa na pokročilejší príklad. Teraz budeme mať dve komponenty. Jeden rodič, jedno dieťa. Rodič bude sledovať stav a časť tohto stavu odovzdá dieťaťu ako rekvizity. Poďme sa najprv pozrieť na túto nadradenú súčasť.

Materská zložka:

class FriendsContainer rozširuje React.Component {
  konštruktor (rekvizity) {
    super (rekvizity)
this.state = {
      meno: 'Tyler McGinnis',
      priatelia: [
        „Jake Lingwall“,
        „Sarah Drasner“,
        „Merrick Christensen“
      ]
    }
  }
  render () {
    návrat (
      
        

Meno: {this.state.name}

                    )   } }

V tomto komponente sa toho veľa nedeje, čo sme predtým nevideli. Máme počiatočný stav a časť tohto počiatočného stavu odovzdávame inej zložke. Väčšina nového kódu bude pochádzať z tejto podradenej súčasti, preto sa na to podrobnejšie pozrieme.

Detský komponent:

class ShowList rozširuje React.Component {
  render () {
    návrat (
      
        

Priatelia

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

Nezabudnite, že kód, ktorý sa vracia z našej metódy vykresľovania, je vyjadrením toho, ako by mal vyzerať skutočný DOM. Ak nepoznáte Array.prototype.map, tento kód môže vyzerať trochu zvrátene. Celá mapa je, že vytvára nové pole, volá našu funkciu spätného volania pre každú položku v poli a vyplní nové pole s výsledkom volania funkcie spätného volania pre každú položku. Napríklad,

konšt priatelia = [
  „Jake Lingwall“,
  „Sarah Drasner“,
  „Merrick Christensen“
];
const listItems = friends.map ((friend) => {
  návrat "
  • " + priateľ + "
  • "; });
    console.log (ListItems);

    Vyššie uvedený príkaz console.log vráti ["

  • Jake Lingwall
  • ", "
  • Murphy Randall
  • ", "
  • Merrick Christensen
  • "].

    Všimnite si všetko, čo sa stalo, keď sme vytvorili nové pole a do každej položky v pôvodnom poli sme pridali

  • .

    Na mape je skvelé, že sa perfektne zmestí do React (a je zabudovaná do JavaScriptu). Takže v našom podradenom komponente vyššie mapujeme mená, jednotlivé názvy balíme do dvojíc značiek

  • a ukladáme ich do našej premennej ListItems. Potom naša metóda renderovania vráti neusporiadaný zoznam so všetkými našimi priateľmi.

    Pozrime sa na ešte jeden príklad, kým prestaneme hovoriť o rekvizitách. Je dôležité pochopiť, že všade, kde sú údaje uložené, je to presné miesto, kde chcete s údajmi manipulovať. Vďaka tomu je jednoduché zdôvodniť svoje údaje. Všetky metódy getter / setter pre určitú časť údajov budú vždy v tej istej zložke, kde boli tieto dáta definované. Ak by ste potrebovali manipulovať s určitými údajmi mimo miesta, kde tieto údaje žijú, odovzdali by ste metóde getter / setter do tohto komponentu ako rekvizity. Pozrime sa na takýto príklad.

    class FriendsContainer rozširuje React.Component {
      konštruktor (rekvizity) {
        super (rekvizity)
    this.state = {
          meno: 'Tyler McGinnis',
          priatelia: [
            „Jake Lingwall“,
            „Sarah Drasner“,
            „Merrick Christensen“
          ],
        }
    this.addFriend = this.addFriend.bind (this)
      }
      addFriend (priateľ) {
        this.setState ((state) => ({
          priatelia: state.friends.concat ([friend])
        }))
      }
      render () {
        návrat (
          
            

    Meno: {this.state.name}

                                 )   } }
    . Všimnite si, že v našej metóde addFriend sme predstavili nový spôsob, ako vyvolať setState. Namiesto toho, aby sme mu odovzdali objekt, odovzdávame mu funkciu, ktorá sa potom dostane do stavu. Kedykoľvek nastavujete nový stav vášho komponentu na základe predchádzajúceho stavu (ako to robíme s našim radom priateľov), chcete odovzdať funkciu setState, ktorá prevezme súčasný stav a vráti údaje, aby sa zlúčila s novým state. Vyskúšajte to tu.
    trieda AddFriend rozširuje React.Component {
      konštruktor (rekvizity) {
        super (rekvizity)
    this.state = {
          nový priateľ: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind (this)
        this.handleAddNew = this.handleAddNew.bind (this)
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          nový priateľ: ''
        })
      }
      render () {
        návrat (
          
                                 )   } }
    class ShowList rozširuje React.Component {
      render () {
        návrat (
          
            

    Priatelia

            
                {this.props.names.map ((friend) => {             návrat
    • {priateľ}
    •           })}                     )   } }

    Všimnite si, že vyššie uvedený kód je väčšinou rovnaký ako v predchádzajúcom príklade, až na to, že teraz máme možnosť pridať meno do nášho zoznamu priateľov. Všimnite si, ako som vytvoril nový komponent AddFriend, ktorý riadi nového priateľa, ktorého chceme pridať.

    Dôvodom je to, že nadradená súčasť (FriendContainer) sa nestará o nového priateľa, ktorého pridávate, záleží len na všetkých vašich priateľoch ako celku (pole priateľov). Pretože sa však držíme pravidla manipulácie s vašimi údajmi iba z komponentu, ktorý sa stará o to, prešli sme metódu addFriend dole do našej komponenty AddFriend ako rekvizitu a zavolali sme ju spolu s novým priateľom, akonáhle handleAddNew metóda sa nazýva.

    V tomto bode vám odporúčame vyskúšať si znova vytvoriť tú istú funkciu sami pomocou vyššie uvedeného kódu ako sprievodcu, akonáhle ste uviazli na 3–4 minúty.

    Predtým, ako sa presunieme z rekvizít, chcem pokryť ďalšie dve funkcie React týkajúce sa rekvizít. Sú to propTypes a defaultProps. Nebudem sa tu zaoberať príliš podrobnosťami, pretože obidve sú dosť jednoduché.

    rekvizity vám umožňujú kontrolovať prítomnosť alebo typy určitých rekvizít odovzdaných do podradeného komponentu. Pomocou propTypes môžete určiť, že sa požadujú určité rekvizity alebo že určité rekvizity sú špecifickým typom.

    Od React 15 už PropTypes už nie je súčasťou balenia React. Budete ho musieť nainštalovať osobitne spustením inštalačných typov npm.

    defaultProps vám umožňuje zadať predvolenú (alebo záložnú) hodnotu pre určité rekvizity iba v prípade, že tieto rekvizity nikdy nie sú odovzdané do komponentu.

    Zmenili sme naše komponenty od začiatku do súčasnosti pomocou propTypes tak, aby vyžadovali, aby addFriend bola funkciou a aby bola odovzdaná do komponenty AddFriend. Tiež som pomocou štandardných nastavení určil, že ak komponentu ShowList nedostane žiadne pole priateľov, bude predvolene prázdne pole.

    import Reagovať z „reagovať“
    importovať propTypy z „prop-typov“
    trieda AddFriend rozširuje React.Component {
      konštruktor (rekvizity) {
        super (rekvizity)
    this.state = {
          nový priateľ: ''
        }
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          nový priateľ: ''
        })
      }
      render () {
        návrat (
          
                                 )   } }
    AddFriend.propTypes: {
      addNew: PropTypes.func.isPožadované
    }
    class ShowList rozširuje React.Component {
      render () {
        návrat (
          
            

    Priatelia

            
                {this.props.names.map ((friend) => {             návrat
    • {priateľ}
    •           })}                     )   } }
    ShowList.defaultProps = {
      mená: []
    }

    Dobre, sme na poslednom úseku tohto prvého tutoriálu. Pozrime sa na nášho sprievodcu a uvidíme, čo nám zostalo.

     JSX - Umožňuje nám písať HTML ako syntax, ktorá sa získa
    transformované na ľahké objekty JavaScript.
     Virtuálny DOM - reprezentácia skutočného jazyka JavaScript
    DOM.
     React.Component - spôsob, akým vytvoríte novú súčasť.
     render (metóda) - Opisuje, ako bude používateľské rozhranie vyzerať
    konkrétny komponent.
     ReactDOM.render - Poskytuje komponent React do uzla DOM.
     stav - Interný dátový sklad (objekt) komponentu.
     constructor (this.state) - spôsob, akým sa ustanovujete
    počiatočný stav komponentu.
     setState - Pomocná metóda použitá na aktualizáciu stavu a
    komponent a opätovné vykreslenie používateľského rozhrania
     rekvizity - údaje, ktoré sa odovzdávajú podradenému komponentu
    z rodičovskej zložky.
     propTypes - Umožňuje vám kontrolovať prítomnosť alebo typy
    určité rekvizity odovzdané detskej komponente.
     defaultProps - Umožňuje nastaviť predvolené rekvizity pre váš komponent.
    Životný cyklus komponentov
      - componentDidMount - Vypaľuje sa po namontovaní komponentu
      - componentWillUnmount - Vypálené skôr, ako sa komponent odpojí
      - getDerivedStateFromProps - Vypaľuje sa, keď sa komponent pripojí a
    vždy, keď sa podpery zmenia. Používa sa na aktualizáciu stavu a
    komponent pri zmene jeho podpery
     Udalosti
      - po kliknutí
      - onSubmit
      - onZmeniť

    Sme tak blízko!

    Životný cyklus komponentov

    Každá zložka, ktorú vytvoríte, bude mať vlastné udalosti životného cyklu, ktoré sú užitočné pre rôzne veci. Napríklad, ak by sme chceli podať požiadavku ajaxu na počiatočné vykreslenie a načítať nejaké údaje, kde by sme to urobili? Alebo, ak by sme chceli vykonať nejakú logiku vždy, keď sa naše rekvizity zmenia, ako by sme to urobili? Odpovede na obidve z nich sú rôzne udalosti životného cyklu. Poďme ich rozobrať.

    trieda Aplikácia rozširuje React.Component {
      konštruktor (rekvizity) {
        super (rekvizity)
    this.state = {
          meno: 'Tyler McGinnis'
        }
      }
      componentDidMount () {
        // Vyvolá sa, keď je komponent pripojený k DOM
        // Dobré pre zadávanie požiadaviek AJAX
      }
      static getDerivedStateFromProps (nextProps, prevState) {
        // Objekt, ktorý sa vrátite z tejto funkcie, bude
        // zlúčiť so súčasným stavom.
      }
      componentWillUnmount () {
        // Okamžite nazvaný skôr, ako je komponent odpojený
        // Dobré na čistenie poslucháčov
      }
      render () {
        návrat (
          
            Dobrý deň, {this.state.name}            )   } }

    componentDidMount - Vyvolá sa raz po úvodnom vykreslení. Pretože komponent bol už vyvolaný, keď je vyvolaná táto metóda, máte prístup k virtuálnej DOM, ak ju potrebujete. Urobíte to tak, že zavoláte this.getDOMNode (). Toto je udalosť životného cyklu, v ktorej budete posielať svoje žiadosti AJAX o načítanie niektorých údajov.

    componentWillUnmount - Tento životný cyklus sa vyvolá bezprostredne pred odpojením komponentu z DOM. To je miesto, kde môžete urobiť potrebné vyčistiť.

    getDerivedStateFromProps - Niekedy budete musieť aktualizovať stav svojej komponenty na základe rekvizít, ktoré sa odovzdávajú. Toto je metóda životného cyklu, v ktorej by ste to urobili. Bude to odovzdané rekvizity a štát a objekt, ktorý vrátite, bude zlúčený s aktuálnym stavom.

    Ak ste sa až do tohto bodu zasekli so mnou, skvelá práca. Dúfam, že tento tutoriál pre vás bol prospešný a teraz sa s Reactom cítite aspoň trochu pohodlne.

    Podrobnejšie informácie o základoch React nájdete v našom kurze Základy reakcie.

    Tyler McGinnis