En hurtig guide til at lære React og hvordan dens virtuelle DOM fungerer

Vil du lære React uden at gennemgå dokumentationen (i øvrigt godt skrevet)? Du klikkede på den rigtige artikel.

Vi vil lære at køre React med en enkelt HTML-fil og derefter udsætte os selv for et første uddrag.

Til sidst vil du være i stand til at forklare disse begreber:rekvisitter, funktionel komponent, JSX og Virtual DOM.

Målet er at lave et ur, som viser timer og minutter. React tilbyder at bygge vores kode med komponenter. `Lad os skabe vores urkomponent.

<!-- Skipping all HTML5 boilerplate -->
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<!-- For JSX support (with babel) -->
<script src="https://unpkg.com/[email protected]/babel.min.js" charset="utf-8"></script> 

<div id="app"></div> <!-- React mounting point-->

<script type="text/babel">
  class Watch extends React.Component {
    render() {
      return <div>{this.props.hours}:{this.props.minutes}</div>;
    }
  }

  ReactDOM.render(<Watch hours="9" minutes="15"/>, document.getElementById('app'));
</script>

Ignorer HTML-boilerplate og script-import for afhængigheder (med unpkg, se React-eksempel). De få resterende linjer er faktisk React-kode.

Først skal du definere Watch-komponenten og dens skabelon. Monter derefter React i DOM og bed om at gengive et ur.

Injicer data i komponenten

Vores ur er ret dumt, det viser de timer og minutter, vi har givet det.

Du kan prøve at spille rundt og ændre værdien for disse egenskaber (kaldet rekvisitter i React). Det vil altid vise det, du bad om, selvom det ikke er tal.

Denne form for React-komponent med kun en gengivelsesfunktion er funktionel komponent. De har en mere kortfattet syntaks sammenlignet med klasser.

const Watch = (props) =>
  <div>{props.hours}:{props.minutes}</div>;

ReactDOM.render(<Watch hours="Hello" minutes="World"/>, document.getElementById('app'));

Rekvisitter er kun data, der sendes til en komponent, generelt af en omgivende komponent. Komponenten bruger rekvisitter til forretningslogik og gengivelse.

Men så snart rekvisitter ikke hører til komponenten, er de uforanderlige . Således er den komponent, der leverede rekvisitterne, det eneste stykke kode, der kan opdatere props-værdier.

At bruge rekvisitter er ret ligetil. Opret en DOM-node med dit komponentnavn som tagnavn. Giv den derefter attributter opkaldt efter rekvisitter. Så vil rekvisitterne være tilgængelige gennem this.props i komponenten.

Hvad med uciteret HTML?

Jeg var sikker på, at du vil bemærke den uciterede HTML, der returneres af render fungere. Denne kode bruger JSX sprog, er det en forkortet syntaks til at definere HTML-skabelon i React-komponenter.

// Equivalent to JSX: <Watch hours="9" minutes="15"/>
React.createElement(Watch, {'hours': '9', 'minutes': '15'});

Nu vil du måske undgå JSX for at definere komponentens skabelon. Faktisk ligner JSX syntaktisk sukker.

Tag et kig på følgende uddrag, som viser både JSX- og React-syntaks for at opbygge din mening.

// Using JS with React.createElement
React.createElement('form', null, 
  React.createElement('div', {'className': 'form-group'},
    React.createElement('label', {'htmlFor': 'email'}, 'Email address'),
    React.createElement('input', {'type': 'email', 'id': 'email', 'className': 'form-control'}),
  ),
  React.createElement('button', {'type': 'submit', 'className': 'btn btn-primary'}, 'Submit')
)

// Using JSX
<form>
  <div className="form-group">
    <label htmlFor="email">Email address</label>
    <input type="email" id="email" className="form-control"/>
  </div>
  <button type="submit" className="btn btn-primary">Submit</button>
</form>

Gå videre med Virtual DOM

Denne sidste del er mere kompliceret, men meget interessant. Det vil hjælpe dig med at forstå, hvordan React fungerer under emhætten.

Opdatering af elementer på en webside (en node i DOM-træet) involverer brug af DOM API. Det vil male siden igen, men det kan være langsomt (se denne artikel for hvorfor).

Mange frameworks såsom React og Vue.js omgår dette problem. De kommer med en løsning kaldet Virtual DOM.

{
   "type":"div",
   "props":{ "className":"form-group" },
   "children":[
     {
       "type":"label",
       "props":{ "htmlFor":"email" },
       "children":[ "Email address"]
     },
     {
       "type":"input",
       "props":{ "type":"email", "id":"email", "className":"form-control"},
       "children":[]
     }
  ]
}

Ideen er enkel. Det er meget dyrt at læse og opdatere DOM-træet. Så lav så få ændringer som muligt og opdater så få noder som muligt.

Reduktion af kald til DOM API involverer at beholde DOM-trærepræsentationen i hukommelsen. Da vi taler om JavaScript-rammer, lyder det legitimt at vælge JSON.

Denne tilgang afspejler øjeblikkeligt ændringer i Virtual DOM.

Desuden samler den et par opdateringer til senere anvendelse på Real DOM på én gang (for at undgå ydeevneproblemer).

Kan du huske React.createElement ? Faktisk opretter denne funktion (kaldet direkte eller via JSX) en ny node i det virtuelle DOM.

// React.createElement naive implementation (using ES6 features)
function createElement(type, props, ...children) {
  return { type, props, children };
}

For at anvende opdateringer kommer Virtual DOM-kernefunktionen i spil, afstemningsalgoritmen.

Dens opgave er at komme med den mest optimerede løsning til at løse forskellen mellem tidligere og nuværende Virtual DOM-tilstand.

Og anvend derefter den nye virtuelle DOM til den rigtige DOM.

Yderligere læsninger

Denne artikel går langt på React interne og Virtual DOM-forklaringer. Alligevel er det vigtigt at vide lidt om, hvordan et framework fungerer, når du bruger det.

Hvis du ønsker at lære, hvordan Virtual DOM fungerer i detaljer, skal du følge mine læseanbefalinger. Du kan skrive din egen virtuelle DOM og lære om DOM-gengivelse.

Tak fordi du læste. Beklager, hvis dette er for teknisk til dit første trin i React. Men jeg håber, at du nu er klar over, hvad rekvisitter, funktionel komponent, JSX og Virtual DOM er.

Hvis du fandt denne artikel nyttig, skal du klikke på ? knap et par gange for at få andre til at finde artiklen og for at vise din støtte! ?

Glem ikke at følge mig for at få besked om mine kommende artikler ?

Se mine andre artikler

➥ JavaScript

• Hvordan kan du forbedre dine JavaScript-færdigheder ved at skrive din egen webudviklingsramme?
• Almindelige fejl, der skal undgås, mens du arbejder med Vue.js

➥ Tips og tricks

• Stop smertefuld JavaScript-fejlretning og omfavn Intellij med kildekort
• Sådan reduceres enorme JavaScript-pakker uden anstrengelse

Oprindeligt offentliggjort på www.linkedin.com den 6. februar 2018.