Какво е ReactJS?
ReactJS или React е Javascript библиотека, която се използва за изграждане на потребителски интерфейси (интерфейси), така че React е библиотека, а не рамка. Самият Reactjs е разработен от Facebook (публично издание на 29 май 2013 г.). React е създаден от Jordan Walke, софтуерен инженер във Facebook, който пусна ранен прототип на React, наречен „FaxJS“. React може да се използва и като основа за разработка на уеб или мобилни приложения. Въпреки това, React се занимава само с управление на състоянието и изобразяване на това състояние в DOM, така че изграждането на приложение на React обикновено изисква използването на допълнителни библиотеки за маршрутизиране и определена функционалност от страна на клиента.
Ето нещата, които са важни в реакцията:
1. Компоненти
Може да се каже, че компонентите са много важни в reactjs. Компонентът е концепция за това как всяка част от потребителския интерфейс (изглед) да работи независимо и изолирано от другите части.
Съзнателно или несъзнателно, тези, които често работят с HTML код, винаги отделят части от страниците като заглавка, съдържание и долен колонтитул. Обикновено целта е кодът да не се натрупва на една страница, така че да бъде разделен на по-малки, по-специфични файлове и кодът да може да се поддържа по-лесно, ако се направят подобрения.
СЪВЕТИ: Специално реагира дори на най-малките в дисплея, които се препоръчват да бъдат отделени. този компонент има многократна употреба, което прави ненужно разработчиците да копират една и съща страница или компонент отново и отново.
Ето илюстрация на компонент в reactjs:
2. JSX
JSX е разширение на javascript, което ни позволява да пишем HTML тагове в javascript.
В reactjs отиваме към JSX и може би има малка разлика в него, но за тези, които вече разбират HTML, това няма да изглежда трудно.
3. Виртуален DOM
Ако започнем да се гмурнем дълбоко в React, ще има въпроси за това какво е виртуален DOM? Виртуалният DOM е виртуално представяне на DOM. Тогава защо React използва виртуален DOM? Ето и обяснението:
Първо, JavaScript работи бързо, което кара JavaScript да се чувства бавен, когато обработва DOM. Какво е дом? DOM е представяне на потребителския интерфейс в нашето приложение. Накратко, самият DOM формуляр е дървовидна структура от данни, следователно, ако има промяна или актуализация на dom, това ще бъде бързо. Въпреки това, след промени в dom, елементите, които са променени от родител на дете, ще бъдат повторно изобразени, за да актуализират потребителския интерфейс в нашето приложение. Процесът на повторно изобразяване или повторно рисуване на потребителския интерфейс е това, което го прави бавен. Ето илюстрация от DOM:
Но в React React създава виртуален DOM, за да ускори нещата. React изпълнява всички операции във виртуалния DOM. След като операцията приключи, React записва промените в DOM.
Ето процеса в React, ако даден елемент се промени в DOM:
1. React вече има представяне на DOM във виртуалния DOM.
2. React приема DOM представяне, съдържащо промените.
3. React сравнява разликите между старите и новите представяния.
4. Резултатите от сравнението се въвеждат в опашката.
5. Накрая React ще рендерира отново корекцията в DOM
Аналогията е следната, имам молив и маркер. Когато пиша на хартия с маркер и направя печатна грешка в средата на абзац, тогава трябва да я заменя с нова хартия и да пиша отново от началото. Но ако използвам молив (да кажем, че React използва Virtual DOM), мога да изтрия грешката с гумичка, без да започвам отначало.
4. Състояния и жизнен цикъл
Държавата е произходът на данните. Компонентите в React разбира се се нуждаят от данни (не всички, но средно се нуждаят от данни). Данните могат да идват отвсякъде. Държавата е един такъв източник на данни. В допълнение към данните за състоянието от компонентите могат да идват и от подпори (не свойства).
Има три жизнени цикъла в компонент в React, а именно:
1. Инициализация/монтиране (когато даден компонент е създаден/добавен за първи път в DOM)
2. Актуализиране/изобразяване (когато има промяна на състояние/реклама, която води до промяна в DOM)
3. Демонтиране (когато компонентът е премахнат от DOM)
Във всеки от тези жизнени цикли компонентът react ще изпълнява различни методи/функции, които наричаме методи на жизнения цикъл. Някои методи имат префикси will и did, които показват кога методът ще бъде изпълнен.
Продължете в следващата част....
Справка:
https://reactjs.org/docs/create-a-new-react-app.html