Эта статья идеально подходит для разработчиков-новичков, которые сделали первые шаги в React. Если вы написали несколько строк кода и понимаете, как работает React на практике, но хотите глубже погрузиться в механику за кулисами, это место для вас.
Свежее утро вторника, и вы вооружены своей любимой чашкой кофе и готовы заняться повседневными делами. Пока вы погружаетесь в свои электронные письма, вашего внимания ждет новый тикет. Запрос, казалось бы, простой: «Реализуйте эпическое всплывающее окно».
С React в качестве вашего надежного компаньона вам не привыкать создавать гладкие интерфейсы с использованием хуков и управления состоянием. Но задумывались ли вы когда-нибудь, что на самом деле происходит за этими хуками и изменениями состояния? Вы собираетесь заглянуть в запутанный лабиринт, который находится под ним, и понять, как этот, казалось бы, простой всплывающий запрос проходит через лабиринтные коридоры сети к браузеру пользователя.
Итак, пристегнитесь, пока мы разгадываем загадку секретов React, преодолевая разрыв между вашим опытом кодирования и сложной механикой, управляющей пользовательским интерфейсом.
Пример всплывающего компонента:
import React, { useState } from 'react'
function PopupComponent({ fruit }) {
const [isPopupOpen, setPopupOpen] = useState(false)
const handleDeleteClick = () => {
// Delete logic
setPopupOpen(false)
}
return (
<div>
<button onClick={() => setPopupOpen(true)}>Delete {fruit}</button>
{isPopupOpen && (
<div className="popup">
<h1>Delete confirmation</h1>
<p>{`Are you sure you want to delete the fruit '${fruit}?'`}</p>
<button onClick={() => setPopupOpen(false)}>Cancel</button>
<button onClick={handleDeleteClick}>Delete</button>
</div>
)}
</div>
)
}
export default PopupComponent
Вы знаете, что такое Реакт?
Конечно, вы много раз сталкивались с этим вопросом — библиотека или фреймворк JavaScript, помогающие создавать пользовательские интерфейсы. Но давайте углубимся в его технические возможности. Он работает с виртуальным представлением реальной объектной модели документа (DOM), которая является структурой веб-страницы. Этот виртуальный DOM действует как облегченная копия, позволяя React эффективно отслеживать изменения и обновлять только необходимые части фактического DOM, сводя к минимуму потери производительности. Это означает, что при изменении данных в вашем приложении React разумно вычисляет, какие части пользовательского интерфейса нуждаются в обновлении, и оптимизирует процесс рендеринга. Это именно то, что вам нужно для вашего нового билета запроса функции, но как это работает? Давайте погрузимся в процесс.
Но… как?
Ядро React поддерживает внутреннюю структуру данных для отслеживания экземпляров компонентов и связанных с ними состояний. Когда вы создаете компонент с состоянием, используя компонент класса или хук useState, React инициализирует это состояние и связывает его с экземпляром компонента.
Всякий раз, когда функция render вызывается в React, она запускает механизм обнаружения изменений. Этот процесс можно разбить на несколько основных этапов:
- Создание виртуального DOM: каждый раз, когда вызывается функция
render(), React создает виртуальный объект DOM на основе кода JSX. Этот виртуальный DOM действует как облегченное представление JavaScript реального DOM, содержащее структуры данных и информацию о компоненте. - Сравнение виртуальных DOM: при каждом вызове
render()создается новый виртуальный DOM. Эта новая виртуальная модель DOM сравнивается с предыдущей версией виртуальной модели DOM с помощью метода, известного как алгоритм сравнения. - Эффективность алгоритма сравнения. Алгоритм сравнения работает для выявления изменений между двумя версиями Virtual DOM с использованием наименьшего количества возможных шагов. Этот подход обеспечивает оптимальную эффективность с временной сложностью O(n), что делает процесс быстрым и эффективным с точки зрения ресурсов. Алгоритм вычисляет минимально необходимые изменения для обновления реального DOM.
- Создание и применение исправления. Обнаруженные изменения алгоритма сравнения приводят к набору обновлений, известному как «исправление». Затем этот патч планируется применить к фактическому DOM, отражая изменения, указанные при сравнении Virtual DOM.
- Согласование — алгоритм сравнения React. В React концепция алгоритма сравнения называется «согласованием». Вы можете углубиться в эту концепцию, чтобы понять ее тонкости и принципы.
- Выборочное рассмотрение компонентов: React фокусирует свое внимание на компонентах, которые зависят от реквизитов или изменений состояния. Это означает, что для обновлений рассматриваются только компоненты, затронутые модификацией данных, что оптимизирует процесс рендеринга.
- Пакетные запросы CD. Поскольку React обновляет реальный DOM, любые возникающие новые запросы обнаружения изменений группируются вместе. Эти запросы в очереди обрабатываются только после завершения текущего цикла обновления DOM. Такой пакетный подход обеспечивает эффективное управление изменениями и обновлениями.
За кулисами происходит много сложных процессов, но давайте пока не будем вдаваться в подробности; Вы получите повесить его.
Что будет дальше: от кода к готовому к производству JavaScript
Представьте, что вы усердно написали свой код React, тщательно рассмотрели проблемы и создали запрос на вытягивание, который изящно вливается в основную кодовую базу. Как только ваш вклад будет принят, заработает конвейер непрерывной интеграции и непрерывной доставки (CI/CD). Этот конвейер организует последовательность автоматизированных задач для преобразования вашего кода в готовый к работе javascript.
Транспиляция: код JSX преобразуется в код JavaScript с помощью таких инструментов, как Babel. Элементы JSX преобразуются в вызовы функций, например React.createElement(), что делает код понятным для всех браузеров.
Объединение. Сборщик, такой как Webpack, собирает различные файлы кода, включая зависимости, и объединяет их в один или несколько оптимизированных выходных файлов, часто включая минимизацию для повышения производительности.
В рамках процесса преобразования ваш код JavaScript минимизируется, и этот процесс удаляет ненужные пробелы, комментарии и любой избыточный код. Эта минимизация значительно уменьшает размер файла, оптимизируя время загрузки для конечных пользователей. В результате получается компактный, эффективный и высокооптимизированный файл JavaScript, готовый для загрузки в браузеры.
Доставка в браузер: последний акт
Именно здесь на сцену выходит веб-хостинг или файловый сервер, выступающий в качестве платформы, которая доставляет ваше приложение в браузеры пользователей.
Когда браузер запрашивает ваше приложение, хост или файловый сервер начинают действовать. Он извлекает минимизированный пакет JavaScript вместе с любыми другими активами, такими как файлы CSS, изображения и шрифты, которые требуются вашему приложению. Эти ресурсы также можно кэшировать и распределять по сетям доставки контента (CDN) или пограничным серверам для обеспечения оптимальной скорости доставки.
Как только активы вашего приложения достигают браузера пользователя, волшебство продолжается. Браузер загружает уменьшенный файл JavaScript и начинает его интерпретировать. Преобразованный код JavaScript, благодаря более раннему вмешательству Babel, теперь имеет формат, хорошо понятный широкому кругу браузеров, включая те, которые могут не поддерживать последние функции JavaScript.
Теперь, когда код вашего приложения выполняется в браузере, пользователь увидит интерактивное чудо, которое вы создали.
Когда пользователь нажимает кнопку удаления, это вызывает изменение внутреннего состояния компонента. React, работающий сейчас в своей оптимизированной, чистой форме JavaScript, умеет распознавать эти изменения. Это позволяет React легко вызывать диалоговое окно, которое вы создали, почти как по волшебству.
Я надеюсь, что это путешествие внесло ясность во внутреннюю работу React. По мере того, как вы продолжаете свои начинания в области веб-разработки, пусть полученные идеи помогут вам создавать еще более удивительные цифровые впечатления. Спасибо, что нашли время, чтобы исследовать и учиться!
Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.
Некоторая полезная ссылка, если вы хотите копнуть глубже:
