React - одна из самых популярных библиотек JavaScript. Многие стартапы и крупные корпорации выбирают React для создания быстрых интерфейсных приложений для своих проектов. На сегодняшний день React загружается более 8 миллионов раз в неделю. Но что делает React таким популярным? Как это вообще работает?

В этом блоге мы рассмотрим, как работает React изнутри, и каковы его основные особенности, которые привели к его широкому признанию в сообществе разработчиков.

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

Настоящий ДОМ

Мы знаем, что когда наша веб-страница загружается в браузере, она создает D объект O объект M объект (DOM) страницы. Этот DOM построен в виде дерева объектов. Он действует как интерфейс (API) для изменения содержащихся в нем узлов (элементов HTML). DOM предоставляет различные методы, такие как getElementById или querySelector, для нацеливания на каждый узел, и мы используем JS для внесения изменений в DOM. Но манипуляции с DOM происходят медленно.

Что замедляет манипуляции с DOM?

Поскольку DOM представлена ​​в виде древовидной структуры, изменения в DOM происходят довольно быстро, но измененный элемент и его дочерние элементы должны пройти этап Reflow / Layout, а затем изменения должны быть Перекрашены, которые идут медленно. Повторное рисование или повторный рендеринг пользовательского интерфейса - вот что делает его медленным. Следовательно, чем больше элементов нужно переформатировать / перерисовать, тем медленнее становится ваше приложение. Это означает, что для хорошей производительности мы должны избегать касания DOM, насколько это возможно, и должны вносить изменения в DOM только тогда, когда мы абсолютно уверены, что это минимальный план действий.

Использование виртуального DOM - быстрая альтернатива

React использует нечто, известное как Virtual DOM, чтобы преодолеть проблему медленных манипуляций с DOM. Виртуальный объект DOM на самом деле имеет те же свойства, что и реальный объект DOM, но, в отличие от Real DOM, он не влияет напрямую ни на что на экране. Это означает, что виртуальный DOM - это просто план или виртуальное представление реального DOM, и он не имеет отношения к повторному рендерингу пользовательского интерфейса. Это позволяет вносить изменения в виртуальную DOM намного быстрее, чем в реальную DOM.

Виртуальный DOM в React

В React каждый элемент пользовательского интерфейса является компонентом, и каждый компонент имеет состояние. Состояние компонента - это, по сути, объект, который содержит некоторую информацию, которая может изменяться за время жизни компонента. Когда состояние компонента изменяется, React обновляет виртуальное дерево DOM. После обновления виртуальной DOM React сравнивает текущую обновленную версию виртуальной DOM с предыдущей версией виртуальной DOM. Этот процесс называется «дифференцированием». Определив, какие объекты необходимо изменить, виртуальная модель DOM вычисляет наилучший из возможных методов внесения этих изменений в реальную модель DOM. Это гарантирует минимальное количество операций с реальной DOM. Для дальнейшего повышения производительности React использует механизм пакетного обновления для обновления реальной DOM. По сути, это означает, что обновления реальной модели DOM отправляются пакетами, а не для каждого отдельного изменения состояния.

Зеленые кружки представляют собой узлы, состояние которых изменилось. Вычисляется разница между предыдущей версией виртуального дерева DOM и текущим виртуальным деревом DOM. Затем все родительское поддерево повторно визуализируется для получения обновленного пользовательского интерфейса. Это обновленное дерево затем пакетно обновляется до реальной DOM.

Создание элементов в React с использованием JSX

JavaScript XML или JSX - это расширение синтаксиса языка JavaScript, которое позволяет нам писать элементы HTML в JavaScript и размещать их в DOM без прямого вызова каких-либо методов createElement () или appendChild (). JSX преобразует теги HTML в элементы react. По сути, JSX просто предоставляет синтаксический сахар для функции React.createElement(component, props, ...children). Например, приведенный ниже код JSX

<h1 className="title">
    Hello World
</h1>

компилируется в:

React.createElement(
 "h1",
 { className: "title" },
 "Hello World");

Первая часть тега JSX определяет тип элемента React. Использование JSX не обязательно, но очень предпочтительно, поскольку делает код простым и элегантным. Без JSX написание кода становится громоздким, если у нас есть компоненты с вложенными дочерними элементами. В примере ниже показан код с JSX:

<div className="wrapper">
      <h1 className="title">Title</h1>
      <h2 className="h2">Sub Heading</h2>
    </div>)

и без JSX:

React.createElement(
          "div", { className: "wrapper" },
          React.createElement("h1", { className: "title" },"Title"),
          React.createElement("h2", { className: "h2" }, "Sub Heading")
     );

Таким образом, JSX помогает вам превратить чистоту HTML в мощь JavaScript и значительно упрощает создание новых элементов HTML.

Рендеринг нашего приложения React

Теперь к заключительной части: как все это сочетается? Как React отображает ваши компоненты в браузере? Это делается с помощью ReactDOM. ReactDOM рекурсивно создает узлы в зависимости от их свойства «type» и, наконец, добавляет их в DOM. Он получает два аргумента: первый - то, что нужно добавить, а второй - куда добавлять.

Если вы используете приложение create-response-app, вы должны были найти файл index.html в общей папке и файл index.js в папке src. React нужен только один фактический div, созданный в файле HTML, чтобы он мог нацелить этот div и прикрепить к нему свое полное дерево узлов. Это реализуется путем передачи родительского компонента Root в качестве первого аргумента и идентификатора отдельного элемента div (обычно id = ”root”), присутствующего в файле index.html, в функцию ReactDOM.render ().

Заключение

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

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

Свяжитесь со мной здесь в Linkedin.