50 самых важных вопросов и ответов на интервью React

Разработчики ReactJS пользуются большим спросом, и на это есть веская причина. Но вам придется доказать свое мастерство в рамках, чтобы получить работу.

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

1. Что такое Реакт?

React — это бесплатная и открытые источники Библиотека JavaScript для разработки пользовательского интерфейса, которая использует компоненты для создания выходных данных для одностраничных приложений. React был разработан Facebook (Meta) и поддерживается сообществом разработчиков.

2. Перечислите важные функции React

Наиболее важные функции React включают в себя:

1. Простота в использовании
2. Быстрое развитие
3. Использование компонентов
4. JSX
5. Виртуальный дом
6. Высокие эксплуатационные характеристики
7. Односторонняя привязка данных

3. Где находится репозиторий проекта React?

React — это монорепозиторий, который живет по адресу https://github.com/facebook/react. Быть монорепозиторием означает, что весь его код и другие исходники хранятся в одном месте для упрощения разработки и управления.

4. Какая текущая стабильная версия React?

Самая последняя стабильная версия React от 14 июня 2022 года — 18.2.0.

5. Укажите различия между React Native и ReactJS.

React и ReactJS одинаковы, а React Native построен на React. Из-за их различий React используется для создания динамических и отзывчивых пользовательских интерфейсов для веб-приложений, а React Native предназначен для создания приложений в качестве мобильных приложений.

6. В чем разница между элементом и компонентом?

Элемент React — это простой и неизменяемый объект, созданный для представления узла DOM. Быть неизменяемым означает, что его нельзя изменить после того, как он был создан, поскольку он отображается в DOM. С другой стороны, компонент React является изменчивым и после рендеринга создает вывод JSX.

7. Как создать компонент?

Есть два способа создать компонент в React: 1.) функциональные компоненты и 2.) компоненты класса. Как следует из названий, компонент функции создается с помощью объявления функции, а компонент класса создается с помощью объявления класса.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Перечислите 4 стадии React Component

Компонент React проходит следующие 4 этапа в своем жизненном цикле:

1. Начальная стадия - Конструкция компонента в состоянии по умолчанию с начальными реквизитами
2. Этап монтажа – JSX-рендеринг компонента
3. Фаза обновления – Изменения состояния компонентов и перерисовка приложения
4. Фаза размонтирования – Удаление компонента из DOM

9. Объясните, что означает компонент более высокого порядка

Компонент высшего порядка (HOC) — это методология React для создания компонентов. Он использует существующий компонент для создания нового с дополнительными функциями. Другими словами, HOC — это функция, которая принимает компонент в качестве аргумента и возвращает новый компонент с дополнительными функциями.

10. Что такое контролируемые и неконтролируемые компоненты?

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

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

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

12. Что такое props.children?

Атрибут Props.children содержит информацию обо всем содержимом компонента, имеющего открывающий и закрывающий теги. Эти дочерние элементы относятся ко всем элементам, которые определены внутри текущего компонента, и могут быть одним, многими или отсутствовать.

13. Можно ли обновлять реквизиты в React?

Нет, свойства в React расположены сверху вниз и являются неизменяемыми. Это означает, что компонент может отправлять любые свойства своим дочерним элементам, но не может обновлять свои реквизиты. Только его родитель может обновлять свой реквизит.

14. Что такое JSX?

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

15. В чем разница между компонентом и элементом

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

16. Что такое состояние в React?

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

17. Что такое компонент без состояния?

Компонент React без состояния не имеет состояния. Это означает, что вы не можете ни установить его состояние с помощью this.setState () метод и не визуализировался. Однако компонент без состояния может иметь реквизиты.

18. Как вы обновляете состояние в React

Вы обновляете состояние компонента, вызывая его this.setState () метод.

19. Объясните строгий режим React

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

20. Что означает поднятие состояния в React?

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

21. Как вы передаете данные в React?

Вы передаете данные в React, используя свойства и обратные вызовы. Реквизиты React являются однонаправленными, позволяя свойствам передаваться только от родительских компонентов к их дочерним. Чтобы передать данные из дочернего компонента в родительский, вы должны использовать функцию обратного вызова.

22. Определите Поток в React

Flux — это однонаправленная концепция управления потоком данных в приложении. Однонаправленность означает, что данные могут передаваться только от родительских компонентов к дочерним. Flux также может включать в себя несколько хранилищ данных для каждого приложения.

23. Определите Redux в React

Redux — полезная библиотека JavaScript с открытым исходным кодом для управления сложными состояниями в приложении. Он независим и может использоваться в других фреймворках, таких как Angular. В отличие от Flux, Redux централизует управление состоянием приложения, тем самым упрощая создание сложных пользовательских интерфейсов.

24. Когда следует использовать Redux?

Не всем приложениям нужен Redux. Но это полезно в следующих случаях:

1. Когда у вас есть большое количество состояний приложения в вашем приложении
2. Когда логика вашего приложения сложна
3. Когда у вашего приложения большая кодовая база
4. Когда вам нужно часто обновлять приложение
5. Когда над приложением работает много людей

25. В чем основная разница между Redux и Flux?

Основное различие между ними заключается в том, что Redux управляет всеми данными приложения из одного хранилища, в то время как вы можете иметь несколько хранилищ во Flux.

26. Перечислите компоненты Redux

Redux состоит из 4 основных частей:

1. Магазин – Здесь вы храните состояние приложения.
2. Действие — Это события, которые заставляют приложение отправлять данные в магазин Redux.
3. Редуктор — Это функция, которая принимает текущее состояние приложения и действие в качестве аргументов, а затем возвращает новое состояние в качестве результата.
4. ПО промежуточного слоя – Эта функция позволяет разработчику фиксировать все действия компонента до того, как они достигнут функции редуктора.

27. Что такое React Hooks?

Хуки React — это функция функциональных компонентов, которая позволяет вам получить доступ к различным функциям React, таким как данные состояния и обновления рендеринга. Он был представлен в React 16.8.

28. Перечислите типы хуков в React

В React существует более 15 хуков, начиная от базовых, таких как useState, useEffect и useContext, и заканчивая дополнительными хуками, такими как useCallback, useReducer, useMemo, useRef и так далее.

29. Что такое фрагменты?

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

<>

or

и загрузите все дочерние элементы, которые вы хотите внутри. Единственное отличие состоит в том, что сокращённая версия <> не принимает ключи и атрибуты, а длинная — принимает.

30. Перечислите основные методы пакета react-dom

Это createPortal() для рендеринга дочерних элементов во внешнюю модель DOM и flushSync() для сброса обновлений. Существуют также методы render() и hydrate(), которые были заменены на createRoot() и hydrateRoot() начиная с React 18.

31. Что такое React Keys?

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

32. Почему ключи React важны?

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

33. Что такое событие в React?

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

34. Объясните, что Синтетическое событие Означает

Синтетическое событие представляет собой оболочку собственных событий браузера, но проблема в том, что разные браузеры называют свои события по-разному. React использует синтетические события, чтобы избежать проблемы создания нескольких реализаций и методов для всех существующих браузеров. Таким образом, React поддерживает общие имена для всех различных событий браузера как единый API.

35. Что такое Webpack?

Webpack — это система связывания модулей, используемая для объединения и минимизации файлов JavaScript и CSS. Он построен на Node.js и полезен при работе с большим количеством файлов или ресурсов, не связанных с кодом, таких как изображения и шрифты.

36. Что такое приложение create-реагировать?

Create-react-app — это инструмент, который поможет вам создать одностраничное приложение React в вашей среде Node.js. Он генерирует все файлы и папки, необходимые для запуска базового приложения, и вы берете их оттуда. Для этого требуется Node версии 14.0.0 и выше и npm от версии. 5.6.

Использование простое:

npx создать-реагировать-приложение myNewApp

компакт-диск myNewApp

начало вечера

37. Можете ли вы выполнить рендеринг серверной части с помощью React?

Да, можете, хотя для крупных проектов это может оказаться ресурсоемким. Рендеринг на стороне сервера полезен, поскольку он улучшает взаимодействие с пользователем и SEO. Вам понадобится среда Node.js, пакет, например Webpack, и фреймворк, например Next.js и Ремикс для рендеринга приложений React во время выполнения. Решением проблемы интенсивного использования ресурсов является использование генератор статических сайтов, например, на основе Next.js Гэтсби.

38. Объясните, что делает функция стрелки

Стрелочная функция — это просто более короткий способ определения функций. Это сокращение ES6, которое заменяет:

= функция () ()=>.

Например:

тест = функция () {

вернуть «Это тест»;

}

затем становится:

тест = () => {

вернуть «Это тест»;

}

или для однострочных операторов:

test = () => «Это тест»;

39. Что такое Реактивный маршрутизатор?

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

40. Каковы основные преимущества использования React Router?

Он создает разные URL-адреса для вашего приложения и предоставляет значения window.location и объект истории.

41. Что такое ComponentWillUnmount()?

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

42. Что такое Конструктор()?

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

43. Что такое виртуальный DOM?

Виртуальный DOM React — это облегченная копия DOM фактического HTML-документа. Он используется для эффективного управления и обновления изменений в реальном DOM.

44. Каковы преимущества виртуального DOM по сравнению с реальным DOM?

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

45. Объясните термин сверка в React

Согласование — это метод React для обновления реального DOM только при необходимости путем проверки обновленных версий виртуального DOM посредством сравнения и обновления только тех узлов, которые изменились в реальном DOM.

46. Объясните термин Profiler в React

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

47. Объясните термин Контекст в React

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

48. Объясните термин Исполнение в React

Монтирование в React — это процесс присоединения компонента в качестве узла к DOM. Размонтирование происходит наоборот.

49. Объясните термин Рендеринг в React

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

50. Объясните термин Граница ошибки в React

Граница ошибки относится к компоненту React, который перехватывает ошибки JavaScript от своих дочерних компонентов, регистрирует ошибки и отображает резервный пользовательский интерфейс вместо узлов, в которых произошел сбой. Границы ошибок были введены в React 16.

Заключение

Мы подошли к концу этого списка из 50 самых важных вопросов для собеседования по React, и мы надеемся, что вы уже имеете хорошее представление о том, чего ожидать.

Вы также должны отметить, что ничто не остается прежним, и ваше интервью может принять любое направление. Поэтому вам следует продолжать учиться и быть в курсе последних событий.