Топ-70 запитань і відповідей на інтерв’ю React JS

Запитання та відповіді на інтерв’ю React

Ось питання та відповіді на співбесіді ReactJs для новачків, а також для досвідчених кандидатів, щоб отримати роботу своєї мрії.

1) Що таке Reactjs?

React — це бібліотека JavaScript, яка полегшує створення інтерфейсів користувача. Його розробила компанія Facebook.

---

2) Чи використовує React HTML?

Ні, він використовує JSX, який схожий на HTML.

Безкоштовне завантаження PDF: Запитання та відповіді на інтерв’ю React

---

3) Коли вперше було випущено React?

React був вперше випущений у березні 2013 року.

---

4) Назвіть два найважливіших недоліки React

• Інтеграція React із фреймворком MVC, таким як Rails, вимагає складної конфігурації.
• React вимагає від користувачів знання про інтеграцію інтерфейсу користувача в структуру MVC.

---

5) Вкажіть різницю між Real DOM і Virtual DOM

Справжній DOM	Віртуальний DOM
Оновлюється повільно.	Оновлюється швидше.
Це дозволяє пряме оновлення з HTML.	Його не можна використовувати для безпосереднього оновлення HTML.
Це витрачає забагато пам’яті.	Споживання пам'яті менше

---

6) Що таке концепція Flux у React?

Facebook широко використовує концепцію архітектури flux для розробки клієнтських веб-додатків. Це не фреймворк і не бібліотека. Це просто новий тип архітектури, який доповнює React і концепцію односпрямованого потоку даних.

---

7) Визначте термін Redux у React

Redux — це бібліотека, яка використовується для розробки інтерфейсу. Це контейнер стану для програм JavaScript, який слід використовувати для керування станом програм. Ви можете перевірити та запустити програму, розроблену за допомогою Redux, у різних середовищах.

---

8) Що таке функція «Магазин» у Redux?

Redux має функцію «Store», яка дозволяє зберігати весь стан програми в одному місці. Тому всі стани компонентів зберігаються в магазині, щоб ви отримували регулярні оновлення безпосередньо з магазину. Єдине дерево станів допомагає відстежувати зміни з часом і налагоджувати або перевіряти програму.

---

9) Що таке дія в Redux?

Це функція, яка повертає об’єкт дії. Тип дії та дані дії завжди зберігаються в об’єкті дії. Дії можуть надсилати дані між Магазином і програмою. Уся інформація, яку отримує Магазин, створюється діями.

---

10) Назвіть важливі функції React

Ось важливі функції React.

• Дозволяє використовувати сторонні бібліотеки
• Економія часу
• Швидший розвиток
• Простота та компонування
• Повністю підтримується Facebook.
• Стабільність коду з однонаправленою прив'язкою даних
• Компоненти React

---

11) Поясніть термін компоненти без стану

Компоненти без стану — це чисті функції, які відтворюють DOM виключно на основі наданих їм властивостей.

---

12) Поясніть React Router

React Router — це бібліотека маршрутизації, яка дозволяє додавати нові екранні потоки до вашої програми, а також підтримує синхронізацію URL-адреси з тим, що відображається на сторінці.

---

13) Які популярні пакети анімації в екосистемі React?

Популярним пакетом анімації в екосистемі React є

• Реагувати на рух
• Перехідна група React

---

14) Що таке Jest?

Jest — це платформа модульного тестування JavaScript, створена Facebook на основі Jasmine. Він пропонує автоматичне створення макетів і середовище jsdom. Він також використовується як компонент тестування.

---

15) Що таке диспетчер?

Диспетчер — це центральний центр програми, де ви отримуватимете дії та транслюватимете корисне навантаження для зареєстрованих зворотних викликів.

---

16) Що означає функція зворотного виклику? Яке його призначення?

Функцію зворотного виклику слід викликати, коли setState завершиться, і компонент повторно візуалізується. Оскільки setState є асинхронним, тому він використовує другу функцію зворотного виклику.

---

17) Поясніть термін компонент високого порядку

Компонент вищого порядку, також коротко відомий як HOC, є передовою технікою для повторного використання логіки компонента. Це не частина React API, але вони є шаблоном, який випливає з композиційної природи React.

---

18) Поясніть презентаційний сегмент

Презентаційна частина — це сегмент, який дозволяє відтворювати HTML. Ємність сегмента презентаційна в розмітці.

---

19) Що таке Props у react js?

Реквізити означають властивості, які є способом передачі даних від батьківського до дочірнього. Можна сказати, що пропи - це лише канал зв'язку між компонентами. Він завжди рухається від батьківського до дочірнього компонента.

---

20) Яке використання ключового слова super у React?

Ключове слово super допомагає отримати доступ до функцій батьківського об’єкта та викликати їх.

---

21) Поясніть фразу yield у JavaScript

Ключова фраза yield використовується для затримки та резюме робота генератора, яка відома як yield catchphrase.

---

22) Назвіть два типи компонентів React

Реагують на два типи компонентів:

• Функціональний компонент
• Компонент класу

---

23) Поясніть синтетичну подію в React js

Синтетична подія — це свого роду об’єкт, який діє як міжбраузерна обгортка навколо рідної події браузера. Це також допомагає нам поєднувати поведінку різних браузерів у API сигналу.

---

24) Що таке React State?

Це об’єкт, який вирішує, як відображатиметься певний компонент і як він поводитиметься. Стан зберігає інформацію, яку можна змінити протягом життя компонента React.

---

25) Як можна оновити стан у react js?

Стан компонента можна оновлювати прямо чи опосередковано.

---

26) Поясніть використання функції стрілки в React

Функція стрілки допомагає передбачити поведінку помилок, коли їх передають як зворотний виклик. Таким чином, це разом запобігає помилці, спричиненій цим.

---

27) Які етапи життєвого циклу React?

Важливі етапи життєвого циклу React js:

• Ініціалізація
• Оновлення стану/власності
• Знищення є життєвим циклом React

---

28) Вкажіть головну різницю між «Профі» та «Стейтом».

Основна відмінність між ними полягає в тому, що стан є змінним, а плюси незмінними.

---

29) Поясніть чисті компоненти в React js

Чисті компоненти — це найшвидші компоненти, які можуть замінити будь-який компонент лише за допомогою render(). Це допомагає вам підвищити простоту коду та продуктивність програми.

---

30) Яка інформація контролює сегмент у React?

Існує в основному два типи інформації, яка керує сегментом: стан і реквізити

• Стан: інформацію про стан, яка зміниться, нам потрібно використовувати стан.
• Реквізити: Реквізити встановлюються батьківським і встановлюються протягом усього терміну служби частини.

---

31) Що таке «create-react-app»?

«create-react-app» — це інструмент командного рядка, який дозволяє створити одну базову програму для реагування.

---

32) Поясніть використання «ключа» у списку реакцій

Ключі дозволяють надати кожному елементу списку стабільну ідентичність. Ключі повинні бути унікальними.

---

33) Що таке дитячий реквізит?

Дочірні атрибути використовуються для передачі компонента іншим компонентам як властивості. Ви можете отримати до нього доступ за допомогою

{props.children}

---

34) Поясніть межі помилки?

Межі помилок допомагають вам виявити помилку Javascript будь-де в дочірніх компонентах. Вони найчастіше використовуються для реєстрації помилок і показу резервного інтерфейсу користувача.

---

35) Яка користь від порожніх тегів <> ?

Порожні теги використовуються в React для оголошення фрагментів.

---

36) Поясніть суворий режим

StrictMode дозволяє запускати перевірки та попередження для компонентів React. Він працює лише на розробці. Це допомагає висвітлити проблеми, не відображаючи жодного видимого інтерфейсу користувача.

---

37) Що таке реаговані портали?

Портал дозволяє відображати дочірні елементи у вузлі DOM.  CreatePortalметод використовується для цього.

---

38) Що таке контекст?

Контекст React допомагає вам передавати дані за допомогою дерева компонентів React. Це допомагає вам глобально ділитися даними між різними компонентами React.

---

39) Яка користь від Webpack?

Webpack в основному є конструктором модулів. Він в основному запускається в процесі розробки.

---

40) Що таке Babel у React js?

Babel — це компілятор JavaScript, який перетворює останній JavaScript, як-от ES6, ES7, у звичайний старий JavaScript ES5, який розуміє більшість браузерів.

---

41) Як браузер може читати файл JSX?

Якщо ви хочете, щоб браузер читав JSX, тоді цей файл JSX слід замінити за допомогою трансформатора JSX, наприклад Babel, а потім надіслати назад у браузер.

---

42) Які основні проблеми використання архітектури MVC у React?

Ось основні проблеми, з якими ви зіткнетеся під час роботи з архітектурою MVC:

• Обробка DOM досить дорога
• Здебільшого програми працювали повільно та неефективно
• Через циклічні функції навколо моделей та ідей була створена складна модель

---

43) Що можна зробити, якщо є більше одного рядка?

У той час багаторядковий вираз JSX є єдиним варіантом, який залишається для вас.

---

44) Що таке скорочення?

Скорочення є прикладним методом обробки стану.

---

45) Поясніть термін синтетичні події

Насправді це кросбраузерна оболонка навколо рідної події браузера. Ці події мають інтерфейс stopPropagation() і preventDefault().

---

46) Коли слід використовувати елементи вищого класу для функціонального елемента?

Якщо ваш елемент виконує етап або життєвий цикл, ми повинні використовувати елементи вищого класу.

---

47) Як можна поділитися елементом під час розбору?

Використовуючи державу, ми можемо ділитися даними.

---

48) Поясніть термін примирення

Коли стан компонента або атрибути змінюються, rest порівнює відрендерений елемент із попередньо відрендереним DOM і оновить фактичний DOM, якщо це необхідно. Цей процес відомий як примирення.

---

49) Як можна повторно відобразити компонент без використання функції setState()?

Ви можете використовувати функцію forceUpdate() для повторного відтворення будь-якого компонента.

---

50) Чи можете ви оновити атрибути в React?

Ви не можете оновити атрибути в react js, оскільки атрибути доступні лише для читання. Крім того, ви не можете змінювати атрибути, отримані від батьків до дитини.

---

51) Поясніть термін «Реструктуризація».

Реструктуризація - це процес вилучення масив об'єктів. Після завершення процесу ви можете відокремити кожен об’єкт в окремій змінній.

---

52) Чи можете ви оновити значення атрибутів?

Неможливо оновити значення пропсів, оскільки воно є незмінним.

---

53) Поясніть значення монтажу та демонтажу

• Процес кріплення елемента до DCOM називається монтажем.
• Процес від'єднання елемента від DCOM називається процесом демонтажу.

---

54) Яке використання бібліотеки 'prop-types'?

Бібліотека «Prop-types» дозволяє виконувати перевірку типів під час виконання для props і подібних об’єктів у останній програмі.

---

55) Поясніть реакційні хуки

Хуки React дозволяють використовувати State та інші функції React без написання класу.

---

56) Що таке фрагменти?

Ви можете використовувати ключове слово fragment для групування списку дочірніх компонентів без використання додаткових вузлів DOM. наприклад:

render() {

return (
);
}

---

57) Яка головна відмінність між createElement і cloneElment?

• createElement використовується react для створення елементів react.
• cloneElement використовується для клонування елемента та передачі йому нових атрибутів.

---

58) Що таке контрольовані компоненти?

Керовані компоненти - це компоненти, які керують вхідними елементами.

---

59) Чому вам потрібно використовувати props.children?

Цей props.children дозволяє передавати компонент як дані іншим компонентам.

---

60) Перелічіть деякі методи в пакеті react-dom

Важливими методами для пакетів react-dom є:

• render()
• гідрат()
• createPortal()
• unmountComponentAtNode()
• findDOMNode()

---

61) Як ми можемо виконати рендеринг на стороні сервера в React?

Ми можемо використовувати службу реакцій для рендерингу на стороні сервера.

---

62) Вкажіть різницю між getInitialState() і constructor()?

Якщо ви хочете створити один компонент, розширивши «React. Component', конструктор допоможе вам ініціалізувати стан. Але, якщо ви хочете створити за допомогою 'Reat.createClass.' то вам слід використовувати «genInitiaState».

---

63) Що таке посилання?

Ref є атрибутом елементів DOM. Основна мета посилань — легко знаходити елементи DOM.

---

64) Що таке ComponentWillMount()

componentWillMount() виконує виклики API після запуску компонента та налаштовує значення в стан. Щоб здійснити виклик API, використовуйте HttpClient, наприклад Axios, або ми можемо використати fetch(), щоб ініціювати виклик AJAX.

---

65) Як відправити дані в магазин?

Ми можемо відправляти дані в інший компонент, який має базуватися на дії, що зберігає батьківський компонент.

---

66) Як ви зможете виконувати більше дій за допомогою redux?

Щоб створити той самий компонент у більшій кількості дій, ми використовуємо ту саму функціональність у різних модулях.

---

67) Як можна пролити редуктори?

Ми можемо розповсюджувати порятунки на основі дій подій. Цю дію слід розділити на окремі модулі.

---

68) Назвіть будь-які п’ять попередньо визначених прототипів, які використовуються в React

Найважливішими прототипами, які використовуються в React js, є:

• номер
• рядок
• масив
• об'єкт
• елемент

---

69) Яка мета використання bindActionsCreators?

BindActionCreator допомагає прив’язати подію на основі диспетчера дій до елемента HTML.

---

70) Що таке REFS у React

Ref є посиланням на елемент. У більшості випадків цього слід уникати. Однак іноді він використовується, коли вам потрібно отримати прямий доступ до DOM або екземпляра компонента.

---

71) Чи можна приєднати елемент JSX до інших компонентів JSX?

Так, ви можете використовувати елемент attach JSX з іншими компонентами JSX, що дуже схоже на вкладення елементів HTML.

---

72) Яка поточна стабільна версія React?

Поточна стабільна версія React – це версія 17.5

---

73) Назвіть важливу функцію функцій робочого процесу Redux

Важливими функціями робочого процесу Redux є:

• Скидання: допомагає скинути стан магазину
• Повернути: дозволяє повернутися до останнього зафіксованого стану
• Прибирання: усі дії вимикання, які ви могли запустити помилково, буде видалено
• Здійснення: допомагає вам зробити поточний стан початковим.

---

74) Вкажіть різницю між React JS і React Native

React JS — це інтерфейсна бібліотека JavaScript з відкритим вихідним кодом, яка використовується для створення інтерфейсів користувача, тоді як React Native — це мобільна платформа з відкритим вихідним кодом, яка дозволяє розробникам використовувати React на таких платформах, як Android і iOS. Ці запитання для співбесіди також допоможуть вам у життєдіяльності (усному)