React J.S - это интерфейсная библиотека JavaScript с открытым исходным кодом, которая используется для разработки пользовательских интерфейсов или компонентов пользовательского интерфейса. React JS был представлен Facebook в мае 2013 года. Он был открыт в марте 2015 года.

Прежде чем перейти к React JS, давайте поговорим о традиционном потоке данных. Традиционные потоки данных используют DOM (объектную модель документа). DOM - это объект, который создается браузером каждый раз при загрузке веб-страницы. DOM динамически добавляет или удаляет элементы с веб-страницы на бэкэнде. Но каждый раз, когда браузер перезагружается, он должен создавать новый объект DOM. Это приводит к большему потреблению памяти и, в конечном итоге, к снижению производительности.

1. React основан на компонентах

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

2. React использует синтаксис JSX

Не бойтесь, что вам придется изучать новый синтаксис, чтобы использовать React. Вместо этого все стало еще проще. JSX - это синтаксис, которого разработчики ждали годами. Вместо того, чтобы переносить JavaScript в HTML, что всегда было головной болью, JSX переносит HTML прямо в JavaScript. Вместо искусственного разделения технологий путем помещения разметки и логики в отдельные файлы, React использует JSX, чтобы иметь тесно интегрированное пространство как для разметки, так и для логики.

3. React использует модель Virtual DOM

Однако, с другой стороны, React JS использует модель Virtual DOM. Виртуальный DOM работает в 3 простых шага. Во-первых, всякий раз, когда в файле происходят какие-либо изменения данных, весь пользовательский интерфейс (UI) повторно отображается в виртуальной модели DOM. После этого вычисляются различия между предыдущей и текущей DOM. Наконец, изменения отправляются в фактическую модель DOM в виде патча. Затем DOM вносит изменения только в затронутые компоненты. Эта модель относительно использует меньшее потребление памяти и повышает производительность вашего сайта.