Вопросы 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('Кнопка нажата!'); 
});

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