En omfattende guide til React.js i 2018

Denne artikel blev oprindeligt offentliggjort i januar 2015, men blev for nylig opdateret til React 16.3 og al den godhed, den indeholder.

Komponenter er byggestenene i React. Hvis du kommer fra en kantet baggrund, ligner komponenter meget direktiver. Hvis du kommer fra en anden baggrund, er de i det væsentlige widgets eller moduler.

Du kan tænke på en komponent som en samling af HTML, CSS, JS og nogle interne data, der er specifikke for denne komponent. Jeg kan godt lide at tænke på React-komponenter som Kolaches på nettet. De har alt, hvad du har brug for, indpakket i et lækkert sammensat bundt.

Disse komponenter er defineret enten i ren JavaScript, eller de kan defineres i det React-team kalder “JSX”. Hvis du beslutter at bruge JSX (som du sandsynligvis vil være, det er temmelig standard - og det er hvad vi vil bruge til denne tutorial), har du brug for en kompileringstrin for at konvertere din JSX til JavaScript. Men vi kommer til dette senere.

Hvad der gør React så praktisk til opbygning af brugergrænseflader er, at data enten modtages fra en komponents overordnede komponent, eller de er indeholdt i selve komponenten. Før vi springer ind i kode, skal vi sørge for, at vi har en høj grad af forståelse af komponenter.

Ovenfor har vi et billede af min Twitter-profil. Hvis vi skulle genskabe denne side i React, ville vi dele forskellige sektioner op i forskellige komponenter (fremhævet). Bemærk, at komponenter kan have indlejrede komponenter inde i dem.

Vi navngiver muligvis den venstre komponent (lyserød) UserInfo-komponenten. Inde i UserInfo-komponenten har vi en anden komponent (orange), som vi kunne kalde UserImages-komponenten. Den måde, dette forhold mellem forældre og barn fungerer på, er vores UserInfo-komponent eller forældrekomponenten, hvor "tilstanden" af dataene for både sig selv og UserImages-komponenten (underordnede komponent) lever. Hvis vi ønskede at bruge nogen del af forældrekomponentens data i underkomponenten, som vi gør, ville vi overføre disse data til underkomponenten som en attribut. I dette eksempel passerer vi UserImages-komponenten alle de billeder, som brugeren har (som i øjeblikket lever i UserInfo-komponenten).

Vi kommer nærmere ind på koden detaljer, men jeg vil have dig til at forstå det større billede af hvad der sker her. Dette forældre / barn hierarki gør styring af vores data relativt enkel, fordi vi ved nøjagtigt, hvor vores data bor, og vi bør ikke manipulere disse data andre steder.

Emnerne nedenfor er, hvad jeg mener er de grundlæggende aspekter af React. Hvis du forstår dem alle og deres formål, vil du være på et meget godt sted efter at have læst denne tutorial.

JSX - Tillader os at skrive HTML som syntaks, der får
transformeret til letteJavaScript-objekter.
Virtuel DOM - En JavaScript-repræsentation af den faktiske
DOM.
React.Component - Den måde, du opretter en ny komponent på.
render (metode) - Beskriver hvordan UI'en ser ud for
den bestemte komponent.
ReactDOM.render - Giver en React-komponent til en DOM-knude.
tilstand - En intern datalager (objekt) for en komponent.
konstruktør (this.state) - Den måde, du etablerer
den oprindelige tilstand af en komponent.
setState - En hjælpemetode, der bruges til at opdatere tilstanden til en
komponent og gengivelse af brugergrænsefladen
rekvisitter - De data, der videregives til underordnede komponenter
fra overordnede komponent.
propTypes - Gør det muligt at kontrollere tilstedeværelsen eller typerne af
visse rekvisitter overført til barnekomponenten.
defaultProps - Giver dig mulighed for at indstille standard-rekvisitter til din komponent.
Komponent livscyklus
  - componentDidMount - affyret efter monteret komponent
  - componentWillUnmount - Fired, før komponenten fjernes
  - getDerivedStateFromProps - affyret når komponenten monteres og
hver gang rekvisitterne ændres. Bruges til at opdatere tilstanden til a
komponent, når dens rekvisitter ændres
Begivenheder
  - onClick
  - Send ind
  - onChange

Jeg ved, det ser ud til at være meget, men du vil snart se, hvordan hvert stykke er grundlæggende i opbygningen af ​​robuste applikationer med React (og jeg spotter heller ikke, da jeg sagde, at jeg ville have dette til at være en omfattende guide).

På dette tidspunkt skal du forstå på et meget højt niveau, hvordan React fungerer. Lad os springe ind i en kode.

Oprettelse af din første komponent (JSX, Virtual DOM, render, ReactDOM.render)

Lad os gå videre og opbygge vores allerførste React-komponent.

For at oprette en React-komponent skal du bruge en ES6-klasse. Hvis du ikke er bekendt med klasser, kan du fortsætte med at læse nedenfor, eller du kan læse mere om dem i dybden her:

import React fra 'react'
importer ReactDOM fra 'react-dom'
klasse HelloWorld udvider React.Component {
  render () {
    Vend tilbage (
      
Hej verden!
    )   } }
ReactDOM.render (, document.getElementById ('root'));

Bemærk, at den eneste metode i vores klasse er gengivet. Hver komponent skal have en gengivelsesmetode. Årsagen hertil er beskrevet UI (brugergrænseflade) til vores komponent. Så i dette eksempel er teksten, der vises på skærmen, hvor denne komponent gengives, Hello World!

Lad os nu se, hvad ReactDOM laver. ReactDOM.render indtager to argumenter. Det første argument er den komponent, du vil gengive, mens det andet argument er den DOM-knude, hvor du vil gengive komponenten.

Bemærk, at vi bruger ReactDOM.render og ikke React.render. Dette var en ændring foretaget i React .14 for at gøre React mere modulopbygget. Det giver mening, når du tænker på, at React kan gengive sig til flere ting end bare et DOM-element.

I eksemplet ovenfor fortæller vi React at tage vores HelloWorld-komponent og gengive den til elementet med et ID af rod. På grund af React's forældre / barn-forhold, vi talte om tidligere, skal du normalt kun bruge ReactDOM.render en gang i din ansøgning, fordi ved at gengive den mest forældrekomponent, vil alle underordnede komponenter også blive gengivet.

På dette tidspunkt kan du måske føle dig lidt underligt at smide “HTML” i din JavaScript. Siden du begyndte at lære webudvikling, blev du fortalt, at du skal holde din logik ude af visningen, det vil sige holde din JavaScript frakoblet fra din HTML.

Dette paradigme er stærkt, men det har nogle svagheder. Jeg ønsker ikke at gøre denne tutorial længere med at overbevise dig om, at denne idé er et skridt i den rigtige retning, så hvis denne idé stadig generer dig, kan du tjekke dette link. Når du lærer mere om React, bør denne uro hurtigt aftage.

Den "HTML", som du skriver i gengivelsesmetoden, er ikke faktisk HTML, men det er, hvad React kalder "JSX". JSX tillader os ganske enkelt at skrive HTML-lignende syntaks, som (til sidst) bliver omdannet til lette JavaScript-objekter. React er derefter i stand til at tage disse JavaScript-objekter og ud fra dem danne en "virtuel DOM" eller en JavaScript-repræsentation af den faktiske DOM. Dette skaber en win / win-situation, hvor du får tilgængeligheden af ​​skabeloner med JavaScript-kraften.

Ser du på nedenstående eksempel, er det, hvad din JSX til sidst vil blive samlet til.

klasse HelloWorld udvider React.Component {
  render () {
    return React.createElement ("div", null, "Hello World");
  }
}
Nu kan du give afkald på JSX -> JS transformationsfasen og skrive dine React-komponenter som koden ovenfor. Men som du kan forestille dig, ville det være ret vanskeligt. Jeg er ikke opmærksom på nogen, der ikke bruger JSX. For mere information om, hvad JSX kompilerer ned til, se React Elements vs React Components.

Indtil dette tidspunkt har vi ikke rigtig understreget betydningen af ​​dette nye virtuelle DOM-paradigme, vi springer ind i. Årsagen til, at React-teamet gik med denne tilgang, er, at eftersom den virtuelle DOM er en JavaScript-repræsentation af den faktiske DOM, kan React holde styr på forskellen mellem den aktuelle virtuelle DOM (beregnet efter nogle dataændringer), med den forrige virtuelle DOM (beregnet før nogle dataændringer). React isolerer derefter ændringerne mellem den gamle og nye virtuelle DOM og opdaterer derefter kun den virkelige DOM med de nødvendige ændringer.

I flere lægmænds termer, fordi manipulering af den faktiske DOM er langsom, er React i stand til at minimere manipulationer til den faktiske DOM ved at holde styr på en virtuel DOM og kun opdatere den rigtige DOM, når det er nødvendigt og med kun de nødvendige ændringer. (Mere info her).

UI's har typisk masser af stater, der gør det vanskeligt at styre staten. Ved at gengive den virtuelle DOM igen, hver gang en tilstandsændring sker, gør React det lettere at tænke over, i hvilken tilstand din ansøgning er. Processen ser sådan ud:

Nogle brugerbegivenheder, der ændrer status for din app → Gendan virtuel DOM igen → Diffre forrige virtuelle DOM med ny virtuel DOM → Opdater kun ægte DOM med nødvendige ændringer.

Fordi der er denne transformationsproces fra JSX til JS, skal du oprette en slags transformationsfase, mens du udvikler. I del 2 af denne serie introducerer jeg Webpack og Babel til at gøre denne transformation.

Lad os se tilbage på vores "vigtigste dele af reaktion" -checklisten og se, hvor vi er på nu.

 JSX - Tillader os at skrive HTML som syntaks, der får
transformeret til letteJavaScript-objekter.
 Virtuel DOM - En JavaScript-repræsentation af det faktiske
DOM.
 React.Component - Den måde, du opretter en ny komponent på.
 render (metode) - Beskriver, hvordan UI'en ser ud for
den bestemte komponent.
 ReactDOM.render - gengiver en React-komponent til en DOM-knude.
tilstand - En intern datalager (objekt) for en komponent.
konstruktør (this.state) - Den måde, du etablerer
den oprindelige tilstand af en komponent.
setState - En hjælpemetode, der bruges til at opdatere tilstanden til en
komponent og gengivelse af brugergrænsefladen
rekvisitter - De data, der sendes til underordnede komponenter
fra overordnede komponent.
propTypes - Gør det muligt at kontrollere tilstedeværelsen eller typerne af
visse rekvisitter overført til barnekomponenten.
defaultProps - Giver dig mulighed for at indstille standard-rekvisitter til din komponent.
Komponent livscyklus
  - componentDidMount - affyret efter monteret komponent
  - componentWillUnmount - Fired, før komponenten fjernes
  - getDerivedStateFromProps - affyret når komponenten monteres og
hver gang rekvisitterne ændres. Bruges til at opdatere tilstanden til a
komponent, når dens rekvisitter ændres
Begivenheder
  - onClick
  - Send ind
  - onChange

Vi går godt. Alt med fed skrift er det, vi allerede har dækket, og du skal i det mindste være i stand til at forklare, hvordan disse bestemte komponenter passer ind i React-økosystemet.

Tilføjelse af stat til din komponent (tilstand)

Næste på listen er tilstand. Tidligere talte vi om, hvordan det er svært at administrere brugergrænseflader, fordi de typisk har masser af forskellige tilstande. Dette område er hvor React virkelig begynder at skinne. Hver komponent har evnen til at styre sin egen tilstand og overføre sin tilstand til underordnede komponenter om nødvendigt.

Når vi vender tilbage til Twittereksemplet fra tidligere, er UserInfo-komponenten (fremhævet med lyserød ovenfor) ansvarlig for at styre status (eller data) for brugerens oplysninger. Hvis en anden komponent også havde brug for denne tilstand / data, men denne tilstand ikke var et direkte barn af UserInfo-komponenten, ville du oprette en anden komponent, der ville være den direkte overordnede til UserInfo og den anden komponent (eller begge komponenter, der krævede denne tilstand ). Du vil derefter overføre staten som rekvisitter til underordnede komponenter. Med andre ord, hvis du har et hierarki med flere komponenter, skal en fælles overordnet komponent styre staten og overføre den til dens børnekomponenter via rekvisitter.

Lad os se på et eksempelkomponent ved hjælp af sin egen interne tilstand.

klasse HelloUser udvider React.Component {
  konstruktør (rekvisitter) {
    super (rekvisitter)
this.state = {
      brugernavn: 'tylermcginnis'
    }
  }
  render () {
    Vend tilbage (
      
        Hej {this.state.usname}            )   } }

Vi har introduceret nogle nye syntaks med dette eksempel. Den første du bemærker er konstruktormetoden. Fra definitionen ovenfor er konstruktormetoden “Den måde, du indstiller en komponenttilstand på”. Med andre ord vil alle data, du lægger på dette. Stat inde i konstruktøren være en del af komponentens tilstand.

I koden ovenfor fortæller vi vores komponent, at vi ønsker, at den skal holde styr på et brugernavn. Dette brugernavn kan nu bruges i vores komponent ved at gøre {this.state.usname}, hvilket er nøjagtigt, hvad vi gør i vores render-metode.

Den sidste ting at tale om med staten er, at vores komponent har brug for evnen til at ændre sin egen interne tilstand. Vi gør dette med en metode kaldet setState. Kan du huske tidligere, da vi talte om gengivelse af den virtuelle dom, når dataene ændres?

Signal for at give besked om vores app, nogle data er ændret → Gendan virtuel DOM → Diff forrige virtuelle DOM med ny virtuel DOM → Opdater kun ægte DOM med nødvendige ændringer.

At "signal om at give besked til vores app nogle data er ændret" er faktisk bare setState. Hver gang setState kaldes, gengives den virtuelle DOM, diff-algoritmen kører, og den rigtige DOM opdateres med de nødvendige ændringer.

Som en sidebemærkning, når vi introducerer setState i koden herunder, vil vi også introducere et par begivenheder, der er på vores liste. To fugle, en sten.

Så i den næste kodeeksempel vil vi nu have et inputfelt, der hver gang nogen indtaster det automatisk vil opdatere vores tilstand og ændre brugernavnet.

klasse HelloUser udvider React.Component {
  konstruktør (rekvisitter) {
    super (rekvisitter)
this.state = {
      brugernavn: 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind (dette)
  }
  handleChange (e) {
    this.setState ({
      brugernavn: e.target.value
    })
  }
  render () {
    Vend tilbage (
      
        Hej {this.state.usnavn}
        Ændre navn:                     )   } }

Bemærk, at vi har introduceret et par flere ting. Den første ting er handleChange-metoden. Denne metode bliver kaldt hver gang en bruger skriver indtastningsfeltet. Når handleChange kaldes, kaldes det setState for at definere vores brugernavn med det, der blev indtastet i inputboksen (e.target.value). Husk, at når SetState kaldes, opretter React en ny virtuel DOM, gør diffen, og opdaterer derefter den rigtige DOM.

Lad os nu se på vores gengivelsesmetode. Vi har tilføjet en ny linje, der indeholder et inputfelt. Typen af ​​inputfeltet bliver naturligvis tekst. Værdien vil være værdien af ​​vores brugernavn, som oprindeligt blev defineret i vores getInitialState-metode og vil blive opdateret i handleChange-metoden.

Bemærk, at der er en ny attribut, som du sandsynligvis aldrig har set før, onChange. onChange er en React ting, og den vil kalde den metode, du angiver, hver gang værdien i inputboksen ændres - i dette tilfælde var metoden, vi specificerede, handleChange.

Processen med koden ovenfor ville gå sådan her.

En bruger indtaster i indtastningsfeltet → handleChange aktiveres → tilstanden af ​​vores komponent er indstillet til en ny værdi → React gendanner den virtuelle DOM → React Forskifter ændringen → Real DOM opdateres.

Senere, når vi dækker rekvisitter, ser vi nogle mere avancerede brugssager om håndtering af tilstand.

Vi kommer derhen! Hvis du ikke kan forklare elementerne med fed skrift nedenfor, skal du læse dette afsnit igen. Et tip til VIRKELIG læring React: lad ikke passivt at læse dette give dig en falsk følelse af sikkerhed, at du faktisk ved, hvad der foregår, og kan genoprette det, vi laver. Gå over til CodeSandbox, og prøv at genskabe (eller oprette dine egne) komponenter uden at se på, hvad jeg har gjort. Det er den eneste måde, du virkelig begynder at lære, hvordan man bygger med React. Dette gælder for denne tutorial og det følgende, der kommer.

 JSX - Tillader os at skrive HTML som syntaks, der får
transformeret til letteJavaScript-objekter.
 Virtuel DOM - En JavaScript-repræsentation af det faktiske
DOM.
 React.Component - Den måde, du opretter en ny komponent på.
 render (metode) - Beskriver, hvordan UI'en ser ud for
den bestemte komponent.
 ReactDOM.render - gengiver en React-komponent til en DOM-knude.
 tilstand - Den interne datalager (objekt) for en komponent.
 konstruktør (this.state) - Den måde, hvorpå du etablerer dig
den oprindelige tilstand af en komponent.
 setState - En hjælpemetode, der bruges til at opdatere tilstanden til a
komponent og gengivelse af brugergrænsefladen
rekvisitter - De data, der sendes til underordnede komponenter
fra overordnede komponent.
propTypes - Gør det muligt at kontrollere tilstedeværelsen eller typerne af
visse rekvisitter overført til barnekomponenten.
defaultProps - Giver dig mulighed for at indstille standard-rekvisitter til din komponent.
Komponent livscyklus
  - componentDidMount - affyret efter monteret komponent
  - componentWillUnmount - Fired, før komponenten fjernes
  - getDerivedStateFromProps - affyret når komponenten monteres og
hver gang rekvisitterne ændres. Bruges til at opdatere tilstanden til a
komponent, når dens rekvisitter ændres
Begivenheder
  - onClick
  - Send ind
  - onChange

Modtagelsesstat fra forældrekomponent (rekvisitter, proptyper, getDefaultProps)

Vi har allerede talt om rekvisitter et par gange, da det er svært at virkelig gøre meget uden dem. I henhold til vores definition ovenfor er rekvisitterne de data, der overføres til underordnede komponent fra forældrekomponenten. Dette gør det muligt for vores React-arkitektur at forblive temmelig ligetil. Håndter tilstand i den højeste overordnede komponent, der skal bruge de specifikke data, og hvis du har en underordnet komponent, der også har brug for disse data, skal du videregive disse data som rekvisitter.

Her er et meget grundlæggende eksempel på at bruge rekvisitter.

klasse HelloUser udvider React.Component {
  render () {
    Vend tilbage (
      
Hej, {this.props.name}
    )   } }
ReactDOM.render (
  ,
  document.getElementById ( 'root')
);

Bemærk på linje 9, vi har en attribut kaldet navn med en værdi af "Tyler". Nu i vores komponent kan vi bruge {this.props.name} til at få “Tyler”.

Lad os se på et mere avanceret eksempel. Vi vil have to komponenter nu. En forælder, et barn. Forælderen vil holde styr på staten og overføre en del af denne tilstand ned til barnet som rekvisitter. Lad os først se på den overordnede komponent.

Forældrekomponent:

klasse FriendsContainer udvider React.Component {
  konstruktør (rekvisitter) {
    super (rekvisitter)
this.state = {
      navn: 'Tyler McGinnis',
      venner: [
        'Jake Lingwall',
        'Sarah Drasner',
        'Merrick Christensen'
      ]
    }
  }
  render () {
    Vend tilbage (
      
        

Navn: {this.state.name}

                    )   } }

Der er virkelig ikke meget, der sker i denne komponent, som vi ikke har set før. Vi har en starttilstand, og vi overfører en del af den oprindelige tilstand til en anden komponent. Størstedelen af ​​den nye kode kommer fra denne underordnede komponent, så lad os se nærmere på det.

Børnekomponent:

klasse ShowList udvider React.Component {
  render () {
    Vend tilbage (
      
        

venner

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

Husk, at koden, der returneres fra vores render-metode, er en repræsentation af, hvordan den rigtige DOM skal se ud. Hvis du ikke er bekendt med Array.prototype.map, ser denne kode muligvis lidt vild. Alt kort gør, er at det opretter en ny matrix, kalder vores tilbagekaldsfunktion på hvert element i matrixen og udfylder den nye matrix med resultatet af, at der kaldes tilbagekaldsfunktion på hvert element. For eksempel,

const friends = [
  'Jake Lingwall',
  'Sarah Drasner',
  'Merrick Christensen'
];
const listItems = friends.map ((ven) => {
  returner "
  • " + ven + "
  • "; });
    console.log (listItems);

    Console.log ovenfor returnerer ["

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

    Bemærk, at alt, hvad der skete, var, at vi lavede en ny matrix og føjede

  • til hvert element i det originale array.

    Det, der er fantastisk ved kort, er, at det passer perfekt til React (og det er indbygget i JavaScript). Så i vores underordnede komponent overlapper vi navne, indpakker hvert navn i et par

  • tags og gemmer det på vores variabel ListItems. Derefter returnerer vores render-metode en uordnet liste med alle vores venner.

    Lad os se på endnu et eksempel, før vi holder op med at tale om rekvisitter. Det er vigtigt at forstå, at uanset hvor dataene bor er det nøjagtige sted, du vil manipulere disse data. Dette gør det let at resonnere om dine data. Alle getter / setter-metoder til et bestemt stykke data vil altid være i den samme komponent, hvor disse data blev defineret. Hvis du var nødt til at manipulere et stykke data uden for, hvor dataene bor, ville du give getter / setter-metoden til den komponent som rekvisitter. Lad os se på et eksempel som det.

    klasse FriendsContainer udvider React.Component {
      konstruktør (rekvisitter) {
        super (rekvisitter)
    this.state = {
          navn: 'Tyler McGinnis',
          venner: [
            'Jake Lingwall',
            'Sarah Drasner',
            'Merrick Christensen'
          ],
        }
    this.addFriend = this.addFriend.bind (dette)
      }
      addFriend (ven) {
        this.setState ((tilstand) => ({
          venner: state.friends.concat ([ven])
        }))
      }
      render () {
        Vend tilbage (
          
            

    Navn: {this.state.name}

                                 )   } }
    . Bemærk, at vi i vores addFriend-metode introducerede en ny måde at påberope setState. I stedet for at videregive det til et objekt, overfører vi det til en funktion, der derefter overføres tilstand. Hver gang du indstiller den nye tilstand for din komponent baseret på den forrige tilstand (som vi gør med vores vens array), vil du videregive setState en funktion, der tager den aktuelle tilstand og returnerer dataene for at flette med den nye stat. Tjek det her.
    klasse AddFriend udvider React.Component {
      konstruktør (rekvisitter) {
        super (rekvisitter)
    this.state = {
          ny ven: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind (dette)
        this.handleAddNew = this.handleAddNew.bind (dette)
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          ny ven: ''
        })
      }
      render () {
        Vend tilbage (
          
                     <-knap onClick = {this.handleAddNew}> Tilføj ven            )   } }
    klasse ShowList udvider React.Component {
      render () {
        Vend tilbage (
          
            

    venner

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

    Du vil bemærke, at koden ovenfor stort set er den samme som det forrige eksempel, bortset fra nu har vi muligheden for at tilføje et navn til vores venneliste. Bemærk, hvordan jeg oprettede en ny AddFriend-komponent, der administrerer den nye ven, vi vil tilføje.

    Årsagen til dette er, at overordnede komponent (FriendContainer) ikke er ligeglad med den nye ven, du tilføjer, den er kun interesseret i alle dine venner som en helhed (vennearrayet). Men fordi vi holder os med reglen om kun at manipulere dine data fra den komponent, der er interesseret i, har vi sendt addFriend-metoden ned i vores AddFriend-komponent som en rekvisitter, og vi kalder dem med den nye ven, når håndtagetAddNew metode kaldes.

    På dette tidspunkt anbefaler jeg, at du prøver at genskabe den samme funktionalitet på egen hånd ved hjælp af koden ovenfor som en guide, når du har sat dig fast i 3-4 minutter.

    Inden vi går videre fra rekvisitter, vil jeg dække yderligere to React-funktioner vedrørende rekvisitter. Det er proptyper og defaultProps. Jeg vil ikke gå for detaljeret ind her, fordi begge er ret ligetil.

    prop-typer giver dig mulighed for at kontrollere tilstedeværelsen eller typer af visse rekvisitter, der sendes til underdelen. Med propTypes kan du specificere, at der kræves visse rekvisitter, eller at visse rekvisitter er en bestemt type.

    Fra React 15 er PropTypes ikke længere inkluderet i React-pakken. Du bliver nødt til at installere det separat ved at køre npm installation prop-typer.

    defaultProps giver dig mulighed for at specificere en standardværdi (eller en sikkerhedskopi) for visse rekvisitter, i tilfælde af at disse rekvisitter aldrig sendes ind i komponenten.

    Jeg har ændret vores komponenter fra tidligere til nu ved hjælp af propTypes for at kræve, at addFriend er en funktion, og at den overføres til AddFriend-komponenten. Jeg har også ved hjælp af defaultProps angivet, at hvis der ikke gives en matrix med venner til ShowList-komponenten, vil den som standard være en tom matrix.

    import React fra 'react'
    import PropTypes fra 'prop-typer'
    klasse AddFriend udvider React.Component {
      konstruktør (rekvisitter) {
        super (rekvisitter)
    this.state = {
          ny ven: ''
        }
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          ny ven: ''
        })
      }
      render () {
        Vend tilbage (
          
                     <-knap onClick = {this.handleAddNew}> Tilføj ven            )   } }
    AddFriend.propTypes: {
      addNew: PropTypes.func.isRequired
    }
    klasse ShowList udvider React.Component {
      render () {
        Vend tilbage (
          
            

    venner

            
                {this.props.names.map ((ven) => {             returner
    • {ven}
    •           })}                     )   } }
    ShowList.defaultProps = {
      navne: []
    }

    Okay, vi er på den sidste del af denne første tutorial. Lad os se på vores guide og se, hvad vi har tilbage.

     JSX - Tillader os at skrive HTML som syntaks, der får
    omdannet til lette JavaScript-objekter.
     Virtuel DOM - En JavaScript-repræsentation af det faktiske
    DOM.
     React.Component - Den måde, du opretter en ny komponent på.
     render (metode) - Beskriver, hvordan UI'en ser ud for
    den bestemte komponent.
     ReactDOM.render - gengiver en React-komponent til en DOM-knude.
     tilstand - Den interne datalager (objekt) for en komponent.
     konstruktør (this.state) - Den måde, hvorpå du etablerer dig
    den oprindelige tilstand af en komponent.
     setState - En hjælpemetode, der bruges til at opdatere tilstanden til a
    komponent og gengivelse af brugergrænsefladen
     rekvisitter - De data, der overføres til underordnede komponenter
    fra overordnede komponent.
     propTypes - Gør det muligt at kontrollere tilstedeværelsen eller typerne af
    visse rekvisitter overført til barnekomponenten.
     defaultProps - Giver dig mulighed for at indstille standard-rekvisitter til din komponent.
    Komponent livscyklus
      - componentDidMount - affyret efter monteret komponent
      - componentWillUnmount - Fired, før komponenten fjernes
      - getDerivedStateFromProps - affyret når komponenten monteres og
    hver gang rekvisitterne ændres. Bruges til at opdatere tilstanden til a
    komponent, når dens rekvisitter ændres
     Begivenheder
      - onClick
      - Send ind
      - onChange

    Vi er så tæt!

    Komponent livscyklus

    Hver komponent, du laver, har sine egne livscyklusbegivenheder, der er nyttige til forskellige ting. Hvis vi f.eks. Ville indgive en ajax-anmodning om den oprindelige gengivelse og hente nogle data, hvor ville vi gøre det? Eller, hvis vi ville køre en vis logik, hver gang vores rekvisitter ændrede sig, hvordan ville vi gøre det? De forskellige begivenheder i livscyklus er svarene på begge. Lad os nedbryde dem.

    klasse-app udvider React.Component {
      konstruktør (rekvisitter) {
        super (rekvisitter)
    this.state = {
          navn: 'Tyler McGinnis'
        }
      }
      componentDidMount () {
        // Påkaldes, når komponenten er monteret på DOM
        // God til at fremsætte AJAX-anmodninger
      }
      statisk getDerivedStateFromProps (nextProps, prevState) {
        // Det objekt, du vender tilbage fra denne funktion, vil
        // blive fusioneret med den aktuelle tilstand.
      }
      componentWillUnmount () {
        // Kaldes ØMIDLIGT før en komponent fjernes
        // God til oprydning af lyttere
      }
      render () {
        Vend tilbage (
          
            Hej, {this.state.name}            )   } }

    componentDidMount - kaldes en gang efter den indledende gengivelse. Da komponenten allerede er aktiveret, når denne metode påberåbes, har du adgang til den virtuelle DOM, hvis du har brug for den. Det gør du ved at kalde dette.getDOMNode (). Så dette er livscyklusbegivenheden, hvor du skal indgive dine AJAX-anmodninger om at hente nogle data.

    componentWillUnmount - Denne livscyklus aktiveres umiddelbart før en komponent fjernes fra DOM. Det er her du kan gøre det nødvendigt at rydde op.

    getDerivedStateFromProps - Nogle gange bliver du nødt til at opdatere status for din komponent baseret på de rekvisitter, der sendes i. Dette er den livscyklusmetode, du vil gøre det i. Det sendes rekvisitterne og staten, og det objekt, du returnerer, vil blive fusioneret med den aktuelle tilstand.

    Nå, hvis du sidder fast med mig indtil dette tidspunkt, godt job. Jeg håber, at denne tutorial var gavnlig for dig, og at du nu føler dig i det mindste mildt tilpas med React.

    For et meget mere dybtgående kig på grundlæggende i React, se vores React Fundamentals-kursus.

    Tyler McGinnis