Бързо ръководство за научаване на React и как работи виртуалният DOM

Снимка от @simonmigaj от Unsplash
Това е част от моята поредица „Реакция за начинаещи“ относно представянето на React, основните му характеристики и най-добрите практики, които трябва да следвате. Идват още статии!
Следваща статия>

Искате ли да научите React, без да обхождате документацията (добре написана между другото)? Кликнахте върху правилната статия.

Ще научим как да стартираме React с един HTML файл и след това да се изложим на първи фрагмент.

До края ще можете да обясните тези понятия: реквизит, функционален компонент, JSX и Virtual DOM.

Целта е да се направи часовник, който да показва часове и минути. React предлага да проектираме нашия код с компоненти. Нека създадем нашия часовник компонент.

Игнорирайте импортиране на HTML котлони и скриптове за зависимости (с unpkg, вижте Реагиращ пример). Няколко останали реда всъщност са React код.

Първо определете компонента Watch и неговия шаблон. След това монтирайте React в DOM и помолете да изобразите часовник.

Инжектирайте данни в компонента

Часовникът ни е доста глупав, той показва часовете и минутите, които сме му предоставили.

Можете да опитате да играете наоколо и да промените стойността за тези свойства (наречени подпори в React). Той винаги ще показва това, което сте поискали, дори и да не са числа.

Този вид React компонент само с функция за изобразяване е функционален компонент. Те имат по-сбит синтаксис в сравнение с класовете.

Реквизитите са само данни, предадени на компонент, обикновено от заобикалящ компонент. Компонентът използва реквизит за бизнес логика и изобразяване.

Но щом реквизитите не принадлежат към компонента, те са неизменни. По този начин компонентът, предоставил реквизита, е единственото парче код, което може да актуализира стойностите на подпори.

Използването на подпори е доста просто. Създайте DOM възел с името на вашия компонент като име на маркер. След това му дайте атрибути, наречени на реквизит. Тогава реквизитите ще бъдат достъпни чрез this.props в компонента.

Какво ще кажете за котиран HTML?

Сигурен бях, че ще забележите нецитирания HTML, върнат от рендерфункцията. Този код използва JSX език, това е синтаксис за стенограми за определяне на HTML шаблон в React компоненти.

Сега може да искате да избегнете JSX, за да определите шаблона на компонента. Всъщност JSX изглежда като синтактична захар.

Обърнете внимание на следния фрагмент, който показва както JSX, така и React синтаксис, за да изградите вашето мнение.

Продължаване с Виртуалния DOM

Последната част е по-сложна, но много интересна. Ще ви помогне да разберете как работи React под капака.

Актуализирането на елементи на уеб страница (възел в DOM дървото) включва използване на DOM API. Той ще пребоядисва страницата, но може да е бавен (вижте тази статия за защо).

Много рамки като React и Vue.js заобикалят този проблем. Те предлагат решение, наречено Virtual DOM.

Идеята е проста. Четенето и актуализирането на DOM дървото е много скъпо. Затова направете възможно най-малко промени и актуализирайте възможно най-малко възли.

Намаляването на обажданията към DOM API включва запазване на DOM-представянето на дърво в паметта. Тъй като говорим за рамки на JavaScript, изборът на JSON звучи законно.

Този подход веднага отразява промените във виртуалния DOM.

Освен това той събира няколко актуализации, които да се прилагат по-късно върху Real DOM наведнъж (за да се избегнат проблеми с производителността).

Спомняте ли си React.createElement? Всъщност тази функция (наречена директно или чрез JSX) създава нов възел във виртуалния DOM.

За да приложите актуализации, основната функция на Virtual DOM влиза в игра, алгоритъма за съгласуване.

Нейната задача е да излезе с най-оптимизираното решение за разрешаване на разликата между предишно и текущо състояние на Virtual DOM.

И след това приложете новия виртуален DOM към реалния DOM.

Допълнителни четения

Тази статия стига далеч до вътрешните и виртуалните DOM обяснения. Все пак е важно да знаете малко за това как работи рамката, когато я използвате.

Ако искате да научите как виртуалният DOM работи подробно, следвайте моите препоръки за четене. Можете да напишете свой собствен виртуален DOM и да научите за рендерирането на DOM.

Благодаря ви за четенето. Съжаляваме, ако това е твърде технически за първата ви стъпка в React. Но се надявам сега да сте наясно какво представляват реквизитите, функционалният компонент, JSX и Virtual DOM.

Ако сте намерили тази статия за полезна, моля кликнете върху бутона няколко пъти, за да накарате другите да намерят статията и да покажат вашата подкрепа!

Не забравяйте да ме последвате, за да получавате известия за предстоящите ми статии

Това е част от моята поредица „Реакция за начинаещи“ относно представянето на React, основните му характеристики и най-добрите практики, които трябва да следвате.
Следваща статия>

Разгледайте и другите ми статии

➥ JavaScript

  • Как да подобрим вашите JavaScript умения, като напишете собствена рамка за уеб разработка
  • Чести грешки, които трябва да се избягват при работа с Vue.js

➥ Съвети и трикове

  • Спрете болезненото отстраняване на грешки в JavaScript и прегърнете Intellij с Source Map
  • Как да намалим огромни JavaScript пакети без усилие

Първоначално публикувано на www.linkedin.com на 6 февруари 2018 г.