We want to hear from you!Take our 2020 Community Survey!

Rendering av element

Element är de minsta byggstenarna i React-applikationer.

Ett element beskriver vad som skall visas på skärmen:

const element = <h1>Hej, världen</h1>;

Till skillnad från DOM-elementen i en webbläsare är React-element enkla och kostnadseffektiva objekt. React DOM tar hand om uppdatering av DOM och tillhörande React-element.

Obs:

En kan förväxla element med det mer kända begreppet “komponenter”. Vi kommer att introducera komponenter i nästa avsnitt. Elementen utgör grunden för komponenterna, så vi rekommenderar dig att läsa detta avsnitt innan du går vidare.

Rendering av element i DOM

Låt oss säga att du har en <div> någonstans i din HTML-fil:

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

Vi kallar detta en “root”-DOM-nod eftersom allt inom den kommer att hanteras av React DOM.

Applikationer byggda med bara React har vanligtvis en enda “root”-DOM-nod. Om du integrerar React i en befintlig app så kan du ha så många isolerade DOM-noder som du vill.

För att rendera ett React-element i en “root”-DOM-nod, skicka båda till ReactDOM.render():

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

Try it on CodePen

Det visar “Hej, världen” på sidan.

Uppdatera det renderade elementet

React-element är oföränderliga. När du väl har skapat ett element kan du inte ändra på dess barn eller attribut. Ett element är likt en stillbild i en film: den representerar användargränssnittet vid en specfik tidpunkt.

Med vad vi har lärt oss hittills är det enda sättet att uppdatera användargränssnittet, att skapa ett nytt element och skicka det till ReactDOM.render().

Låt oss ta detta exempel på en tickande klocka:

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

Try it on CodePen

Den kallar på ReactDOM.render() varje sekund från en setInterval() callback.

Obs:

I praktiken kallar de flesta React-applikationer på ReactDOM.render() endast en gång. I nästa avsnitt lär vi oss hur vi kapslar in sådan kod i komponenter med state.

Vi rekomenderar att du läser avsnitten i ordning då de bygger vidare på varandra.

React uppdaterar endast det nödvändigaste

React DOM jämför det nuvarande elementet och dess barn med det föregående, och tillämpar endast de DOM-uppdateringar som innehåller en förändring.

Du kan verifiera genom att inspektera det senaste exemplet med utvecklingsverktygen för webbläsare:

DOM-inspekteraren som visar uppdateringar

Trots att vi skapar ett element som beskriver hela användargränssnittet varje tick, kommer endast textnoden vars innehåll har ändrats att uppdateras av React DOM.

Enligt vår erfarenhet är det mer meningsfullt att tänka på hur användargränssnittet ser ut vid en given tidpunkt, snarare än hur det kommer att förändras över tiden. Detta tänkande förhindrar en hel rad misstag.

Is this page useful?Edit this page