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

Billede af @simonmigaj fra Unsplash
Dette er en del af min "React for beginners" -serie om introduktion af React, dens kernefunktioner og bedste praksis, der skal følges. Flere artikler kommer!
Næste artikel>

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

Vi lærer, hvordan man kører React med en enkelt HTML-fil og derefter udsætter os for et første uddrag.

I slutningen 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, der viser timer og minutter. React-tilbud til arkitekten af ​​vores kode med komponenter. Lad os oprette vores ur-komponent.

Ignorer HTML-kedelplade og scriptimport for afhængigheder (med unpkg, se React-eksempel). De få resterende linjer er faktisk React code.

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

Injicér data i komponenten

Vores ur er ganske dumt, det viser de timer og minutter, vi leverede til det.

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

Denne type React-komponent med kun en render-funktion er funktionel komponent. De har en mere kortfattet syntaks sammenlignet med klasser.

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 er i stand til at opdatere props-værdier.

Brug af rekvisitter er ret ligetil. Opret en DOM-knude med dit komponentnavn som tagnavnet. Giv det derefter attributter opkaldt efter rekvisitter. Derefter vil rekvisitterne være tilgængelige via this.props i komponenten.

Hvad med unoteret HTML?

Jeg var sikker på, at du vil bemærke den ikke-citerede HTML, der er returneret af renderfunktionen. Denne kode bruger JSX-sprog, det er en kort syntax til at definere HTML-skabelon i React-komponenter.

Nu ønsker du måske at undgå JSX for at definere komponentens skabelon. Faktisk ser JSX ud som syntaktisk sukker.

Se på følgende uddrag, der viser både JSX og React-syntaks for at opbygge din mening.

Gå videre med den virtuelle DOM

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

Opdatering af elementer på en webside (en knude 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 rammer som React og Vue.js omgår dette problem. De kommer med en løsning kaldet Virtual DOM.

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

At reducere opkald til DOM API involverer at holde DOM-trærepræsentation i hukommelsen. Da vi taler om JavaScript-rammer, lyder det at vælge JSON legitimt.

Denne tilgang afspejler øjeblikkeligt ændringer i den virtuelle DOM.

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

Kan du huske React.createElement? Faktisk opretter denne funktion (kaldes direkte eller gennem JSX) en ny knude i den virtuelle DOM.

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

Dets job er at komme med den mest optimerede løsning for at løse forskellen mellem tidligere og nuværende Virtual DOM-tilstand.

Og anvend derefter den nye virtuelle DOM på den rigtige DOM.

Yderligere læsninger

Denne artikel går langt på React interne og Virtual DOM forklaringer. Det er stadig vigtigt at vide lidt om, hvordan en ramme fungerer, når du bruger den.

Hvis du vil lære, hvordan den virtuelle 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 nu, at du er opmærksom på, hvad rekvisitter, funktionel komponent, JSX og Virtual DOM er.

Hvis du fandt denne artikel nyttig, skal du klikke på knappen 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

Dette er en del af min "React for beginners" -serie om introduktion af React, dens kernefunktioner og bedste praksis, der skal følges.
Næste artikel>

Tjek mine andre artikler

➥ JavaScript

  • Sådan forbedres dine JavaScript-færdigheder ved at skrive din egen ramme for webudvikling
  • Almindelige fejl, der skal undgås, mens du arbejder med Vue.js

➥ Tips & tricks

  • Stop smertefuld JavaScript-fejlfinding og omfavn Intellij med kildekort
  • Sådan reduceres enorme JavaScript-bundter uden indsats

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