ReactJS (или же просто React) – это библиотека JavaScript, созданная Джорданом Уолком, инженером Facebook, для быстрого и эффективного создания многофункциональных и полезных веб-приложений с наименьшими временными затратами. Основная цель ReactJS – обеспечить максимально возможную производительность рендеринга. Его сила проистекает из ориентации на отдельные компоненты. Вместо того чтобы работать со всем веб-приложением, ReactJS позволяет разработчику разбивать сложный интерфейс на более простые компоненты.
Вот несколько причин, почему React стал настолько популярным:
- Работать с DOM API сложно. ReactJS в основном дает разработчикам возможность взаимодействовать с виртуальным браузером, который более дружелюбен, чем настоящий браузер. Виртуальный браузер React действует как посредник между разработчиком и реальным браузером;
- ReactJS позволяет разработчикам декларативно описывать свои пользовательские интерфейсы и моделировать их состояние. Это значит, что вместо того, чтобы придумывать шаги для описания транзакций на интерфейсах, разработчики просто описывают интерфейсы в терминах конечного состояния (например, функции). Когда транзакции происходят с этим состоянием, React заботится об обновлении пользовательских интерфейсов на основе этого;
- ReactJS – это просто JavaScript, в который встроен очень маленький API, обладающий всего несколькими функциями и способами их использования. Так что ваши навыки JavaScript сделают из вас по-настоящему хорошего разработчика в React. Тут нет никаких барьеров для входа. Разработчик JavaScript может стать продуктивным разработчиком React за несколько часов.
ReactJS как библиотека
Официальное определение React гласит, что это библиотека JavaScript для создания пользовательских интерфейсов. Важно понимать две разные части этого определения:
- React – это библиотека JavaScript, а не фреймворк. Это не универсальный инструмент, и нам часто нужно использовать больше библиотек с React для формирования какого-либо решения. Он фокусируется только на одной задаче, и еще на том, чтобы делать ее очень хорошо.
- То, что React делает очень хорошо, является его второй частью определения – создание пользовательских интерфейсов. Пользовательский интерфейс – это все, что мы предоставляем пользователям, чтобы они взаимодействовали с машиной. Пользовательские интерфейсы есть везде, от простых кнопок на микроволновой печи до приборной панели космического челнока. Если устройство, которое мы пытаемся подключить, может понимать JavaScript, мы можем использовать React для описания его пользовательского интерфейса.
Поскольку веб-браузеры понимают JavaScript, мы можем использовать React для описания веб-интерфейсов пользователя. Особенно удачным тут является слово «описать», потому что это то, что мы в основном делаем с React, мы просто сообщаем ему, что хотим, и React будет создавать фактические пользовательские интерфейсы от нашего имени в веб-браузере. Без React или подобных библиотек нам бы пришлось вручную создавать пользовательские интерфейсы с помощью собственных веб-API и JavaScript.
Когда вы слышите утверждение «React является декларативным», это именно то, что оно означает: мы описываем пользовательские интерфейсы с помощью React и сообщаем ему, чего мы хотим (а не как это сделать). React позаботится о «как» и переведет наши декларативные описания (которые мы пишем на языке React) в реальные пользовательские интерфейсы в браузере. React разделяет эту простую декларативную силу с самим HTML, но с ReactJS мы получаем декларативное представление для интерфейсов HTML, которые представляют динамические данные, а не только статические.
Основные концепты ReactJS
React имеет три основные концепции дизайна, которые определяют его популярность:
Применение повторно используемых, компонуемых и сохраняющих состояние компонентов
В ReactJS мы описываем пользовательские интерфейсы с использованием компонентов. Вы можете думать о компонентах как о простых функциях (на любом языке программирования). Мы вызываем функции с некоторым вводом, и они дают нам некоторый вывод. Мы можем повторно использовать функции по мере необходимости и составлять более крупные функции из более мелких.
Компоненты представляет собой то же самое; мы называем их ввод «свойствами» и «состоянием», а вывод компонента – это описание пользовательского интерфейса (который похож на HTML для браузеров). Мы можем повторно использовать один компонент в нескольких пользовательских интерфейсах, и компоненты могут содержать другие компоненты.
Однако, в отличие от чистых функций, полный компонент React может иметь частное состояние для хранения данных, которые со временем могут изменяться.
Природа реактивных обновлений
Название React – самое простое объяснение этой концепции. Когда состояние компонента (вход) изменяется, пользовательский интерфейс, который он представляет (выход), также изменяется. Это изменение в описании пользовательского интерфейса должно быть отражено в устройстве, с которым мы работаем.
В браузере нам необходимо восстановить представления HTML в Document Object Model (DOM). С React нам не нужно беспокоиться о том, как отразить эти изменения, и даже не решать, когда вносить изменения в браузер. React будет просто реагировать на изменения состояния и автоматически обновлять DOM при необходимости.
Генерация HTML
С React мы пишем HTML, используя JavaScript. Мы полагаемся на способность JavaScript генерировать HTML, который зависит от определенных данных, вместо того, чтобы улучшать HTML, чтобы он работал с этими данными. Улучшение HTML – это то, что обычно делают другие JavaScript-фреймворки. Например, Angular расширяет HTML такими функциями, как циклы, условные выражения и др.
Когда мы получаем только данные с сервера (в фоновом режиме, с AJAX), нам нужно нечто большее, чем HTML, чтобы работать с этими данными. Так что приходится использовать расширенный HTML, либо мощь самого JavaScript для генерации HTML. Оба подхода имеют свои преимущества и недостатки. ReactJS включает в себя последний, с аргументом, что преимущества сильнее, чем недостатки.
Фактически, есть одно важное преимущество, которое может обосновать этот подход сам по себе. Использование JavaScript для рендеринга HTML позволяет React легко сохранять виртуальное представление HTML в памяти (обычно это называется The Virtual DOM). React использует Virtual DOM для виртуального отображения дерева HTML, а затем, каждый раз, когда изменяется состояние, и мы получаем новое дерево HTML, которое необходимо перенести в DOM браузера. Вместо записи всего нового дерева, React будет записывать только разницу между новым и предыдущим деревом (поскольку в React оба дерева находятся в памяти). Этот процесс известен как Tree Reconciliation, и по мнению многих это лучшее, что произошло в веб-разработке со времен AJAX.
Пример алгоритма согласования ReactJS
Мы начнем этот пример с нуля. Создайте новый каталог и запустите там ваш любимый редактор (можно воспользоваться и онлайн интерактивной средой):
Создайте файл index.html в этом каталоге и поместите туда стандартный шаблон HTML. Добавьте в этот шаблон файл script.js и поместите в него скрипт console.log, чтобы проверить, работает ли:
Откройте файл index.html в своем браузере и убедитесь в наличии пустого шаблона, и в том, что вы можете видеть на вкладке консоли dev-tools тестовое сообщение console.log, которое вы поместили в script.js:
Теперь давайте добавим саму библиотеку React, которую мы можем взять с веб-сайта Reactjs. Скопируйте сценарии реагирования и включите их в index.html:
Мы включили здесь два разных скрипта по важной причине: саму библиотеку React можно использовать без браузера. Чтобы использовать ReactJS с браузером, нам нужна библиотека ReactDOM.
Когда мы обновим браузер сейчас, мы должны увидеть и React, и ReactDOM, доступные в глобальной области видимости:
Благодаря этой простой настройке мы теперь можем получить доступ к API-интерфейсам React и ReactDOM, и, конечно, у нас также есть доступ к собственным веб-API и JavaScript, которые мы собираемся использовать в первую очередь.
Чтобы динамически добавлять HTML в браузер, мы можем просто использовать чистый JavaScript и сам DOM Web API. Давайте создадим элемент div для размещения нашего HTML-контента JavaScript и присвоим ему идентификатор «js». В элементе тела index.html прямо перед тегом script добавьте:
Теперь давайте возьмем этот новый элемент div по его идентификатору и поместим его в константу. Давайте назовем эту константу jsContainer. Мы можем использовать document.getElementById, чтобы извлечь div из HTML:
Чтобы управлять содержимым этого div, мы можем использовать вызов метода setHTML непосредственно для элемента div. Мы можем использовать этот вызов для предоставления любого HTML-шаблона, который мы хотим вставить в DOM. Давайте вставим элемент div с классом «demo» и строкой «Hello JS» в качестве содержимого:
Убедитесь, что все сработало в браузере. Если это так, то вы увидите строку "Hello JS" на экране. Эта демонстрационная версия пока что является нашим пользовательским интерфейсом. Он очень прост и предназначен для просмотра выведенного текста пользователями.
И document.getElementById, и element.innerHTML на самом деле являются частью собственного веб-API DOM. Мы общаемся с браузером, используя поддерживаемые API веб-платформы. Однако когда мы пишем код ReactJS, вместо этого мы используем React API и позволяем React взаимодействовать с браузером с помощью DOM Web API.
Используя виртуальный DOM, React сохраняет последнюю версию DOM в памяти, а когда у него есть новая версия DOM для передачи в браузер, эта новая версия DOM также будет в памяти, поэтому React сможет вычислить разницу между новой и старой версиями.
ReactJS действует как наш посредник для браузера, и нам в основном нужно общаться только с React, а не с самим браузером. В основном потому, что бывают случаи, когда нам все же приходится общаться напрямую с браузером, но они редки.