Pikaopas oppia reagoimaan ja kuinka sen virtuaalinen DOM toimii

Kuva @simonmigaj, Unsplash
Tämä on osa ”React aloittelijoille” -sarjaani, joka käsittelee Reaktia, sen keskeisiä ominaisuuksia ja seuraavia parhaita käytäntöjä. Lisää artikkeleita on tulossa!
Seuraava artikkeli>

Haluatko oppia reagoimaan indeksoimatta dokumentaatiota (muuten hyvin kirjoitettu)? Napsautit oikeaa artikkelia.

Opimme kuinka reagoida yhdellä HTML-tiedostolla ja altistaa itsemme sitten ensimmäiselle katkelmalle.

Loppuun mennessä pystyt selittämään nämä käsitteet: rekvisiitta, toiminnallinen komponentti, JSX ja Virtual DOM.

Tavoitteena on tehdä kello, joka näyttää tuntia ja minuutteja. React tarjoaa arkkitehtuurimme koodille komponenteilla. Luotaan kellokomponentti.

Ohita HTML-käyttötaulun ja komentosarjojen tuonti riippuvuuksien varalta (unpkg: n kanssa, katso React-esimerkki). Harvat jäljellä olevat rivit ovat tosiasiassa React-koodia.

Määritä ensin Watch-komponentti ja sen malli. Asenna sitten React DOM: iin ja pyydä järjestämään kello.

Ruiskuta tiedot komponenttiin

Kellomme on melko tyhmä, se näyttää tunnit ja minuutit, jotka annoimme sille.

Voit yrittää pelata ja muuttaa niiden ominaisuuksien arvoa (joita kutsutaan rekvisiitteiksi Reaktissa). Se näyttää aina kysymäsi, vaikka kyseessä ei olisi numero.

Tällainen React-komponentti, jolla on vain renderöintitoiminto, ovat toiminnallinen komponentti. Heillä on tarkempi syntaksi luokkiin verrattuna.

Rekvisiittitiedot ovat vain komponentille välitettyjä tietoja, yleensä ympäröivän komponentin välityksellä. Komponentti käyttää rekvisiitta liiketoimintalogiikkaan ja renderointiin.

Mutta heti kun rekvisiitta ei kuulu komponenttiin, ne ovat muuttumattomia. Siten komponentti, joka tarjosi rekvisiitta, on ainoa koodi, joka pystyy päivittämään rekvisiitta-arvot.

Rekvisiittien käyttäminen on melko yksinkertaista. Luo DOM-solmu, jonka komponentin nimi on tunnisteen nimi. Anna sille sitten rekvisiittien mukaan nimetyt määritteet. Sitten rekvisiitta on saatavana komponentin this.props-kautta.

Entä noteeraamaton HTML?

Olin varma, että huomaat renderöintitoiminnon palauttaman noteeraamattoman HTML-koodin. Tämä koodi käyttää JSX-kieltä. Se on lyhennelmä syntaksiksi HTML-mallin määrittämiseksi React-komponenteissa.

Nyt voit välttää JSX: n määrittelemästä komponentin mallia. Itse asiassa JSX näyttää syntaktiselta sokerilta.

Katso seuraava katkelma, joka näyttää sekä JSX: n että Reakt-syntaksin rakentaaksesi mielipiteesi.

Mennään pidemmälle virtuaalisen DOM: n kanssa

Tämä viimeinen osa on monimutkaisempi, mutta erittäin mielenkiintoinen. Se auttaa sinua ymmärtämään, kuinka React toimii konepellin alla.

Verkkosivun (DOM-puun solmun) elementtien päivittäminen edellyttää DOM-sovellusliittymän käyttöä. Se maalaa sivun uudelleen, mutta se voi olla hidas (miksi tästä artikkelista).

Monet kehykset, kuten React ja Vue.js, kiertävät tämän ongelman. He keksivät ratkaisun nimeltä Virtual DOM.

Idea on yksinkertainen. DOM-puun lukeminen ja päivittäminen on erittäin kallista. Joten tee niin vähän muutoksia kuin mahdollista ja päivitä mahdollisimman vähän solmuja.

DOM API -puhelujen vähentäminen tarkoittaa DOM-puun esityksen pitämistä muistissa. Koska puhumme JavaScriptin kehyksistä, JSONin valitseminen kuulostaa lailliselta.

Tämä lähestymistapa heijastaa heti muutoksia virtuaalisessa DOM: ssa.

Lisäksi se kerää muutaman päivityksen, joita voidaan käyttää myöhemmin Real DOM -sovelluksessa kerralla (suorituskykyongelmien välttämiseksi).

Muistatko React.createElementin? Oikeastaan ​​tämä toiminto (kutsutaan suoraan tai JSX: n kautta) luo uuden solmun virtuaaliseen DOM: iin.

Päivitysten asentamiseen tulee virtuaali-DOM-ydinominaisuus, täsmäytysalgoritmi.

Sen tehtävänä on löytää optimoitu ratkaisu aikaisemman ja nykyisen virtuaalisen DOM-tilan välisen eron ratkaisemiseksi.

Ja sitten käytä uutta virtuaalista DOM-tiedostoa todelliseen DOM: iin.

Lisälukemat

Tämä artikkeli menee pitkälle Reaktin sisäisten ja virtuaalisten DOM-selitysten kanssa. Silti on tärkeää tietää vähän siitä, kuinka kehys toimii, kun sitä käytetään.

Jos haluat tietää kuinka Virtual DOM toimii yksityiskohtaisesti, noudata lukemissuosituksiani. Voit kirjoittaa oman virtuaalisen DOM: n ja oppia DOM-renderoinnista.

Kiitos, että luit. Anteeksi, jos tämä on liian teknistä ensimmäiselle React-vaiheellesi. Mutta toivon, että nyt tiedät mitä rekvisiitta, toiminnallinen komponentti, JSX ja Virtual DOM ovat.

Jos pidit artikkelista hyödyllisen, napsauta -painiketta muutaman kerran, jotta muut löytävät artikkelin ja näyttääksesi tukeasi!

Älä unohda seurata minua saadaksesi ilmoituksen tulevista artikkeleistani

Tämä on osa ”React aloittelijoille” -sarjaani, joka käsittelee Reaktia, sen keskeisiä ominaisuuksia ja seuraavia parhaita käytäntöjä.
Seuraava artikkeli>

Tutustu muihin artikkeleihini

➥ JavaScript

  • Kuinka parantaa JavaScript-taitojasi kirjoittamalla oma Web-kehityskehys
  • Yleiset virheet, joita vältetään Vue.js: n kanssa työskennellessä

➥ Vinkkejä

  • Lopeta tuskallinen JavaScript-virheenkorjaus ja kiinnitä Intellij lähdekartalla
  • Kuinka vähentää valtavia JavaScript-kimppuja ilman vaivaa

Alun perin julkaistu osoitteessa www.linkedin.com 6. helmikuuta 2018.