Собеседование React.JS
Published: 2022-07-14 08:27:39

## 1 Что такое React?
● React - JavaScript фронтенд библиотека, разработанная Facebook в 2011
● В ядре - компонентный подход, позволяющий создавать переиспользуемые UI
блоки
● Служит, для создания сложных интерактивных UI для web и мобильной
разработки

## 2 Какие основные преимущества есть в React?
● Увеличивает производительность отрисовки приложений
● Может использоваться и на клиенте и на сервере
● Из-за JSX читаемость кода увеличивается
● Легко интегрировать с другими фреймворками
● Легко писать unit тесты

## 3 Какие есть ограничения в React?
● React - всего лишь библиотека
● Требуется некоторое время на освоение
● Может быть немного сложным для начинающих
● Код по-началу может выглядеть сложным из-за инфраструктуры и JSX

## 4 Что такое JSX?
JSX - ярлык для JavaScript XML. Это специальный синтаксис, который расширяет
JavaScript возможностью писать HTML внутри
Это позволяет интегрировать шаблоны компонентов прямо в JavaScript, что делает
разработку проще

## 5 Что такое Virtual DOM в React?
Virtual DOM - легковесный JavaScript объект, который представляет копию реального
DOM дерева. Нужен для оптимизации взаимодействия с DOM

## 6 Что такое Props?
Сокращенно от Properties. Входящие свойства в компонент. Они только для чтения и
их нельзя менять. Всегда идут от родителя к ребенку.

## 7 Что такое state и как он используется?
Обычный объект - источник данных. Содержит информацию по поведению и
состоянию интерфейса. Можно мутировать

## 8 Что такое refs в React?
Сокращенно от References. Специальный атрибут, позволяющий получить доступ до
конкретного DOM элемента
Нужен для:
● Вызова анимаций
● Для задания фокуса или выделения текста
● Взаимодействия со сторонними библиотеками

## 9 Что такое JEST?
JavaScript фреймворк, для юнит тестирования на основе Jasmine. Разработал
Facebook. Очень удобен именно для React

## 10 Когда следует использовать Class компоненты, а когда
функциональные?
Если нужны жизненные этапы компонента - используем class компоненты
Иначе для оптимизации лучше функциональные

## 11 Что происходит, когда вы вызываете setState?
Вначале React соединяет объект стейта с измененными полями. На основе нового
состояния строит новое дерево React элементов и выясняет, какие именно части
приложения должны быть изменены
Это нужно для наиболее производительного обновления интерфейса

## 12 В чем разница между state и props?
state - структура данных, необходимая для изменения и отслеживания
пользовательских действий
props - набор конфигурации, поступающий от родительского элемента. Их нельзя
изменять

## 13 Когда следует делать асинхронные запросы на сервер в React?
Для этого служит метод componentDidMount
Или useEffect с _пустым набором зависимостей_

## 14 В чем смысл специального атрибута key?
Атрибут позволяет React понимать, какие именно элементы в списке были
модифицированы или удалены, что увеличивает производительность рендеринга.
Лучше всего использовать уникальные значения, такие как ID. Индексы использовать
не рекомендуется

## 15 Что значит компонент mounted?
Шаблон компонента соединен с DOM деревом

## 16 Назовите разницу между контролируемым и
неконтролируемым компонентом
● Контролируемый компонент обладает своим стейтом, управляемый React
● Неконтролируемые компоненты обладают внутренним стейтом (как пример
значение тега textarea)

## 17 Что такое фрагменты?
Специальный элемент в React позволяющий возвращать группу элементов без
дополнительного родительского DOM элемента

## 18 Как React обрабатывает пользовательские события?
Добавляет один обработчик события на корневой элемент.
Объект события оборачивает в свою обертку - SyntheticEvent для кроссбраузерности

## 19 Что такое Redux?
Библиотека для работы с потоком данных в JavaScript.
Позволяет добавить дополнительный слой для приложения, где состояние описано в
JavaScript объекте. Нужно для более удобного написания кода

## 20 Назовите основные этапы жизненного цикла компонента
● componentWillMount - перед рендерингом, в основном для настройки
компонента
● render - процесс рендеринга
● componentDidMount - уведомляет, про то, что компонент соединен с DOM
деревом
● componentWillReceiveProps - уведомляет, про то, что приходят новые
входящие свойства в компонент
● shouldComponentUpdate - возвращает true или false и служит для
оптимизации. Решает, нужно ли делать ре-рендеринг
● componentWillUpdate - уведомляет, что компонент будет обновлен
● componentDidUpdate - уведомляет, что компонент был обновлен
● componentWillUnmount - используется для удаления слушателей и очистки
компонента. Вызывается перед удалением компонента

## 21 В setState можно передавать объект или функцию. В чем
разница и что лучше использовать?
props и state могут изменяться асинхронно. Если мы передадим функцию, то мы
точно будет знать, что стейт основывается на предыдущем состоянии

## 22 Назовите разницу между Презентационным и Контейнер
компонентом?
● Презентационный - “как вещи выглядят”. Нужен для создания интерфейса.
Работает на входящих параметрах
● Контейнер - “как вещи работают”. Обладают состоянием, подключены к Flux или
Redux

## 23 Что такое Context?
Context - позволяет передавать свойства от родителя к ребенку, избегая
промежуточных компонентов

## 24 Что такое Higher-Order компоненты?
Higher-order component (HOC) - функции, у которых входящий параметр компонент.
Возвращают новый компонент с добавленным поведением.
Могут быть использованы в следующих случаях:
1. Переиспользование кода
2. Слой абстракции для state и взаимодействия с ним
3. Управление props

## 25 Что делает shouldComponentUpdate и почему он важен?
Этап жизненного цикла, который решает, будет ли ре-рендер, или нет
Позволяет оптимизировать приложение

## 26 Что такое store в Redux?
JavaScript объект, в котором содержится состояние приложения. Дополнительно
отвечает за следующее:
1. state может быть получен через getState()
2. Изменять state можно через dispatch(action)
3. Регистрировать изменения через subscribe(listener)

## 27 Что такое action в Redux?
Объект, который обязательно должен содержать ключ type. С помощью него Redux
понимает, что именно нужно сделать со стейтом

## 28 Что нельзя делать в методе render?
Нельзя изменять состояние компонента (например вызывать setState). Должен быть
чистой (pure) функцией

##29 Какие типы middleware есть в redux для работы с
асинхронностью?
1. Redux Thunk
2. Redux Promise
3. Redux Saga
30 Что такое Pure Components?
Тоже самое, что и Component, кроме того, что автоматически за вас реализует метод
shouldComponentUpdate.