Что такое React JS?
React JS — это библиотека JavaScript с открытым исходным кодом, разработанная Facebook, которая используется для разработки интерактивных веб-интерфейсов и мобильных пользовательских интерфейсов. React JS связан с компонентами, которые используют выразительность JavaScript с синтаксисом шаблона, подобным HTML. React — это библиотека на основе компонентов, которая используется для разработки интерактивного пользовательского интерфейса, и в настоящее время она является самой популярной библиотекой внешнего интерфейса JavaScript, которая является прочной основой и большим сообществом. React JS в основном представлял собой MVC (Model-View-Controller). Основными аспектами React являются виртуальный DOM, односторонняя привязка и рендеринг на стороне сервера. Виртуальный DOM — это дерево узлов, в котором перечислены элементы, а также их атрибуты и содержимое в виде объектов и их свойств.
Почему React JS?
Основной причиной использования React JS были другие фреймворки, как мы видим на диаграмме, а также данные, получаемые из различных ресурсов, таких как исходные данные, данные в реальном времени, данные пользовательского ввода, которые передаются диспетчеру. Затем диспетчер направляет данные в хранилище, откуда они в конечном итоге поступают в представление. Представление — это та часть, с которой пользователь взаимодействует с приложением. Что бы мы ни видели, браузер как веб-страница сам по себе является представлением. Каждый раз, когда добавляются или обновляются новые данные, браузер перезагружает веб-страницу и повторяет весь процесс снова. Но главным недостатком традиционного потока данных была объектная модель документа. DOM — это объект, созданный браузером. Каждый раз, когда загружается веб-страница, которая может динамически добавлять или удалять данные в бэкэнде. Но каждый раз при любых изменениях новый DOM создавался на той же странице. Повторное создание DOM приводит к ненужной трате памяти и снижению производительности приложения.
Кроме того, манипулирование DOM очень дорого. Поэтому появилась новая технология, которую мы избавляем от этой проблемы. Здесь нам на помощь приходит React JS. С React JS мы можем разделить все наше приложение на различные независимые компоненты. Приложения React JS по-прежнему используют тот же традиционный поток данных, но что-то изменилось на бэкэнде. Каждый раз, когда серверные данные добавляются или обновляются из серверной части, React JS использует новую технику для их доставки. Вместо того, чтобы перезагружать всю страницу, React уничтожает старое представление. После этого он отображает представление с обновлениями новых данных и размещает новое представление вместо старого. Для потери памяти из-за DOM React вводит виртуальный DOM. Виртуальный DOM работает в три простых шага. Начиная с первого шага, всякий раз, когда какие-либо базовые данные изменяются, весь пользовательский интерфейс перерисовывался в виртуальном представлении DOM.
Преимущества React JS?
1. Увеличена производительность приложения.
2. Используется как на стороне клиента, так и на стороне сервера.
3. Повышена читабельность.
4. Легко можно использовать с другими фреймворками.
Особенности React JS?
1. Кривая обучения
У React несложная кривая обучения, и он подходит для начинающих. Синтаксисом ES6 легче управлять, особенно для небольших приложений. В React мы кодируем JavaScript так, как это дает нам свободу выбора вашего инструмента в зависимости от наших потребностей.
2. Производительность
React имеет превосходную скорость рендеринга. Как следует из названия, React мгновенно реагирует на изменения с минимальной задержкой.
3. Размер
React — это не фреймворк, а функции добавляются в соответствии с потребностями пользователей. Это принцип легких приложений, построенных на реакции.
4. Отладка
React использует отладку во время компиляции и обнаруживает ошибки на ранней стадии. Это гарантирует, что ошибки не появятся автоматически во время выполнения. Однонаправленный поток данных Facebook обеспечивает чистую и плавную отладку.
Ключевая терминология
JSX — расширение JavaScript
Этот JSX позволяет нам включать HTML в тот же файл вместе с JavaScript. Каждый компонент в React генерирует некоторый HTML, который отображается виртуальным DOM.
ES6
Шестая версия JavaScript была стандартизирована ECME international в 2015 году. Этот ES6 не полностью поддерживается современными веб-браузерами.
ES5
Пятый JavaScript-фреймворк, ожидаемый всеми современными веб-браузерами. Он был основан на стандартах спецификаций ECME 2009 года. И инструменты используются для преобразования ES6 в ES5 во время выполнения.
Веб-пакет
Это пакет модулей, который генерирует файл сборки со всеми необходимыми зависимостями.
Вавилон
Это инструмент для преобразования ES6 в ES5.
Компоненты
Мы можем разделить наш пользовательский интерфейс на независимые повторно используемые части. Существует два типа компонентов. Это компоненты класса и функциональные компоненты.
Компоненты класса
Класс компонентов с состоянием/контейнером — это стандартный класс ES6, который расширяет класс компонентов библиотеки React. Он называется компонентом с отслеживанием состояния, потому что он управляет изменением состояния и реализацией логики компонента. Кроме того, у них есть доступ ко всем фазам функции жизненного цикла React.
До появления React Hooks компонент класса был единственным способом создания динамического и повторно используемого компонента, поскольку он предоставлял доступ ко всем функциям и методам жизненного цикла React.
Функциональные компоненты
Функции JavaScript используются для создания функциональных компонентов. Поскольку они просто принимали и возвращали данные для рендеринга в DOM до появления хуков в React 16.8, их обычно называли компонентами без сохранения состояния или презентационными компонентами.
Раньше единственным способом получить доступ к дополнительным возможностям React, таким как состояние и функции жизненного цикла React, было использование компонента класса. Хуки, с другой стороны, позволяют вам включать состояние и другие возможности React, а также писать полный пользовательский интерфейс с функциональными компонентами.
Состояние в React
Частные данные вашего компонента называются состоянием. Состояния не распределяются между компонентами. «Состояние» вашего компонента, которое вы можете использовать для рендеринга и изменения данных.
Реквизиты в React
Вам понадобятся компоненты для взаимодействия друг с другом в реальном программировании. Состояния являются частными для компонента, но данные должны передаваться между ними. Здесь в игру вступают реквизиты. Стоит отметить, что props доступны только для чтения.
Список и ключи в React
В компоненте React мы используем список для отображения списка элементов. Задача перечисления пользователей, задач TODO и других объектов довольно распространена. Чтобы просмотреть список и отобразить результаты, мы используем функцию map(). Чтобы указать React на повторный рендеринг, ключи помогают определить, какой элемент из списка изменился. Если вы не укажете ключи для списка, ReactJS уведомит вас об этом.
Заключение
React JS появился как раз вовремя, чтобы помочь разработчикам быстро создавать привлекательные онлайн-приложения и пользовательские интерфейсы. Это позволяет вам разобрать компоненты и создать одностраничное приложение с меньшим количеством кода.
Спасибо за прочтение!
Надеюсь, эта статья была полезной и информативной.
