Вопрос на React собеседовании.

Что такое реквизиты в React?

Ответ:

Реквизиты (props, пропсы) – это данные, которые передаются компоненту от родителя. Реквизиты доступны только для чтения и не могут быть изменены (картинка сверху).

Подробнее о реквизитах – в документации.

#react #собеседование

Вопрос на React собеседовании.

Что такое reducer в Redux и какие параметры он принимает?

Ответ:

Редуктор – это чистая функция, принимающая в качестве параметров состояние и действие.
Внутри редуктора мы отслеживаем тип полученного действия и, в зависимости от него, модифицируем состояние и возвращаем новый объект состояния (картинка сверху).

Подробнее о редукторах – здесь.

#react #собеседование

Вопрос на React собеседовании.

Для чего используется useRef и как он работает?

Ответ:

Хук useRef возвращает ссылку (ref-объект), которая может быть привязана к текущему значению какого-либо элемента или состояния компонента. При создании этого объекта, начальное значение устанавливается равным переданному аргументу. Такой объект сохраняется между различными рендерами компонента и его значение не меняется: если мы изменим значение переданного аргумента, это не повлияет на ref-объект.

Обычно useRef используется для доступа к дочерним элементам в императивном стиле, то есть явно обращаясь к какому-то элементу DOM. Это позволяет выполнять различные действия над элементом – изменять стили, добавлять события и т.д. (картинка сверху).

Подробнее о useRef - здесь.

#react #собеседование

Вопрос на React собеседовании.

Как получить доступ к переменной в состоянии Mobx?

Ответ:

Получить доступ к переменной в состоянии можно с помощью декоратора observable для определения переменной как наблюдаемой: пример на картинке сверху.

В примере с картинки выше переменная myVariable определяется как наблюдаемая с помощью декоратора observable. Затем к переменной можно получить доступ с помощью store.myVariable. Любые изменения, внесенные в myVariable, будут автоматически вызывать обновления в зависимых компонентах или реакциях.

Подробнее о доступе к переменным написано здесь.

#react #собеседование

Вопрос на React собеседовании.

Для чего используется useContext и как он работает?

Ответ:

В типичном React-приложении данные передаются сверху вниз (от родительского компонента к дочернему) с помощью реквизитов (пропсов). Однако такой способ может оказаться слишком громоздким для некоторых типов реквизитов, которые нужно передавать многим компонентам – из-за языка или темы пользовательского интерфейса, например. Контекст предоставляет возможность обмена данными между компонентами без необходимости явной передачи реквизита через каждый уровень дерева.

Компонент, вызывающий useContext, всегда будет перерисовываться при изменении значения контекста. Если перерисовка компонента требует больших затрат, можно оптимизировать ее с помощью мемоизации (картинка сверху).

Подробности об использовании useContext в документации.

#react #собеседование

Вопрос на React собеседовании.

Что такое React.memo()?

Ответ:

React.memo() – это компонент высшего порядка, который используется для оптимизации производительности веб-приложений. Если компонент, который вы хотите оптимизировать, всегда отображает один и тот же результат с неизменными реквизитами (props), вы можете обернуть его вызов в React.memo, чтобы запомнить его результат. Таким образом, React может использовать последний отрендеренный результат этого компонента вместо того, чтобы снова его рендерить, если входные данные не изменились. Это помогает оптимизировать производительность, так как повторный рендеринг может быть затратным по ресурсам (пример на картинке сверху).

Важно отметить, что React.memo влияет только на изменение входных данных (реквизитов): если функциональный компонент, обернутый в React.memo, использует useState, useReducer или useContext для изменения своего состояния или контекста, он все равно будет перерисован при изменении этих состояний или контекстов.

Подробности в документации.

#react #собеседование

Вопрос на React собеседовании.

Что такое фрагмент React?

Ответ:

Возврат нескольких элементов из компонента – обычная практика в React. Однако это может привести к созданию большого количества элементов в дереве виртуального DOM, отчего пострадает производительность приложения.

Фрагменты React позволяют группировать несколько элементов внутри функции-компонента, избегая таким образом создания большого количества узлов в виртуальном DOM. Это улучшает производительность приложения и читаемость кода (пример на картинке сверху).

Подробнее о фрагментах - здесь.

#react #собеседование

Вопрос на React собеседовании.

Как отследить изменения поля объекта в функциональном компоненте?

Ответ:

Для этого необходимо использовать хук useEffect и передать поле объекта в виде массива зависимостей: пример на картинке сверху.

#react #собеседование

Вопрос на React собеседовании.

Как получить доступ к элементу DOM?

Ответ:

Чтобы получить доступ к DOM-элементу в React, нужно создать ссылку на этот элемент. Это можно сделать с помощью функции React.createRef() или хука useRef(). После создания ссылки ее нужно присоединить к компоненту React, для которого нужно получить доступ к DOM, с помощью атрибута ref. Затем, чтобы получить доступ к самому элементу DOM, можно обратиться к созданной ссылке через ref.current: пример на картинке сверху.

#react #собеседование