Een korte handleiding om React te leren en hoe zijn virtuele DOM werkt

Foto door @simonmigaj uit Unsplash
Dit maakt deel uit van mijn serie 'React voor beginners' over de introductie van React, de belangrijkste functies en best practices die moeten worden gevolgd. Meer artikelen komen eraan!
Volgende artikel>

Wil je React leren zonder de documentatie te crawlen (goed geschreven trouwens)? U klikte op het juiste artikel.

We leren React uitvoeren met een enkel HTML-bestand en stellen ons vervolgens bloot aan een eerste fragment.

Aan het einde kun je deze concepten uitleggen: rekwisieten, functionele component, JSX en Virtual DOM.

Het doel is om een ​​horloge te maken dat uren en minuten weergeeft. React biedt aan om onze code met componenten te ontwerpen. Laten we onze horlogecomponent maken.

Negeer HTML-boilerplate en scriptimport voor afhankelijkheden (met Unkg, zie React-voorbeeld). De enkele resterende regels zijn eigenlijk React code.

Definieer eerst de component Watch en de bijbehorende sjabloon. Plaats vervolgens React in de DOM en vraag om een ​​horloge te maken.

Injecteer gegevens in het onderdeel

Ons horloge is behoorlijk dom, het toont de uren en minuten die we eraan hebben gegeven.

Je kunt proberen te spelen en de waarde voor die eigenschappen wijzigen (rekwisieten genoemd in React). Het zal altijd weergeven waar u om vroeg, zelfs als het geen cijfers zijn.

Dit soort React-component met alleen een renderfunctie is een functioneel onderdeel. Ze hebben een kortere syntaxis vergeleken met klassen.

Props zijn alleen gegevens die aan een component worden doorgegeven, meestal door een omringende component. De component gebruikt rekwisieten voor bedrijfslogica en rendering.

Maar zodra rekwisieten niet tot het onderdeel behoren, zijn ze onveranderlijk. Het onderdeel dat de rekwisieten leverde, is dus het enige stuk code dat de rekwisietenwaarden kan bijwerken.

Het gebruik van rekwisieten is vrij eenvoudig. Maak een DOM-knooppunt met uw componentnaam als tagnaam. Geef het dan attributen genoemd naar rekwisieten. Dan zijn de rekwisieten beschikbaar via this.props in de component.

Hoe zit het met niet-geciteerde HTML?

Ik was er zeker van dat je de niet-geciteerde HTML zou opmerken die wordt geretourneerd door de renderfunctie. Deze code gebruikt JSX-taal, het is een korte syntaxis om de HTML-sjabloon in React-componenten te definiëren.

Nu wilt u misschien voorkomen dat JSX de sjabloon van de component definieert. JSX lijkt eigenlijk op syntactische suiker.

Bekijk het volgende fragment dat zowel de syntaxis van JSX als React toont om uw mening te vormen.

Verder gaan met de virtuele DOM

Dit laatste deel is ingewikkelder maar zeer interessant. Het zal u helpen te begrijpen hoe React onder de motorkap werkt.

Bijwerken van elementen op een webpagina (een knooppunt in de DOM-structuur) omvat het gebruik van de DOM API. Het zal de pagina opnieuw schilderen, maar het kan langzaam zijn (zie dit artikel voor waarom).

Veel frameworks zoals React en Vue.js omzeilen dit probleem. Ze komen met een oplossing die de virtuele DOM wordt genoemd.

Het idee is simpel. Het lezen en bijwerken van de DOM-structuur is erg duur. Breng dus zo min mogelijk wijzigingen aan en werk zo min mogelijk knooppunten bij.

Het verminderen van aanroepen naar DOM API houdt in dat DOM-structuurrepresentatie in het geheugen wordt bewaard. Omdat we het hebben over JavaScript-frameworks, lijkt het kiezen van JSON legitiem.

Deze benadering weerspiegelt onmiddellijk veranderingen in de virtuele DOM.

Bovendien verzamelt het een paar updates die later direct op de Real DOM kunnen worden toegepast (om prestatieproblemen te voorkomen).

Herinner je je React.createElement? Eigenlijk creëert deze functie (direct of via JSX genoemd) een nieuw knooppunt in de virtuele DOM.

Om updates toe te passen, speelt de Virtual DOM-kernfunctie een rol, het afstemmingsalgoritme.

Het is zijn taak om de meest geoptimaliseerde oplossing te bedenken om het verschil tussen de vorige en huidige virtuele DOM-status op te lossen.

En pas vervolgens de nieuwe virtuele DOM toe op de echte DOM.

Verdere metingen

Dit artikel gaat ver over de interne en virtuele DOM-uitleg. Toch is het belangrijk om een ​​beetje te weten over hoe een framework werkt wanneer het wordt gebruikt.

Volg mijn leesaanbevelingen als u wilt leren hoe de Virtual DOM in detail werkt. U kunt uw eigen virtuele DOM schrijven en meer leren over DOM-rendering.

Bedankt voor het lezen. Sorry als dit te technisch is voor je eerste stap in React. Maar ik hoop dat je nu weet wat rekwisieten, functionele componenten, JSX en Virtual DOM zijn.

Als u dit artikel nuttig vond, klik dan een paar keer op de -knop om anderen het artikel te laten vinden en uw steun te tonen!

Vergeet niet mij te volgen om op de hoogte te blijven van mijn aankomende artikelen

Dit maakt deel uit van mijn serie 'React voor beginners' over de introductie van React, de belangrijkste functies en best practices die moeten worden gevolgd.
Volgende artikel>

Bekijk mijn andere artikelen

➥ JavaScript

  • Hoe u uw JavaScript-vaardigheden kunt verbeteren door uw eigen framework voor webontwikkeling te schrijven
  • Veel voorkomende fouten die u moet vermijden tijdens het werken met Vue.js

➥ Tips en trucs

  • Stop pijnlijke JavaScript-foutopsporing en omarm Intellij met bronkaart
  • Hoe enorme JavaScript-bundels zonder moeite te verminderen

Oorspronkelijk gepubliceerd op www.linkedin.com op 6 februari 2018.