React
1. Что такое JSX и как он работает в React?
JSX (JavaScript XML) — это синтаксис, позволяющий писать HTML-подобный код внутри JavaScript.
React не понимает JSX напрямую, он компилируется в React.createElement, который создаёт виртуальные DOM-элементы.
2. Что такое "key" в React и почему он важен при рендеринге списков?
key — это уникальный идентификатор элемента в списке. Он помогает React отслеживать, какие элементы изменились, были удалены или добавлены, и тем самым оптимизирует ререндеринг.
Важно: Никогда не используйте index массива как ключ, если порядок может измениться.
3. Что такое "рефы" (refs) в React и как они используются?
ref (reference) — это способ получить прямой доступ к DOM-элементу или React-компоненту.
Пример:
```jsx
const inputRef = useRef();
<input ref={inputRef} />
inputRef.current.focus(); // доступ к DOM напрямую`
```
Применение: фокусировка на инпуте, управление плеером, измерение размеров и т.п
4. Что такое React Router и для чего он используется?
Ответ:
React Router — это библиотека для создания маршрутов (страниц) в одностраничных приложениях (SPA).
Позволяет переключать компоненты при изменении URL без перезагрузки страницы.
Пример маршрута:
<Route path="/profile" element={<Profile />} />
5. Что такое Prop drilling и как с этим справляться в React?
Ответ:
Prop drilling — это передача пропсов через несколько промежуточных компонентов, чтобы донести данные до нужного дочернего.
Проблема: делает код запутанным и сложным в поддержке.
Решения:
- Использовать Context API
- Сторонние библиотеки: Redux, Zustand
6. Что такое Portal в react?
Portals в React — это способ рендерить компоненты вне DOM-иерархии их родителя, но при этом сохранить их частью React-дерева.
Это особенно полезно для UI-элементов вроде модальных окон, всплывающих подсказок или dropdown-меню, когда нужно обойти ограничения родительских стилей, например overflow: hidden или z-index.
Для создания портала используется метод ReactDOM.createPortal(element, container), где element — это React-элемент, а container — DOM-узел, куда его нужно вставить.
Несмотря на то, что компонент будет рендериться в другом месте DOM, логика и управление им остаются в React.
7. Что такое HOC (Higher-Order Component) в React? Зачем он нужен?
### ❓Что такое HOC (Higher-Order Component)?
HOC (Компонент высшего порядка) — это функция, которая принимает компонент и возвращает новый компонент с расширенной логикой или функциональностью.
``
```jsx
const withLogger = (Component) => { return (props) => {
console.log('Компонент рендерится с пропсами:', props);
return
<Component {...props} />;
};
};
```
Здесь withLogger — это HOC. Он не рендерит сам по себе, а добавляет поведение к переданному компоненту.
---
### 🔧 Зачем нужны HOC?
- Чтобы переиспользовать логику между компонентами (например, логгирование, защита маршрута, фетчинг данных).
- Это шаблон композиции в React.---
### 💡 Важно помнить:
- HOC не изменяют оригинальный компонент, а создают обёртку.
- Часто используется в библиотеке Redux connect) и других.
8. Что такое React Hooks и какие хуки ты знаешь?
React хук — это функция, которая позволяет использовать различные возможности React (например, состояние, эффекты и другие функции) в функциональных компонентах. Хуки были введены в React 16.8 и позволяют легко управлять состоянием, side-effects и производительностью в функциональных компонентах, делая код более чистым и повторно используемым.
- useState — используется для управления состоянием в функциональных компонентах.
- useEffect — для работы с side-effects, таких как запросы на сервер, подписки, таймеры.
- useMemo — используется для мемоизации значений, чтобы избежать их перерасчета при каждом рендере.
- useCallback — похож на useMemo, но используется для мемоизации функций.
- useRef — позволяет хранить изменяемые значения, которые не вызывают повторный рендер компонента при их изменении.
- useReducer используется для более сложного управления состоянием, особенно когда логика изменения состояния включает несколько подслоёв состояний или требуется использование нескольких действий. Он похож на useState, но дает больше гибкости, так как позволяет работать с редюсерами, как в Redux.
- useContext используется для работы с контекстом в React. Контекст позволяет передавать данные через дерево компонентов без необходимости передавать их через props на каждом уровне. useContext позволяет компонентам подписываться на изменения контекста.
1. Что такое React?
Что такое SPA?
Что такое virtual DOM?
Как работает virtual DOM?
+/- React?
Что такое JSX?
Какие основные хуки?
useState - это? Для чего нужен?
Когда происходит ререндер?
Зачем передвать callback в setState?
Что такое useEffect?
Что такое жизненный цикл?
Что такое утечка памяти?
Какие методы жизненного цикла реализует useEffect?
Что такое useRef? Для чего нужен?
Что такое useContext?
Что такое props drilling?
Что такое useMemo?
Что такое useCallback?
Как можно оптимизировать приложение?
Что такое useCallback?
Неуправляемые и неуправляемые компоненты?
key для чего нужен?
Хук что такое вообще?
Что такое HOC?
Что такое портал?
Что такое реакт фрагмент?
Что такое suspens реакт?
Что такое Error Boundary?
Что такое memo?
Что такое forwardRef?
Что такое lazy loading? code splitting