Снова про React. На этот раз вдохновился довольно объёмным курсом от Димыча (IT-KAMASUTRA, "Курс "React JS - путь самурая 1.0", уроки, практика") - он объясняет всё очень подробно и понятно, действительно большой молодец, рекомендую.
React – библиотека для фронтенда, то есть для удобной отрисовки страницы, которая
должна быть видна в браузере. Собственно, пишу только об основных принципах и
ключевых особенностях.
1. React
используется для Single Page Application. «Классический вариант» работы с сайтом предполагает,
что когда нужно показать что-то с данного сайта, браузер посылает запрос на
сервер, и сервер присылает новую страницу. В свою очередь логика Single Page Application предполагает, что практически всё необходимое
загружается в браузер сразу, и при запросах на новый контент уже сам браузер
отрисовывает его, не обращаясь к серверу.
2. Для этого
используется модульность и виртуальный DOM. Если
DOM (Document Object Model) – это модель документа,
то виртуальный DOM – это копия этой модели в памяти React’а. В
соответствии с виртуальным DOM’ом React «собирает»
страницу из компонентов. Если нужно что-то перерисовать, он вносит необходимые
изменения а нужный компонент, реагирует
на изменения – поэтому и «React». В каждом компоненте
есть метод render(), который, собственно, и отрисовывает его. Поэтому
не затрагиваются все остальные элементы страницы, что обеспечивает быструю работу.
3. Сложность
состоит в том, что слои отображения (User Interface (UI) – то, чем и являются
компоненты) и бизнес-логика должны быть разделены. Изменения view предполагают операции с данными, но данные не должны храниться в самих
компонентах – компоненты должны использовать только те данные, которые пришли из слоя бизнес-логики. Следовательно,
их надо как-то передавать из уровня бизнес-логики в UI и обратно.
4. Из уровня бизнес-логики
в UI данные передаются через props’ы – атрибуты компонентов.
Они могут передаваться от родительских компонентов в наследников, в которых они
становятся элементами state – состояния данного компонента.
5. Нюанс состоит
в том, что если нужно передать props’ы на несколько уровней,
то и прописывать их нужно на каждом уровне, что неудобно. Чтобы этого не
делать, используют Context – некоторое хранилище данных. Компонент, в котором он создаётся, помещается
в обёртку Context.Provider, который и передаёт
необходимые props’ы, а остальные помещаются в обёртку Context.Consumer. Что означает, что
они имеют доступ ко всем props’ам, которые предоставляет Context.Provider.
6. Для того,
чтобы передать некоторые данные из UI на уровень бизнес-логики, в тех же props’ах компонентам передаются и необходимые методы. Сами методы прописаны на
уровне бизнес-логики, но передаётся возможность их вызова.
7. На уровне бизнес-логики создают store –
хранилище данных (состояний компонентов). С помощью переданных им методов
компоненты передают туда данные. С помощью переданных компонентам props’ов компоненты перерисовывают себя – это постоянно работающий цикл. Такое «архитектурное
решение» называется Flux. Для его реализации существуют «системы управления состоянием» («state management system»), наиболее известная из них – Redux.
8. В React возможет функциональный и объектно-ориентированный (ООП) подходы. В первом
случае оперируют функциями, во втором – классами. Классы могут содержать и
собственный state – состояние, и собственные функции. Если объект вызывает собственный метод,
используется this. Но если мы передаем метод куда-либо, то контекст
выполнения меняется, тогда this будет указывать на другой объект. Чтобы не
происходило путаницы, метод привязывают к его контексту с помощью метода bind().
9. В Store кроме данных содержатся методы для работы с данными. Обычно их выносят в
общий метод, называемый dispatch(), и передают ему (кроме необходимых данных) объект
action, который имеет определенный тип. В зависимости от
типа dispatch() выполняет нужный функционал. Это сокращает
запись в компонентах (вместо того, чтобы прописывать разные отдельные методы).
Продолжение следует.