Elementen Renderen

Elementen zijn de kleinste bouwstenen van React applicaties.

Een element beschrijft dat wat je wilt laten zien op het scherm:

const element = <h1>Hello, world</h1>;

In tegenstelling tot de elementen van het browser DOM zijn React elementen eenvoudige objecten en goedkoop om te maken. Het React DOM zorgt ervoor dat het DOM wordt bijgewerkt zodat het gelijk blijft aan de React elementen.

Opmerking:

Het zou kunnen dat men elementen verwart met het bekendere concept van “componenten”. We zullen componenten introduceren in het volgende hoofdstuk. Elementen zijn waar componenten “van gemaakt zijn” en we raden je aan om eerst dit hoofdstuk te lezen alvorens verder te gaan.

Een Element In Het DOM Renderen

Stel dat er ergens in je HTML bestand een <div> staat:

<div id="root"></div>

We noemen dit een “root” DOM node omdat alle inhoud van deze node beheerd zal worden door het React DOM.

Applicaties die alleen met React gebouwd zijn, hebben meestal een enkele root DOM node. Als je React probeert te integreren in een bestaande applicatie, kun je zoveel geïsoleerde root DOM nodes hebben als je maar wilt.

Om een React element in de root DOM node te renderen, geef je beide door aan ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Probeer het op Codepen

Dit zal “Hello, world” op de pagina tonen.

Een Gerenderd Element Bijwerken

React elementen zijn immutable (Engels) (onveranderlijk). Nadat je een element hebt gemaakt, kun je zijn children of attributen niet meer wijzigen. Een element is als een enkel frame in een film: het vertegenwoordigt de UI op een bepaald moment in de tijd.

Voor zover we nu weten, kan de UI alleen bijgewerkt worden door een nieuw element te maken en het door te geven aan ReactDOM.render().

Neem dit voorbeeld van een tikkende klok:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Probeer het op CodePen

Hierin wordt ReactDOM.render() elke seconde aangeroepen via een setInterval() (Engels) callback.

Opmerking:

In de praktijk roepen de meeste React apps ReactDOM.render() maar één keer aan. In de volgende hoofdstukken zullen we leren hoe code zoals dit voorbeeld ingekapseld worden in stateful componenten.

We raden aan om geen hoofdstukken over te slaan, omdat ze op elkaar voortbouwen.

React Werkt Alleen Datgene Bij Dat Nodig Is

Het React DOM vergelijkt het element en zijn children met het vorige element en voert alleen de wijzigingen in het DOM uit die nodig zijn om deze in de gewenste staat te krijgen.

Je kunt dit zien door met de browser tools het laatste voorbeeld te inspecteren:

DOM inspector toont granulaire updates

Alleen de tekst node waarvan de inhoud wijzigt wordt bijgewerkt door het React DOM, ook al gebruiken we een element dat de hele UI tree beschrijft op elke tick.

Onze ervaringen hebben ons geleerd dat je een hele categorie aan bugs elimineert als je nadenkt over hoe de UI er uit moet zien op een bepaald moment, in plaats van hoe ze voortdurend verandert.