Вопросы React Frontend Developer

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

<script src="https://cdn.example.com/library.js"></script>

Пример:

- React обновляет виртуальный DOM.

- Он сравнивает его с предыдущим состоянием.

- Изменяет только те части реального DOM, которые изменились.

Shadow DOM создает изолированное дерево DOM для веб-компонента, которое скрыто от остальной части документа.

Плюсы:

1. • Изолирует стили и разметку.
2. • Упрощает повторное использование.
3. • Инкапсулирует логику.

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

Event delegation — это техника, при которой событие обрабатывается на родительском элементе, а не на конкретных дочерних элементах. Это работает благодаря всплытию событий в JavaScript, когда событие, происходящее на элементе, поднимается по дереву DOM до его предков. Делегирование событий улучшает производительность, так как позволяет минимизировать количество обработчиков на странице, особенно если элементы создаются динамически.

Событие в контексте DOM — это действие, происходящее на веб-странице, например, щелчок мышью или нажатие клавиши. Обработчик события — это функция, которая выполняется, когда это событие происходит. Для обработки события вы можете использовать метод addEventListener(), например:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Кнопка нажата!'); 
});

Этот код вызывает функцию при нажатии на кнопку.

Существует несколько методов для взаимодействия с элементами DOM, включая getElementById(), getElementsByClassName(), getElementsByTagName(), и querySelector(). Например, document.getElementById('myElement') возвращает элемент с указанным идентификатором.

Для работы с классами на элементах DOM используйте методы classList. Вы можете добавлять, удалять и проверять классы с помощью методов add(), remove() и contains(). Например:

const element = document.getElementById('myElement'); element.classList.add('active');

Этот код добавляет класс active к элементу.

Существует несколько методов DOM для поиска элементов на веб-странице. Основные из них: getElementById (для поиска элемента по ID), getElementsByClassName (для поиска элементов по классу), getElementsByTagName (для поиска элементов по тегу) и querySelector/querySelectorAll (для поиска с использованием CSS-селекторов). Эти методы позволяют находить один или несколько элементов и взаимодействовать с ними.

Живая коллекция DOM — это список элементов, который автоматически обновляется при изменении документа. Например, если вы используете методы, такие как getElementsByTagName, любые изменения в соответствующих элементах на странице автоматически отразятся в этой коллекции. Это отличает живые коллекции от статических, которые остаются неизменными после их создания.

Модель документа (DOM) — это представление HTML-документа в виде дерева объектов. Каждая часть документа (теги, атрибуты, текст) представлена как узел в этом дереве, что позволяет разработчикам программно изменять содержимое и структуру страницы с помощью JavaScript. Благодаря DOM можно динамически добавлять, удалять или изменять элементы на веб-странице.