Вопросы React Frontend Developer

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

Условный рендеринг — это способ отображения элементов в React на основе определенных условий. Это работает так же, как условные операторы в JavaScript. Например, вы можете показать один компонент, если условие истинно, и другой, если условие ложно.

Классовые компоненты используют синтаксис классов и имеют методы для работы с состоянием и жизненными циклами. Функциональные компоненты — это простые функции, которые возвращают JSX. Раньше функциональные компоненты не могли иметь состояния, но с появлением хуков в React они получили эту возможность. Теперь функциональные компоненты чаще используются благодаря более простому синтаксису и гибкости.

Keys — это уникальные идентификаторы, которые React использует для того, чтобы отслеживать элементы при рендеринге списков. Они помогают React эффективно обновлять только те элементы, которые изменились, а не перерендеривать весь список. Ключи должны быть уникальными среди соседних элементов.

Чтобы создать компонент в React, достаточно написать функцию или класс, который возвращает JSX. Функциональные компоненты сейчас являются стандартом, и их можно создавать с помощью простой функции, которая принимает props и возвращает разметку.

"Props" (сокращение от "properties") — это способ передачи данных от одного компонента к другому. Они неизменяемы и позволяют родительским компонентам передавать информацию дочерним компонентам, чтобы настраивать их поведение или внешний вид.

Компоненты в React — это строительные блоки приложения. Каждый компонент представляет собой независимую часть пользовательского интерфейса, которую можно повторно использовать и комбинировать с другими компонентами. Компоненты могут быть либо функциями, либо классами, и они возвращают JSX для отображения.

Prop drilling — это процесс передачи данных от родительского компонента к дочерним через "пропсы", даже если промежуточные компоненты не используют эти данные. Это может усложнить код, особенно при глубокой вложенности компонентов. Проблему prop drilling можно решить, используя такие подходы, как Context API или библиотеки управления состоянием (например, Redux).

 Пример:

function App() {
	return <Parent data="Привет" />;
}
function Parent({ data }) {
	return <Child data={data} />;
}
function Child({ data }) {
	return <Grandchild data={data} />;
}
function Grandchild({ data }) {
	return <h1>{data}</h1>;
}

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

Плюсы:

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

В JavaScript можно создать пользовательское событие с помощью конструктора CustomEvent. Это событие можно инициировать с помощью метода dispatchEvent(). Пользовательские события полезны, когда нужно сигнализировать о каком-то действии или изменении состояния, которое не связано с встроенными событиями браузера.