Renderitzant elements

Els elements són la unitat més petita de les aplicacions de React.

Un element descriu el que voleu veure a la pantalla:

const element = <h1>Hola, món</h1>;

A diferència dels elements del DOM dels navegadors, els elements de React són objectes plans, i la seva creació és de baix cost. React DOM es cuida d’actualitzar el DOM per sincronitzar-se amb els elements de React.

Nota:

Un podria confondre els elements amb un altre concepte anomenat “components”. En la següent secció parlarem de components. Els elements formen els components. Us recomanem aquesta secció abans de continuar.

Renderitzant un element en el DOM

Suposem que hi ha un <div> en alguna part del vostre fitxer HTML:

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

En diem un node “arrel” perquè tot el que estigui dins d’ell serà gestionat per React DOM.

Les aplicacions construïdes solament amb React normalment tenen un únic node arrel al DOM. Si estàs integrant React en una aplicació existent, pots tenir tants nodes arrel del DOM aïllats com vulguis.

Per renderitzar un element de React en un node arrel del DOM, passa’ls tots dos a ReactDOM.render():

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

Prova-ho a CodePen

Això mostra “Hello, world” a la pàgina.

Actualitzant l’element renderitzat

Els elements de React són immutables. Un cop crees un element, no pots canviar els seus fills o atributs. Un element és com un fotograma solitari en una pel·lícula: aquest representa la interfície d’usuari en cert punt en el temps.

Amb el nostre coneixement fins a aquest punt, l’única manera d’actualitzar la interfície d’usuari és creant un nou element, i passar-ho a ReactDOM.render().

Considera aquest exemple d’un rellotge en marxa:

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);

Prova-ho a CodePen

Aquest crida a ReactDOM.render() cada segon des d’un callback del ‘setInterval()’.

Nota:

A la pràctica, a la majoria de les aplicacions de React només es crida ‘ReactDOM.render()’ una vegada. En les següents seccions aprendrem com el codi es pot encapsular en components amb estat.

Recomanem que no et saltis cap tema perquè aquests es relacionen entre ells.

React només actualitza el que cal

React DOM compara l’element i els seus fills amb l’element anterior, i només aplica les actualitzacions del DOM que són necessàries perquè el DOM estigui en l’estat desitjat.

Pots fer això inspeccionant l’últim exemple amb les eines del navegador:

Inspector del DOM mostrant actualitzacions diminutes

Tot i que hem creat un element que descriu completament l’arbre de la interfície d’usuari en cada instant, React DOM només actualitza el node del qual el contingut ha canviat.

En la nostra experiència, pensar com s’hauria de veure en un moment donat la interfície d’usuari i no en com canviar-la en el temps elimina tota classe d’errors.