Trumpas vadovas, skirtas išmokti reaguoti ir kaip veikia jo virtualus DOM

@Simonmigaj nuotrauka iš „Unsplash“
Tai yra mano serijos „React pradedantiesiems“, kurioje pristatoma „React“, jos pagrindinės savybės ir geriausia praktika, dalis. Ateina daugiau straipsnių!
Kitas straipsnis>

Ar norite išmokti reaguoti, nesižvalgydami į dokumentus (beje, gerai parašytus)? Spustelėjote reikiamą straipsnį.

Mes išmoksime, kaip paleisti „React“ naudojant vieną HTML failą, o tada pateiksime pirmąjį fragmentą.

Pabaigoje galėsite paaiškinti šias sąvokas: rekvizitai, funkcinis komponentas, JSX ir virtualus DOM.

Tikslas yra padaryti laikrodį, kuriame būtų rodomos valandos ir minutės. „React“ siūlo suprojektuoti mūsų kodą su komponentais. Sukurkime mūsų laikrodžio komponentą.

Nepaisykite HTML katilinės ir scenarijų importo dėl priklausomybių (su unpkg žr. „React“ pavyzdį). Kelios likusios eilutės iš tikrųjų yra „React“ kodas.

Pirmiausia apibrėžkite „Watch“ komponentą ir jo šabloną. Tada įjunkite React į DOM ir paprašykite parūpinti laikrodį.

Įpuršk duomenis į komponentą

Mūsų laikrodis yra gana kvailas, jame rodomos valandos ir minutės, kurias mes jam pateikėme.

Galite pabandyti žaisti ir pakeisti šių savybių (vadinamų rekvizitais „React“) vertę. Visada bus rodoma tai, ko paprašėte, net jei tai nėra skaičiai.

Šis „React“ komponentas, turintis tik pateikimo funkciją, yra funkcinis komponentas. Jie turi glaudesnę sintaksę, palyginti su klasėmis.

Rekvizitai yra tik komponentų perduodami duomenys, paprastai juos supančio komponento. Komponentas naudoja rekvizitus verslo logikai ir perteikimui.

Bet kai tik rekvizitai nepriklauso komponentui, jie yra nekintami. Taigi komponentas, pateikęs rekvizitus, yra vienintelis kodas, galintis atnaujinti rekvizitų vertes.

Naudoti rekvizitus yra gana paprasta. Sukurkite DOM mazgą su komponento pavadinimu kaip žymos pavadinimu. Tada duokite atributus, pavadintus rekvizitais. Tada rekvizitai bus prieinami per komponentą this.props.

O kaip nekotiruojamas HTML?

Aš buvau tikras, kad pastebėsite nekotiruojamą HTML, kurį grąžino „renderfunction“. Šis kodas naudoja JSX kalbą. Tai yra sutrumpinta sintaksė HTML šablonui apibrėžti „React“ komponentuose.

Dabar galite vengti JSX apibrėžti komponento šabloną. Tiesą sakant, JSX atrodo kaip sintaksinis cukrus.

Pažvelkite į šį fragmentą, kuriame rodoma ir „JSX“, ir „React“ sintaksė, kad susidarytumėte savo nuomonę.

Einame toliau su virtualiu DOM

Ši paskutinė dalis yra sudėtingesnė, bet labai įdomi. Tai padės suprasti, kaip „React“ dirba po gaubtu.

Norint atnaujinti tinklalapio elementus (mazgas DOM medyje), reikia naudoti DOM API. Jis perdažys puslapį, bet gali būti lėtas (kodėl reikia sužinoti šiame straipsnyje).

Daug problemų, tokių kaip „React“ ir „Vue.js“, išsprendžia ši problema. Jie sugalvoja sprendimą, vadinamą virtualiu DOM.

Idėja paprasta. DOM medžio skaitymas ir atnaujinimas yra labai brangus. Taigi atlikite kuo mažiau pakeitimų ir atnaujinkite kuo mažiau mazgų.

Sumažinus skambučius į DOM API, DOM medžio vaizdai turi būti saugomi atmintyje. Kadangi mes kalbame apie „JavaScript“ sistemas, JSON pasirinkimas yra teisėtas.

Šis požiūris iškart atspindi pokyčius virtualiame DOM.

Be to, joje yra keletas atnaujinimų, kad būtų galima iškart pritaikyti „Real DOM“ (kad būtų išvengta veikimo problemų).

Ar prisimeni „React.createElement“? Tiesą sakant, ši funkcija (vadinama tiesiogiai arba per JSX) sukuria naują mazgą virtualiame DOM.

Norint pritaikyti atnaujinimus, pradedama naudoti pagrindinė „Virtual DOM“ funkcija, suderinimo algoritmas.

Jos užduotis yra surasti optimaliausią sprendimą, kaip išspręsti skirtumą tarp ankstesnės ir dabartinės Virtualios DOM būsenos.

Ir tada pritaikykite naująjį virtualų DOM tikrajam DOM.

Tolesni skaitymai

Šiame straipsnyje pateikiami „React“ vidinių ir virtualių DOM paaiškinimai. Vis dėlto svarbu šiek tiek žinoti apie tai, kaip sistema veikia ją naudojant.

Jei norite sužinoti daugiau apie tai, kaip veikia virtualus DOM, vykdykite mano skaitymo rekomendacijas. Galite parašyti savo virtualų DOM ir sužinoti apie DOM perteikimą.

Ačiū, kad skaitėte. Atsiprašome, jei tai yra per daug techninis jūsų pirmas žingsnis į „React“. Bet tikiuosi, kad dabar jūs žinote, kas yra rekvizitai, funkcinis komponentas, JSX ir virtualus DOM.

Jei jums pasirodė šis straipsnis naudingas, keletą kartų spustelėkite mygtuką , kad kiti rastų straipsnį ir parodytų jūsų palaikymą!

Nepamirškite manęs sekti, jei norite gauti pranešimą apie mano būsimus straipsnius

Tai yra mano serijos „React pradedantiesiems“, kurioje pristatoma „React“, jos pagrindinės savybės ir geriausia praktika, dalis.
Kitas straipsnis>

Peržiūrėkite mano kitus straipsnius

➥ „JavaScript“

  • Kaip patobulinti „JavaScript“ įgūdžius, surašant savo interneto plėtros sistemą Framework
  • Dažnos klaidos, kurių reikia vengti dirbant su Vue.js

➥ Patarimai ir gudrybės

  • Sustabdykite skausmingą „JavaScript“ derinimo procesą ir įsidėkite „Intellij“ naudodami šaltinio žemėlapį
  • Kaip be didelių pastangų sumažinti didžiulius "JavaScript" paketus

Iš pradžių paskelbta www.linkedin.com 2018 m. Vasario 6 d.