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

React — это библиотека JavaScript с открытым исходным кодом, которая используется для создания составных пользовательских интерфейсов, особенно для одностраничных приложений (SPA — single page application).

---

Он используется для обработки уровня представления для веб и мобильных приложений на основе компонентов в декларативном подходе.

---

React был создан Джорданом Уолке, инженером-программистом.

Причины для перерендера компонента:

---

1 — Изменения пропсов.
2 — Рендер родительского компонента.
3 — Изменения стейта компонента.
4 — Изменения контекста.

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

---

useState — используется для добавления состояния в функциональные компоненты.

---

useEffect — используется для замены некоторых методов жизненного цикла классового компонента.
Хук отрабатывает в следующих случаях:
- при монтировании компонента
- при обновлении компонента
- при размонтировании компонента из DOM.
useEffect — принимает массив зависимостей, если его нету, то содержимое будет обновляться при каждом рендере компонента.
Если массив пустой, то useEffect отработает один раз.
Если есть значение в массиве есть, то useEffect будет отрабатывать каждый раз, когда аргумент будет обновляться.

---

useRef — позволяет получить ссылку на элемент из DOM. Также с помощью данного хука можно получить свойство current, в котором можем получить данные о элементе.

---

useContext — используется для доступа к контексту в функциональных компонентах. Контекст позволяет передавать данные через дерево компонентов без необходимости передачи пропсов через каждый уровень.

---

useLayoutEffect — позволяет выполнять побочные эффекты после того, как браузер отрисует изменения на странице, но перед тем, как пользователь увидит эти изменения. Это делает его полезным для выполнения манипуляций с DOM или измерений элементов без задержки.
Основное отличие useLayoutEffect от useEffect заключается в том, что useLayoutEffect срабатывает синхронно после каждого обновления DOM, в то время как useEffect срабатывает асинхронно. Это означает, что useLayoutEffect может вызывать блокировку отрисовки страницы, поэтому его следует использовать с осторожностью.

---

useMemo — позволяет оптимизировать производительность компонентов путем кеширования вычислений. Он принимает функцию и массив зависимостей и возвращает кешированное значение, которое будет пересчитываться только при изменении зависимостей.

---

useTransition — позволяет обновлять состояние, не блокируя пользовательский интерфейс.

---

useId — хук для передачи одинаковых id в html теги.

---

useCallback — позволяет кэшировать определение функции между повторными рендерингами. Отлично применим с React.memo

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

---

React использует виртуальное DOM дерево — Virtual DOM для оптимизации производительности, вместо обновления реального DOM при каждом изменении данных React сначала обновляет виртуальное DOM дерево, а затем сравнивает его с реальным DOM, применяя только необходимые изменения. Это позволяет снизить нагрузку на браузер и повысить производительность приложения.

---

Однонаправленный поток данных — в React данные передаются от родительских компонентов к дочерним через пропсы (props). Это обеспечивает предсказуемость и упрощает отслеживание изменений данных в приложении.

---

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

---

React имеет большое сообщество разработчиков, которые создают и поддерживают множество библиотек и инструментов для упрощения разработки. Это делает React более доступным и удобным для использования.

---

Использование JSX (расширение синтаксиса JavaScript), который позволяет писать HTML-подобный код прямо в JavaScript файле.
JSX делает код более читаемым и удобным для разработчиков и  упрощает работу с компонентами.

React Fragment — это компонент в React, который позволяет обернуть несколько вложенных элементов без добавления обёртки на верхнем уровне. Вместо использования обычного div или другого контейнера можно использовать React Fragment для группировки нескольких элементов внутри одного компонента, не создавая лишних узлов в DOM.

---

Если необходимо указать атрибут key, то это можно сделать только в первом и во втором примерах кода.

---

Использование с помощью React.Fragment:
Использование с помощью Fragment:И самый простой способ использования:

Virtual DOM (VDOM) — это концепция программирования, которая заключается в создании в памяти браузера виртуальной копии реального DOM дерева.

---

VDOM представляет собой объект, который содержит информацию о текущем состоянии элементов на странице и их свойствах. Когда происходят изменения в компонентах, то React создает новое дерево VDOM, сравнивает его с предыдущим состоянием и определяет какие изменения необходимо внести в реальный DOM. Затем React обновляет только те элементы, которые изменились, вместо полной перерисовки всего дерева. Это позволяет уменьшить количество операций, которые необходимо выполнить при обновлении UI и значительно повысить производительность приложения.

---

VDOM используется для того, чтобы обновлять UI максимально эффективно и минимизировать количество операций с реальным DOM.