Een uitgebreide gids voor React.js in 2018

Dit artikel werd oorspronkelijk gepubliceerd in januari 2015, maar werd onlangs bijgewerkt naar React 16.3 en al het goede dat het bevat.

Componenten zijn de bouwstenen van React. Als u vanuit een hoekige achtergrond komt, lijken componenten erg op richtlijnen. Als u uit een andere achtergrond komt, zijn dit in wezen widgets of modules.

U kunt een component beschouwen als een verzameling HTML, CSS, JS en sommige interne gegevens die specifiek zijn voor die component. Ik denk graag aan React-componenten als de Kolaches van het web. Ze hebben alles wat je nodig hebt, verpakt in een heerlijke samen te stellen bundel.

Deze componenten worden gedefinieerd in pure JavaScript of ze kunnen worden gedefinieerd in wat het React-team “JSX” noemt. Als je besluit om JSX te gebruiken (wat je waarschijnlijk wel zult doen, het is vrij standaard - en het is wat we zullen gebruiken voor deze tutorial), heb je een compileerfase nodig om je JSX naar JavaScript te converteren. Maar we komen hier later op terug.

Wat React zo handig maakt voor het bouwen van gebruikersinterfaces, is dat gegevens worden ontvangen van de bovenliggende component van een component, of dat deze zich in de component zelf bevinden. Laten we voordat we de code ingaan ervoor zorgen dat we een goed begrip van componenten hebben.

Hierboven hebben we een foto van mijn Twitter-profiel. Als we deze pagina opnieuw zouden maken in React, zouden we verschillende secties opdelen in verschillende componenten (gemarkeerd). Merk op dat componenten geneste componenten in zich kunnen hebben.

We kunnen de linkercomponent (roze) de component UserInfo noemen. Binnen de component UserInfo hebben we nog een component (oranje) die we de component UserImages zouden kunnen noemen. De manier waarop deze ouder / kind-relatie werkt, is onze component UserInfo, of de oudercomponent, waar de "status" van de gegevens voor zowel zichzelf als de component UserImages (onderliggende component) leeft. Als we een deel van de gegevens van de bovenliggende component in de onderliggende component wilden gebruiken, wat we doen, zouden we die gegevens als een kenmerk aan de onderliggende component doorgeven. In dit voorbeeld geven we de component UserImages alle afbeeldingen door die de gebruiker heeft (die momenteel in de component UserInfo aanwezig is).

We gaan hier wat dieper in op de details van de code, maar ik wil dat je het grotere beeld begrijpt van wat hier gebeurt. Deze ouder / kind-hiërarchie maakt het beheren van onze gegevens relatief eenvoudig, omdat we precies weten waar onze gegevens zich bevinden en we deze gegevens nergens anders zouden moeten manipuleren.

De onderstaande onderwerpen zijn naar mijn mening de fundamentele aspecten van React. Als je ze allemaal en hun doelen begrijpt, ben je na het lezen van deze tutorial op een zeer goede plek.

JSX - Hiermee kunnen we HTML schrijven zoals syntaxis die wordt
getransformeerd naar lichtgewicht Java-objecten.
Virtueel DOM - Een JavaScript-weergave van de werkelijke
DOM.
React.Component - De manier waarop u een nieuw component maakt.
render (methode) - Beschrijft hoe de gebruikersinterface eruit zal zien
het specifieke onderdeel.
ReactDOM.render - Geeft een React-component terug naar een DOM-knooppunt.
state - Het interne gegevensarchief (object) van een component.
constructor (this.state) - De manier waarop u tot stand komt
de begintoestand van een component.
setState - Een hulpmethode die wordt gebruikt voor het bijwerken van de status van a
component en het opnieuw renderen van de gebruikersinterface
props - De gegevens die worden doorgegeven aan de onderliggende component
van de bovenliggende component.
propTypes - Hiermee kunt u de aanwezigheid of types van regelen
bepaalde rekwisieten zijn doorgegeven aan de onderliggende component.
defaultProps - Hiermee kunt u standaardprops instellen voor uw component.
Onderdeel Levenscyclus
  - componentDidMount - Ontslagen nadat het component is gemonteerd
  - componentWillUnmount - Ontslagen voordat het component zal ontkoppelen
  - getDerivedStateFromProps - Ontslagen wanneer het component wordt geactiveerd en
wanneer de rekwisieten veranderen. Gebruikt om de status van een bij te werken
component wanneer zijn rekwisieten veranderen
Evenementen
  - bij klikken
  - onSubmit
  - onChange

Ik weet dat het veel lijkt, maar je zult snel zien hoe elk stuk van fundamenteel belang is voor het bouwen van robuuste toepassingen met React (en ik maakte ook geen grapje toen ik zei dat ik wilde dat dit een uitgebreide gids was).

Op dit punt moet u op een zeer hoog niveau begrijpen hoe React werkt. Laten we nu eens wat code ingaan.

Uw eerste component maken (JSX, Virtual DOM, render, ReactDOM.render)

Laten we doorgaan en onze allereerste React-component bouwen.

Om een ​​React-component te maken, gebruikt u een ES6-klasse. Als u niet bekend bent met klassen, kunt u hieronder verder lezen of u kunt hier meer over lezen:

importeren Reageren van 'reageren'
ReactDOM importeren uit 'react-dom'
klasse HelloWorld breidt React.Component {uit
  render () {
    terug (
      
Hallo wereld!
    )   } }
ReactDOM.render (, document.getElementById ('root'));

Merk op dat de enige methode in onze klasse renderen is. Elke component moet een rendermethode hebben. De reden daarvoor is renderen is het beschrijven van de gebruikersinterface (gebruikersinterface) voor onze component. Dus in dit voorbeeld is de tekst die op het scherm wordt weergegeven waar dit onderdeel wordt weergegeven, Hello World!

Laten we nu eens kijken wat ReactDOM doet. ReactDOM.render neemt twee argumenten aan. Het eerste argument is het onderdeel dat u wilt weergeven, terwijl het tweede argument het DOM-knooppunt is waar u het onderdeel wilt weergeven.

Merk op dat we ReactDOM.render gebruiken en niet React.render. Dit was een wijziging in React .14 om React modulair te maken. Het is logisch als je denkt dat React meer dingen kan weergeven dan alleen een DOM-element.

In het bovenstaande voorbeeld vertellen we React om onze HelloWorld-component te nemen en naar het element te renderen met een ID van root. Vanwege de ouder / kind-relaties van React waar we het eerder over hadden gehad, hoeft u ReactDOM.render meestal maar één keer in uw toepassing te gebruiken, omdat door de meest bovenliggende component te renderen, alle onderliggende componenten ook worden weergegeven.

Op dit moment is het misschien een beetje raar om "HTML" in uw JavaScript te gooien. Sinds je bent begonnen met het leren van webontwikkeling, is je verteld dat je je logica uit het zicht moet houden, dat wil zeggen dat je JavaScript losgekoppeld moet zijn van je HTML.

Dit paradigma is sterk, maar het heeft enkele zwakke punten. Ik wil deze tutorial niet langer maken om je ervan te overtuigen dat dit idee een stap in de goede richting is, dus als dit idee je nog steeds dwars zit, kun je deze link bekijken. Naarmate je meer te weten komt over React, zou dit ongemak snel moeten verdwijnen.

De "HTML" die u in de rendermethode schrijft, is eigenlijk geen HTML, maar React noemt dit "JSX". Met JSX kunnen we eenvoudig HTML-achtige syntaxis schrijven die (uiteindelijk) wordt omgezet in lichtgewicht JavaScript-objecten. React is dan in staat om deze JavaScript-objecten te nemen en van hen een "virtuele DOM" of een JavaScript-weergave van de werkelijke DOM te vormen. Dit creëert een win / win-situatie waarbij u de toegankelijkheid van sjablonen krijgt met de kracht van JavaScript.

Kijkend naar het onderstaande voorbeeld, is dit wat uw JSX uiteindelijk zal worden gecompileerd.

klasse HelloWorld breidt React.Component {uit
  render () {
    terug React.createElement ("div", null, "Hello World");
  }
}
Nu kunt u afzien van de JSX -> JS-transformatiefase en uw React-componenten schrijven zoals de bovenstaande code. Maar zoals je je kunt voorstellen, zou dat nogal lastig zijn. Ik ken niemand die JSX niet gebruikt. Bekijk React Elements versus React Components voor meer informatie over waar JSX naar compileert.

Tot nu toe hebben we niet echt het belang benadrukt van dit nieuwe virtuele DOM-paradigma waar we op springen. De reden waarom het React-team met deze aanpak is gegaan, is dat, aangezien de virtuele DOM een JavaScript-weergave is van de werkelijke DOM, React het verschil tussen de huidige virtuele DOM (berekend na enkele gegevenswijzigingen) kan bijhouden met de vorige virtuele DOM (berekend vóór enkele gegevenswijzigingen). React isoleert vervolgens de wijzigingen tussen de oude en nieuwe virtuele DOM en werkt vervolgens alleen de echte DOM bij met de nodige wijzigingen.

In de termen van meer leek, omdat het manipuleren van de werkelijke DOM traag is, is React in staat om manipulaties naar de werkelijke DOM te minimaliseren door een virtuele DOM bij te houden en alleen de echte DOM bij te werken wanneer dat nodig is en met alleen de nodige wijzigingen. (Meer info hier).

Doorgaans hebben UI's veel toestanden die het beheren van een staat moeilijk maken. Door de virtuele DOM opnieuw te renderen telkens wanneer een statusverandering optreedt, maakt React het gemakkelijker om na te denken over de status van uw toepassing. Het proces ziet er ongeveer zo uit:

Sommige gebruikersgebeurtenissen die de status van uw app wijzigen → Virtuele DOM opnieuw renderen → Vorige virtuele DOM anders maken met nieuwe virtuele DOM → Werk echte DOM alleen bij met de nodige wijzigingen.

Omdat er een transformatieproces is van JSX naar JS, moet je een soort transformatiefase instellen terwijl je je ontwikkelt. In deel 2 van deze serie introduceer ik Webpack en Babel voor deze transformatie.

Laten we teruggaan naar onze "Belangrijkste onderdelen van React" checklist en kijken waar we nu zijn.

 JSX - Hiermee kunnen we HTML schrijven zoals syntaxis die wordt
getransformeerd naar lichtgewicht Java-objecten.
 Virtuele DOM - Een JavaScript-weergave van de werkelijke
DOM.
 React.Component - De manier waarop u een nieuw component maakt.
 render (methode) - Beschrijft hoe de gebruikersinterface eruit zal zien
het specifieke onderdeel.
 ReactDOM.render - Geeft een React-component terug naar een DOM-knooppunt.
state - Het interne gegevensarchief (object) van een component.
constructor (this.state) - De manier waarop u tot stand komt
de begintoestand van een component.
setState - Een hulpmethode die wordt gebruikt voor het bijwerken van de status van a
component en het opnieuw renderen van de gebruikersinterface
props - De gegevens die worden doorgegeven aan de onderliggende component
van de bovenliggende component.
propTypes - Hiermee kunt u de aanwezigheid of types van regelen
bepaalde rekwisieten zijn doorgegeven aan de onderliggende component.
defaultProps - Hiermee kunt u standaardprops instellen voor uw component.
Onderdeel Levenscyclus
  - componentDidMount - Ontslagen nadat het component is gemonteerd
  - componentWillUnmount - Ontslagen voordat het component zal ontkoppelen
  - getDerivedStateFromProps - Ontslagen wanneer het component wordt geactiveerd en
wanneer de rekwisieten veranderen. Gebruikt om de status van een bij te werken
component wanneer zijn rekwisieten veranderen
Evenementen
  - bij klikken
  - onSubmit
  - onChange

We maken een goed tempo. Alles wat vetgedrukt is, is wat we al hebben besproken, en je moet in ieder geval kunnen uitleggen hoe die bepaalde componenten in het React-ecosysteem passen.

Status toevoegen aan uw component (staat)

Volgende op de lijst is staat. Eerder spraken we over hoe moeilijk het beheer van gebruikersinterfaces is, omdat deze doorgaans veel verschillende statussen hebben. Dit gebied is waar React echt begint te schijnen. Elk onderdeel heeft de mogelijkheid om zijn eigen status te beheren en indien nodig zijn status door te geven aan onderliggende componenten.

Teruggaand naar het Twitter-voorbeeld van eerder, is de component UserInfo (hierboven roze gemarkeerd) verantwoordelijk voor het beheer van de status (of gegevens) van de informatie van de gebruiker. Als een andere component ook deze status / gegevens nodig had, maar die status was geen direct kind van de component UserInfo, dan zou u een andere component maken die de directe ouder zou zijn van UserInfo en de andere component (of beide componenten waarvoor die status nodig was) ). Je zou dan de staat doorgeven als rekwisieten in de onderliggende componenten. Met andere woorden, als u een hiërarchie met meerdere componenten hebt, moet een gemeenschappelijke bovenliggende component de status beheren en deze via rekwisieten doorgeven aan de onderliggende componenten.

Laten we een voorbeeldcomponent bekijken met behulp van zijn eigen interne status.

klasse HelloUser breidt React.Component {uit
  constructor (props) {
    super (props)
this.state = {
      gebruikersnaam: 'tylermcginnis'
    }
  }
  render () {
    terug (
      
        Hallo {this.state.username}            )   } }

We hebben met dit voorbeeld een nieuwe syntaxis geïntroduceerd. De eerste die je zal opvallen is de constructormethode. Uit de bovenstaande definitie is de constructormethode: "De manier waarop u de status van een component instelt". Met andere woorden, alle gegevens die u op deze.status in de constructor plaatst, maken deel uit van de status van dat onderdeel.

In de bovenstaande code vertellen we onze component dat we willen dat deze een gebruikersnaam bijhoudt. Deze gebruikersnaam kan nu in onze component worden gebruikt door {this.state.username} te doen, wat precies is wat we doen in onze rendermethode.

Het laatste waar we het over hebben als staat is dat onze component de mogelijkheid moet hebben om zijn eigen interne staat te wijzigen. We doen dit met een methode genaamd setState. Weet je nog eerder toen we het hadden over het opnieuw renderen van de virtuele dom wanneer de gegevens veranderen?

Signaal om onze app op de hoogte te stellen. Sommige gegevens zijn gewijzigd → Virtuele DOM opnieuw weergeven → Verschil vorige virtuele DOM met nieuwe virtuele DOM → Werk echte DOM alleen bij met de nodige wijzigingen.

Dat "signaal om onze app te informeren dat sommige gegevens zijn gewijzigd" is eigenlijk gewoon setState. Wanneer setState wordt aangeroepen, wordt de virtuele DOM opnieuw weergegeven, wordt het diff-algoritme uitgevoerd en wordt de echte DOM bijgewerkt met de nodige wijzigingen.

Als een kanttekening, wanneer we setState in de onderstaande code introduceren, gaan we ook een paar evenementen introduceren die op onze lijst staan. Twee vogels, één steen.

In het volgende codevoorbeeld hebben we nu een invoervak ​​dat, wanneer iemand erin typt, onze status automatisch bijwerkt en de gebruikersnaam wijzigt.

klasse HelloUser breidt React.Component {uit
  constructor (props) {
    super (props)
this.state = {
      gebruikersnaam: 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind (this)
  }
  handleChange (e) {
    this.setState ({
      gebruikersnaam: e.target.value
    })
  }
  render () {
    terug (
      
        Hallo {this.state.username}
        Naam veranderen:                     )   } }

Let op: we hebben nog een paar dingen geïntroduceerd. Het eerste is de methode handleChange. Deze methode wordt elke keer aangeroepen wanneer een gebruiker in het invoervak ​​typt. Wanneer handleChange wordt aangeroepen, gaat het setState aanroepen om onze gebruikersnaam opnieuw te definiëren met wat er in het invoerveld (e.target.value) is getypt. Onthoud dat wanneer setState wordt aangeroepen, React een nieuwe virtuele DOM maakt, de diff doet en vervolgens de echte DOM bijwerkt.

Laten we nu eens kijken naar onze rendermethode. We hebben een nieuwe regel toegevoegd die een invoerveld bevat. Het type invoerveld zal uiteraard tekst zijn. De waarde wordt de waarde van onze gebruikersnaam die oorspronkelijk is gedefinieerd in onze methode getInitialState en die wordt bijgewerkt in de methode handleChange.

Merk op dat er een nieuw attribuut is dat je waarschijnlijk nog nooit eerder hebt gezien, opChange. onChange is een React-ding en het roept elke methode op die u opgeeft telkens wanneer de waarde in het invoervak ​​verandert - in dit geval was de methode die we hebben opgegeven handleChange.

Het proces voor de bovenstaande code zou ongeveer zo verlopen.

Een gebruiker typt in het invoervak ​​→ handleChange wordt aangeroepen → de status van onze component wordt ingesteld op een nieuwe waarde → React maakt de virtuele DOM opnieuw → Reageert op de wijziging → Real DOM wordt bijgewerkt.

Later, wanneer we rekwisieten behandelen, zien we enkele meer geavanceerde gebruikssituaties van de afhandelingsstatus.

We komen eraan! Als u de vetgedrukte items hieronder niet kunt uitleggen, gaat u dat gedeelte opnieuw lezen. Een tip over ECHT leren Reageren: laat dit niet passief lezen je een vals gevoel van veiligheid geven dat je eigenlijk weet wat er aan de hand is en opnieuw kan creëren wat we doen. Ga naar CodeSandbox en probeer componenten opnieuw te maken (of zelf te maken) zonder te kijken naar wat ik heb gedaan. Het is de enige manier om echt te leren hoe je met React kunt bouwen. Dit geldt voor deze zelfstudie en het volgende.

 JSX - Hiermee kunnen we HTML schrijven zoals syntaxis die wordt
getransformeerd naar lichtgewicht Java-objecten.
 Virtuele DOM - Een JavaScript-weergave van de werkelijke
DOM.
 React.Component - De manier waarop u een nieuw component maakt.
 render (methode) - Beschrijft hoe de gebruikersinterface eruit zal zien
het specifieke onderdeel.
 ReactDOM.render - Geeft een React-component terug naar een DOM-knooppunt.
 status - Het interne gegevensarchief (object) van een component.
 constructor (this.state) - De manier waarop u tot stand komt
de begintoestand van een component.
 setState - Een hulpmethode die wordt gebruikt voor het bijwerken van de status van a
component en het opnieuw renderen van de gebruikersinterface
props - De gegevens die worden doorgegeven aan de onderliggende component
van de bovenliggende component.
propTypes - Hiermee kunt u de aanwezigheid of types van regelen
bepaalde rekwisieten zijn doorgegeven aan de onderliggende component.
defaultProps - Hiermee kunt u standaardprops instellen voor uw component.
Onderdeel Levenscyclus
  - componentDidMount - Ontslagen nadat het component is gemonteerd
  - componentWillUnmount - Ontslagen voordat het component zal ontkoppelen
  - getDerivedStateFromProps - Ontslagen wanneer het component wordt geactiveerd en
wanneer de rekwisieten veranderen. Gebruikt om de status van een bij te werken
component wanneer zijn rekwisieten veranderen
Evenementen
  - bij klikken
  - onSubmit
  - onChange

Ontvangststatus van bovenliggende component (props, propTypes, getDefaultProps)

We hebben het al een paar keer over rekwisieten gehad, omdat het moeilijk is om echt veel zonder ze te doen. Volgens onze bovenstaande definitie zijn rekwisieten de gegevens die worden doorgegeven aan de onderliggende component van de bovenliggende component. Dit zorgt ervoor dat onze React-architectuur vrij eenvoudig blijft. Status afhandelen in de hoogste bovenliggende component die de specifieke gegevens moet gebruiken, en als u een onderliggende component hebt die ook die gegevens nodig heeft, geeft u die gegevens door als rekwisieten.

Hier is een heel eenvoudig voorbeeld van het gebruik van rekwisieten.

klasse HelloUser breidt React.Component {uit
  render () {
    terug (
      
Hallo, {this.props.name}
    )   } }
ReactDOM.render (
  ,
  document.getElementById ( 'root')
);

Merk op dat we op regel 9 een attribuut hebben met de naam 'Tyler'. Nu in onze component kunnen we {this.props.name} gebruiken om “Tyler” te krijgen.

Laten we een geavanceerder voorbeeld bekijken. We gaan nu twee componenten hebben. Eén ouder, één kind. De ouder gaat de staat bijhouden en een deel van die staat doorgeven aan het kind als rekwisieten. Laten we eerst die oudercomponent bekijken.

Bovenliggende component:

klasse FriendsContainer verlengt React.Component {
  constructor (props) {
    super (props)
this.state = {
      naam: 'Tyler McGinnis',
      vrienden: [
        'Jake Lingwall',
        'Sarah Drasner',
        'Merrick Christensen'
      ]
    }
  }
  render () {
    terug (
      
        

Naam: {this.state.name}

                    )   } }

Er is echt niet veel aan de hand in dit onderdeel dat we nog niet eerder hebben gezien. We hebben een begintoestand en we geven een deel van die begintoestand door aan een ander onderdeel. Het grootste deel van de nieuwe code komt van dit onderliggende onderdeel, dus laten we dat eens nader bekijken.

Onderliggende component:

klasse ShowList verlengt React.Component {
  render () {
    terug (
      
        

Vrienden

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

Vergeet niet dat de code die wordt geretourneerd door onze rendermethode een weergave is van hoe de echte DOM eruit zou moeten zien. Als u niet bekend bent met Array.prototype.map, kan deze code er een beetje vreemd uitzien. Het enige wat de kaart doet is een nieuwe array maken, onze callback-functie voor elk item in de array oproepen en de nieuwe array vullen met het resultaat van het aanroepen van de callback-functie voor elk item. Bijvoorbeeld,

const vrienden = [
  'Jake Lingwall',
  'Sarah Drasner',
  'Merrick Christensen'
];
const listItems = friends.map ((friend) => {
  terug "
  • " + vriend + "
  • "; });
    console.log (listitems);

    De console.log hierboven retourneert ["

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

    Merk op dat het enige dat gebeurde was dat we een nieuwe array hadden gemaakt en

  • aan elk item in de oorspronkelijke array hebben toegevoegd.

    Het mooie van kaart is dat het perfect past in React (en het is ingebouwd in JavaScript). Dus in onze onderliggende component hierboven, brengen we de namen in kaart, verpakken we elke naam in een paar

  • -tags en slaan die op in onze listItems-variabele. Vervolgens retourneert onze rendermethode een ongeordende lijst met al onze vrienden.

    Laten we nog een voorbeeld bekijken voordat we stoppen met praten over rekwisieten. Het is belangrijk om te begrijpen dat waar de gegevens zich bevinden, precies de plaats is waar u die gegevens wilt manipuleren. Dit maakt het eenvoudig om over uw gegevens te redeneren. Alle getter / setter-methoden voor een bepaald stuk gegevens bevinden zich altijd in dezelfde component waar die gegevens zijn gedefinieerd. Als u een stukje gegevens buiten de locatie van de gegevens moest manipuleren, zou u de getter / setter-methode als rekwisieten aan dat onderdeel doorgeven. Laten we een dergelijk voorbeeld bekijken.

    klasse FriendsContainer verlengt React.Component {
      constructor (props) {
        super (props)
    this.state = {
          naam: 'Tyler McGinnis',
          vrienden: [
            'Jake Lingwall',
            'Sarah Drasner',
            'Merrick Christensen'
          ],
        }
    this.addFriend = this.addFriend.bind (this)
      }
      addFriend (vriend) {
        this.setState ((staat) => ({
          vrienden: state.friends.concat ([vriend])
        }))
      }
      render () {
        terug (
          
            

    Naam: {this.state.name}

                                 )   } }
    . Merk op dat we in onze addFriend-methode een nieuwe manier hebben geïntroduceerd om setState aan te roepen. In plaats van het een object door te geven, geven we het een functie door die vervolgens wordt doorgegeven. Wanneer u de nieuwe status van uw component instelt op basis van de vorige status (zoals we doen met onze vriendenarray), wilt u setState een functie doorgeven die de huidige status aanneemt en de gegevens retourneert om samen te voegen met de nieuwe staat. Bekijk het hier.
    klasse AddFriend verlengt React.Component {
      constructor (props) {
        super (props)
    this.state = {
          nieuwe vriend: ''
        }
    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 ({
          nieuwe vriend: ''
        })
      }
      render () {
        terug (
          
                                 )   } }
    klasse ShowList verlengt React.Component {
      render () {
        terug (
          
            

    Vrienden

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

    Je zult merken dat de bovenstaande code grotendeels hetzelfde is als het vorige voorbeeld, behalve dat we nu de mogelijkheid hebben om een ​​naam aan onze vriendenlijst toe te voegen. Merk op hoe ik een nieuwe component AddFriend heb gemaakt die de nieuwe vriend beheert die we gaan toevoegen.

    De reden hiervoor is omdat de oudercomponent (FriendContainer) niet geeft om de nieuwe vriend die u toevoegt, het geeft alleen om al uw vrienden als geheel (de vriendenarray). Omdat we ons echter houden aan de regel om alleen uw gegevens te manipuleren uit de component die er om geeft, hebben we de addFriend-methode als een prop doorgegeven aan onze component AddFriend en we noemen het met de nieuwe vriend zodra de handleAddNew methode wordt genoemd.

    Op dit punt raad ik je aan om zelf dezelfde functionaliteit opnieuw te maken met behulp van de bovenstaande code als gids als je eenmaal 3-4 minuten vastzit.

    Voordat we verder gaan met rekwisieten, wil ik nog twee React-functies behandelen met betrekking tot rekwisieten. Het zijn propTypes en defaultProps. Ik zal hier niet te diep op ingaan omdat beide vrij eenvoudig zijn.

    met prop-typen kunt u de aanwezigheid of typen van bepaalde rekwisieten die aan de onderliggende component worden doorgegeven, regelen. Met propTypes kunt u opgeven dat bepaalde rekwisieten vereist zijn of dat bepaalde rekwisieten van een specifiek type zijn.

    Vanaf React 15 is PropTypes niet langer opgenomen in het React-pakket. U moet het afzonderlijk installeren door npm install prop-types uit te voeren.

    Met defaultProps kunt u een standaardwaarde (of een back-up) opgeven voor bepaalde rekwisieten voor het geval die rekwisieten nooit in het onderdeel worden doorgegeven.

    Ik heb onze componenten van eerder tot nu aangepast met behulp van propTypes, om te vereisen dat addFriend een functie is en dat deze wordt doorgegeven aan de component AddFriend. Ik heb ook, met behulp van defaultProps, gespecificeerd dat als er geen array van vrienden wordt gegeven aan de component ShowList, deze standaard een lege array wordt.

    importeren Reageren van 'reageren'
    PropTypes importeren uit 'prop-types'
    klasse AddFriend verlengt React.Component {
      constructor (props) {
        super (props)
    this.state = {
          nieuwe vriend: ''
        }
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          nieuwe vriend: ''
        })
      }
      render () {
        terug (
          
                                 )   } }
    AddFriend.propTypes: {
      addNew: PropTypes.func.isRequired
    }
    klasse ShowList verlengt React.Component {
      render () {
        terug (
          
            

    Vrienden

            
                {this.props.names.map ((friend) => {             retourneer
    • {vriend}
    •           })}                     )   } }
    ShowList.defaultProps = {
      namen: []
    }

    Oké, we zijn aan het laatste stuk van deze eerste tutorial. Laten we onze gids eens bekijken en kijken wat we nog hebben.

     JSX - Hiermee kunnen we HTML schrijven zoals syntaxis die wordt
    getransformeerd naar lichtgewicht JavaScript-objecten.
     Virtuele DOM - Een JavaScript-weergave van de werkelijke
    DOM.
     React.Component - De manier waarop u een nieuw component maakt.
     render (methode) - Beschrijft hoe de gebruikersinterface eruit zal zien
    het specifieke onderdeel.
     ReactDOM.render - Geeft een React-component terug naar een DOM-knooppunt.
     status - Het interne gegevensarchief (object) van een component.
     constructor (this.state) - De manier waarop u tot stand komt
    de begintoestand van een component.
     setState - Een hulpmethode die wordt gebruikt voor het bijwerken van de status van a
    component en het opnieuw renderen van de gebruikersinterface
     rekwisieten - De gegevens die worden doorgegeven aan de onderliggende component
    van de bovenliggende component.
     propTypes - Hiermee kunt u de aanwezigheid of typen van personen beheren
    bepaalde rekwisieten zijn doorgegeven aan de onderliggende component.
     defaultProps - Hiermee kunt u standaardprops instellen voor uw component.
    Onderdeel Levenscyclus
      - componentDidMount - Ontslagen nadat het component is gemonteerd
      - componentWillUnmount - Ontslagen voordat het component zal ontkoppelen
      - getDerivedStateFromProps - Ontslagen wanneer het component wordt geactiveerd en
    wanneer de rekwisieten veranderen. Gebruikt om de status van een bij te werken
    component wanneer zijn rekwisieten veranderen
     Evenementen
      - bij klikken
      - onSubmit
      - onChange

    We zijn zo dichtbij!

    Onderdeel Levenscyclus

    Elk onderdeel dat u maakt, heeft zijn eigen levenscyclusevents die nuttig zijn voor verschillende dingen. Als we bijvoorbeeld bij de eerste weergave een Ajax-verzoek wilden doen en wat gegevens wilden ophalen, waar zouden we dat dan doen? Of, als we wat logica wilden gebruiken wanneer onze rekwisieten veranderden, hoe zouden we dat dan doen? De verschillende levenscyclusevents zijn de antwoorden op beide. Laten we ze afbreken.

    class-app breidt React.Component {uit
      constructor (props) {
        super (props)
    this.state = {
          naam: 'Tyler McGinnis'
        }
      }
      componentDidMount () {
        // Wordt opgeroepen zodra de component is gekoppeld aan de DOM
        // Goed voor het doen van AJAX-verzoeken
      }
      statische getDerivedStateFromProps (nextProps, prevState) {
        // Het object dat u retourneert uit deze functie zal
        // worden samengevoegd met de huidige status.
      }
      componentWillUnmount () {
        // ONMIDDELLIJK aangeroepen voordat een component wordt verwijderd
        // Goed voor het opruimen van luisteraars
      }
      render () {
        terug (
          
            Hallo {this.state.name}            )   } }

    componentDidMount - Eenmalig aangeroepen na de eerste weergave. Omdat de component al is aangeroepen wanneer deze methode wordt aangeroepen, hebt u toegang tot de virtuele DOM als u deze nodig hebt. U doet dat door this.getDOMNode () aan te roepen. Dit is dus de levenscyclusgebeurtenis waarbij u uw AJAX-verzoeken indient om enkele gegevens op te halen.

    componentWillUnmount - Deze levenscyclus wordt aangeroepen onmiddellijk voordat een component wordt ontkoppeld van de DOM. Dit is waar u de nodige opruiming kunt doen.

    getDerivedStateFromProps - Soms moet u de status van uw component bijwerken op basis van de rekwisieten die worden doorgegeven. Dit is de levenscyclusmethode waarin u dat zou doen. Het wordt doorgegeven aan de rekwisieten en de status en het object dat u retourneert, wordt samengevoegd met de huidige status.

    Nou, als je tot nu toe bij me bent gebleven, geweldig gedaan. Ik hoop dat deze tutorial je ten goede is gekomen en dat je je nu op zijn minst mild voelt bij React.

    Bekijk onze cursus React Fundamentals voor een diepgaandere kijk op de basisprincipes van React.

    Tyler McGinnis