Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Что такое prop drilling?
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? Какие преимущества он дает для разработки веб-компонентов?
Shadow DOM создает изолированное дерево DOM для веб-компонента, которое скрыто от остальной части документа.
Плюсы:
Изолирует стили и разметку.
Упрощает повторное использование.
Инкапсулирует логику.
Объясните концепцию компонентов в React
Компоненты в React — это строительные блоки приложения. Каждый компонент представляет собой независимую часть пользовательского интерфейса, которую можно повторно использовать и комбинировать с другими компонентами. Компоненты могут быть либо функциями, либо классами, и они возвращают JSX для отображения.
Можете объяснить концепцию "props" в React?
"Props" (сокращение от "properties") — это способ передачи данных от одного компонента к другому. Они неизменяемы и позволяют родительским компонентам передавать информацию дочерним компонентам, чтобы настраивать их поведение или внешний вид.
Как создать компонент в React?
Чтобы создать компонент в React, достаточно написать функцию или класс, который возвращает JSX. Функциональные компоненты сейчас являются стандартом, и их можно создавать с помощью простой функции, которая принимает props и возвращает разметку.
Как использовать keys?
Как можно создать и инициировать пользовательское событие в JavaScript?
Каковы различия между классовыми и функциональными компонентами в React?
Что такое условный рендеринг в React?
Можете объяснить концепцию HOC (Higher-Order Components) в React?
Рейтинг:
3
Сложность:
4
Keys — это уникальные идентификаторы, которые React использует для того, чтобы отслеживать элементы при рендеринге списков. Они помогают React эффективно обновлять только те элементы, которые изменились, а не перерендеривать весь список. Ключи должны быть уникальными среди соседних элементов.
Рейтинг:
2
Сложность:
5
В JavaScript можно создать пользовательское событие с помощью конструктора CustomEvent. Это событие можно инициировать с помощью метода dispatchEvent(). Пользовательские события полезны, когда нужно сигнализировать о каком-то действии или изменении состояния, которое не связано с встроенными событиями браузера.
Рейтинг:
2
Сложность:
4
Классовые компоненты используют синтаксис классов и имеют методы для работы с состоянием и жизненными циклами. Функциональные компоненты — это простые функции, которые возвращают JSX. Раньше функциональные компоненты не могли иметь состояния, но с появлением хуков в React они получили эту возможность. Теперь функциональные компоненты чаще используются благодаря более простому синтаксису и гибкости.
Рейтинг:
1
Сложность:
2
Условный рендеринг — это способ отображения элементов в React на основе определенных условий. Это работает так же, как условные операторы в JavaScript. Например, вы можете показать один компонент, если условие истинно, и другой, если условие ложно.
Рейтинг:
3
Сложность:
5
HOC (компонент высшего порядка) — это функция, которая принимает компонент и возвращает новый компонент. Это позволяет повторно использовать логику между разными компонентами, не изменяя их исходный код. HOC полезны, когда нужно добавить общую функциональность, такую как авторизация или управление состоянием.
Рейтинг:
3
Сложность:
5
Рейтинг:
3
Сложность:
6
Рейтинг:
1
Сложность:
1
Рейтинг:
1
Сложность:
1
Рейтинг:
1
Сложность:
1