Обзор
React является наиболее широко используемой библиотекой в веб-разработке, и многие новые разработчики начинают изучать react каждый день. В этой статье мы рассмотрим некоторые темы, которые должен знать разработчик реакта, и узнаем о потоке реакта.
Что такое React?
React — это библиотека JavaScript, которая используется для создания пользовательских интерфейсов. Сегодня React — самая популярная front-end библиотека для создания пользовательских интерфейсов. Она позволяет нам легко писать более эффективный и качественный код для создания пользовательских интерфейсов, используя декларативный стиль программирования.
Что такое декларативное программирование?
Когда речь идет о программировании, язык может следовать одному из двух стилей программирования — декларативному или императивному.
-
В императивном программировании мы определяем весь поток управления для компилятора, включая точные шаги, которые он должен выполнить, чтобы получить то, что мы хотим получить в качестве конечного результата. Этого стиля мы придерживаемся в Vanilla JavaScript, jQuery и т.д.
-
В декларативном программировании мы только сообщаем компилятору, что мы хотим получить в качестве конечного результата, а компилятор сам определяет свой поток управления и шаги, которые он должен предпринять, чтобы получить конечный результат. Мы используем этот стиль в React, так как в React мы определяем только то, как должен выглядеть пользовательский интерфейс, а не поток управления для компилятора, которому нужно следовать, чтобы пользовательский интерфейс выглядел именно так.
Пример:
Давайте рассмотрим классический пример Брюса Уэйна и его печально известного дворецкого Альфреда, чтобы понять эти стили программирования более полно. Брюс Уэйн — программист, а Альфред — компилятор. Брюс Уэйн голоден и хочет пиццу с ананасами.
В декларативном стиле:
Bruce Wayne: I want a Pizza with pineapple toppings
Alfred: ready with a Pizza with pineapple toppings.
В императивном стиле:
Bruce Wayne:
Go to the kitchen.
Open a shelve.
Get some all-purpose flour.
Get some water.
Get some yeast.
.....
Alfred: ready with a Pizza with pineapple toppings.
Компоненты
В react глобальный пользовательский интерфейс состоит из нескольких более мелких пользовательских интерфейсов, известных как компоненты. Компоненты — это независимые строительные блоки пользовательского интерфейса в react, и причина, по которой мы используем компонентный подход в react, заключается в лучшей управляемости и повторном использовании кода. Например, предположим, что вы создаете веб-приложение, которое имеет 5 различных страниц, содержание каждой страницы будет совершенно разным, но все страницы могут иметь некоторые общие компоненты, например, навигационную панель. Мы можем выбрать один из двух подходов: либо написать код для навигационной панели и вставить его на каждую страницу, и иметь навигационную панель на всех страницах. Это точно никому не повредит, и это также второй более рекомендуемый подход из двух имеющихся. Но все же рекомендуется придерживаться компонентного подхода. Почему? Потому что мы следуем подходу, известному как Don’t Repeat Yourself, или DRY, в программировании. В приведенном выше примере мы не только написали бы один и тот же код пять раз, но и, если бы нам понадобилось внести изменения в navbar, нам пришлось бы вносить изменения на всех страницах. Да, нам пришлось бы вносить одни и те же изменения в пяти разных местах. При втором подходе мы можем создать компонент navbar и разместить его на всех наших страницах, а когда нам нужно внести какие-либо изменения в navbar, мы делаем это в основном блоке кода компонента, и это отражается на всех наших страницах. Звучит гораздо лучше и гораздо менее хлопотно, не так ли?
Состояния и реквизиты
Все компоненты в приложении React имеют две вещи, которые определяют их внешний вид: состояния и реквизиты.
Состояние
Состояние — это встроенный объект React. Каждый компонент в React имеет глобальное состояние, которое является представлением текущего состояния компонента, или данных. Компонент состоит из нескольких состояний, представляющих различные наборы данных. Например, предположим, мы создаем приложение, в котором есть компонент кнопки, эта кнопка используется для переключения действия, и в зависимости от того, включено или выключено переключение, цвет кнопки меняется. Toggle — это, по сути, состояние этого компонента, которое решает, как будет выглядеть кнопка. Это состояние переключения будет доступно как свойство в глобальном состоянии этого компонента.
- Состояния можно изменять, поскольку они возникают внутри самого компонента.
Реквизиты
Реквизиты — это сокращение от свойств. Вы можете думать о них как об аргументах, а о компонентах как о функциях. Реквизиты — это данные, которые есть у компонента верхнего уровня, и они передаются компоненту нижнего уровня, потому что они нужны компоненту нижнего уровня для определенного рендеринга.
- Реквизиты доступны только для чтения. Если вы хотите, чтобы дочерний компонент мог изменять реквизит, вам также придется передать функцию с возможностью изменения реквизита от родительского компонента к дочернему компоненту.
- Реквизиты можно передавать только от компонента верхней иерархии к компоненту нижней иерархии. Под иерархией здесь я подразумеваю уровень, на котором они находятся в DOM-дереве.
JSX
Компоненты в react строятся с использованием JavaScript XML, или JSX. JSX — это синтаксический сахар, который позволяет нам писать код, похожий на HTML в react. Мы пишем код в react с использованием JSX следующим образом.
<div>
<p>This is para text</p>
</div>
Элемент
Элементы в react — это простое объектное представление компонентов или узлов DOM. Элементы в react неизменяемы и после создания не могут быть изменены.
JSX, который мы написали выше, вернет элемент, который будет выглядеть следующим образом.
type: "div";
key: null;
ref: null;
props:
children:
type: "p";
key: null;
ref: null;
props:
children: "This is para text";
Виртуальный DOM и согласование
Виртуальный DOM, или VDOM, — это виртуальное представление реального DOM, или DOM, которое хранится в памяти react’а и синхронизируется с DOM с помощью такой библиотеки, как ReactDOM. DOM обрабатывается браузерами, в то время как VDOM обрабатывается фреймворками и библиотеками, такими как React, Vue, Elm и др. И VDOM, и DOM обычно представлены в виде древовидной структуры, которую вы, вероятно, уже много раз видели.
Зачем нужен VDOM, если у нас есть DOM?
Самый распространенный ответ, который можно найти на этот вопрос, — потому что VDOM быстрее DOM, что не совсем верно. VDOM и DOM — это две разные технологии, которые работают с разными сценариями использования. DOM непосредственно отвечает за то, что вы видите на экране, а VDOM — нет. VDOM — это просто объектное представление DOM. Когда в приложении react происходит изменение, react отражает это изменение на VDOM, который затем сравнивается с более ранним кадром вновь созданного VDOM с помощью алгоритма, называемого diffing, этот алгоритм позволяет react точно знать, какой узел в VDOM изменился. Затем React продолжает изменять только те узлы в DOM, которые были затронуты изменением, и не перерисовывает без необходимости весь DOM. Видите ли, VDOM сам по себе использует DOM для внесения изменений в пользовательский интерфейс, VDOM — это не DOM 2.0. На самом деле, VDOM может считаться более дорогим из-за диффиринга и создания нового VDOM каждый раз, когда что-то меняется. Но VDOM все еще используется, потому что у нас нет возможности заранее знать, какие узлы будут изменены и каким образом, а без знания этого единственным средством было бы пересоздание всего DOM каждый раз, когда что-то меняется, что очень дорого. Весь этот процесс, когда реакция регистрирует изменение, создает новый VDOM, сравнивает его со старой версией VDOM, выясняет, какие узлы нужно заменить на более новые, а затем вносит эти изменения в DOM, называется согласованием. Согласование происходит каждый раз, когда вызывается функция render, а функция render вызывается каждый раз, когда в приложении react регистрируется изменение.
Заключение
Мы подошли к концу, пройдя почти через все темы, которые должен знать новичок. Я бы лично рекомендовал узнать больше о diffing, если это возможно, чтобы иметь лучшее понимание того, что считается изменением в react. Я буду рад услышать отзывы по этому поводу.