Вопросы React Frontend Developer

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

Пример:

document.getElementById("parent").addEventListener("click", (event) => {
	if (event.target.tagName === "BUTTON") {
		console.log(`Нажата кнопка: ${event.target.textContent}`);
	}
});

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

import React, { useRef } from "react";

function App() {
	const inputRef = useRef(null);
	const focusInput = () => {
		inputRef.current.focus();
	};
	return (
		<div>
			<input ref={inputRef} />
			<button onClick={focusInput}>Фокус</button>
		</div>
	);
}

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

Плюсы:

1. Изолирует стили и разметку.

2. Упрощает повторное использование.

3. Инкапсулирует логику.

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

Пример:

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

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

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

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