Вам должно быть интересно, что такое реакция. Сначала я тоже был шокирован тем, что существует JavaScript-фреймворк под названием react.

Что такое Реакт JS?

Facebook и Instagram создали и управляют этим веб-сайтом.
React — это библиотека JavaScript для разработки пользовательских интерфейсов.
Служит примером архитектуры MVC. Подходит для крупных веб-приложений, которым требуются данные и которые со временем изменяются без обновления всей страницы. React Native создает мобильные приложения для многих платформ, тогда как React VR используется для создания приложений виртуальной реальности. Он нацелен на скорость, простоту и масштабируемость.

Особенности Реакта

Односторонний поток данных

◉ Единый источник достоверной информации — данные всегда хранятся в одном месте и никогда не рассредоточиваются.

◉ Информация не может быть изменена.

◉ Данные передаются от родительского к дочерним компонентам.

◉ Действия передаются от дочерних компонентов к родительским компонентам.

Виртуальный дом

Манипуляции с DOM обходятся дороже. вместо React он создает виртуальное DOM-дерево, сравнивает его с реальным рабочим деревом и обновляет только то, что изменилось.

JSX

HTML/XML-подобный синтаксис используется в языке React JS для определения пользовательских интерфейсов.
Поскольку он преобразует выражения в строки, он позволяет избежать угроз межсайтового скриптинга.

Реквизит и состояние

◉ Реквизиты в основном используются для передачи данных из компонента-контейнера в другие дочерние компоненты. Их реквизит можно только прочитать.

◉ Состояния используются для хранения данных, которые могут быть изменены, а не в качестве реквизита; они доступны для чтения и записи.

◉ Для обновления состояния мы используем функцию useState().

◉ Функция setState() является асинхронной, и если кому-то нужно получить доступ к состоянию и пропсам внутри метода setState(), они выполняют следующее:

setState((состояние,реквизит)=>{})

Жизненный цикл компонента

компоненты реакции происходят от родительского класса react.component и наследуют набор методов жизненного цикла реакции.

◉ Состояние рендеринга и фиксации

◉ Регулируемые и неконтролируемые компоненты

◉ Управление побочными эффектами

Методы, которые вызываются на разных этапах существования компонента React, описывают его жизненный цикл. Предпосылка проста, но каковы различные стадии развития? Ниже приведены четыре этапа существования React Component:

Инициализация. На данном этапе компонент создается с использованием указанных реквизитов и его состояния по умолчанию. Этот код используется в конструкторе класса компонентов.

Монтирование: на этом этапе выполняется рендеринг JSX, и результат передается через функцию рендеринга.

Обновление. Происходит при изменении состояния компонента и перерисовке интерфейса.

Размонтирование. Компонент удаляется со страницы на этом этапе жизненного цикла, как следует из названия.

Рендеринг

Когда свойства (реквизиты) элемента изменяются или состояние (как набор реквизитов) компонента изменяется в приложении, на экране пользователя обновляется только соответствующая информация. Из-за стратегии рендеринга мы можем не обновлять всю веб-страницу, экономя время и повышая производительность.

Контекстный API

Context API — это относительно новый API, и его основная цель — предотвратить предоставление реквизитов на нескольких уровнях. React определяет это использование как данные контекстного уровня, такие как аутентификация и темы.

Контекстный API не следует использовать для сохранения состояния. Контролировать и отображать контекстный API сложно.

Крючки

Хуки — важная функция в React JS, и нам нужно использовать хуки для обработки данных в функциональных компонентах. Крючки — это совершенно новая концепция. Это метод введения состояния и некоторых жизненных циклов в функциональные компоненты. Эта функция обычно используется для улучшения работы функциональных компонентов. Хуки следует использовать исключительно в функциональных компонентах React и в кастомных хуках верхнего уровня.

Есть 2 основных типа крючков:

  • useState()
  • использовать эффект()

другие и т. д. useContext(), usereducer()

Вавилон

Наиболее широко используемый транспилятор JavaScript.
Преобразование функций JavaScript es6 и более поздних версий в самую последнюю совместимую версию.

Полифилы Babel могут поддерживать новые глобальные объекты. Он использует полифиллы core-js.

Совместимость Babel с новыми функциями была одной из лучших на сегодняшний день.
Отладка включается с использованием исходных карт.

Встроена оптимизация кода.
Поддерживаются JSX (XML-подобное расширение синтаксиса) и FLOW (статическая проверка типов).

  • JSX — XML-подобное расширение синтаксиса.
  • FLOW — средство проверки статического типа.

Вебпак

Webpack — самый известный сборщик модулей, который помогает в разработке систем, а также в объединении модулей. Он разделяет код для нескольких файлов в webpack, а webpack поддерживает commons и AMD.

Загрузчики (перенос, преобразование CSS, оптимизация изображений) могут использоваться для расширения Webpack, а Webpack также позволяет оптимизировать производство (модификация, сокращение)

◉ Конфигурация проста: -

Вход -> загрузчики -> плагины -> вывод

Посылка

Пакет — это самый быстрый сборщик модулей, и он является новым для сообщества. Сюда входят преобразования конфигурации. Parcel поддерживает JSX, SCSS, LESS, SVG, typescript и другие языки.

В пакет также входят плагины для расширений, которые определяются автоматически.

Спасибо, что прочитали мой пост в блоге. Надеюсь, у вас есть представление о том, что такое реакция и что она может сделать. Не стесняйтесь комментировать ваши предложения ниже. Играть, чтобы реагировать, весело.