Топ-50 запитань і відповідей на інтерв’ю React, які потрібно знати

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

Нижче наведено поширені запитання щодо розробки React та відповіді на них, про які вам слід знати. Він включає в себе все, від основ до більш складних тем.

1. Що таке React?

React — це безкоштовна бібліотека JavaScript із відкритим кодом для розробки інтерфейсу користувача, яка використовує компоненти для створення вихідних даних для односторінкових програм. React був розроблений Facebook (Meta) і підтримується спільнотою розробників.

2. Перелічіть важливі функції React

Найважливіші функції React включають:

1. Простота використання
2. Швидкий розвиток
3. Використання компонентів
4. JSX
5. Віртуальний DOM
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

У своєму життєвому циклі компонент React проходить наступні 4 етапи:

1. Початкова стадія – Конструкція компонентів у стані за замовчуванням із початковими властивостями
2. Фаза монтажу – JSX рендеринг компонента
3. Етап оновлення – Зміни стану компонентів і перемальовування програми
4. Фаза демонтування – Видалення компонента з DOM

9. Поясніть, що означає компонент вищого порядку

Компонент вищого порядку (HOC) — це методологія React для створення компонентів. Він використовує наявний компонент для створення нового з додатковими функціями. Іншими словами, HOC — це функція, яка приймає компонент як аргумент і повертає новий компонент із доданими функціями.

10. Що таке керовані та некеровані компоненти?

Контрольований компонент — це компонент React, який отримує значення через властивості та повідомляє систему про будь-які зміни через зворотні виклики. Він контролюється батьківським компонентом, який керує ним були і передає значення як властивості до керованого компонента. Неконтрольований компонент, з іншого боку, керує своїм станом, і вам потрібно буде запитати DOM використання посилання щоб отримати його значення.

11. Що таке Props у React?

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

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

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

13. Чи можете ви оновити пропси в React?

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

14. Що таке JSX?

JSX розшифровується як JavaScript XML. Це розширення синтаксису JavaScript, яке дає змогу писати HTML у коді react. Браузер все одно не розуміє JSX, тому React має відтворити його в читабельний HTML-код.

15. Яка різниця між компонентом і елементом

Елемент — це визначення віртуального вузла DOM без стану та незмінне. Він містить як тип, так і властивість, але не має таких методів, як компонент. Ця відсутність методів робить це швидким.

16. Що таке стан у React?

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

17. Що таке компонент без стану?

Компонент React без стану не має стану. Це означає, що ви не можете встановити його стан за допомогою this.setState() метод і не відтворювалися. Хоча компонент без стану може мати властивості.

18. Як оновити стан у React

Ви оновлюєте стан компонента, викликаючи його this.setState() метод.

19. Поясніть строгий режим React

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

20. Що означає Lifting State Up у 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

Існує 4 основні частини Redux:

1. Магазин – Тут ви зберігаєте стан програми.
2. дію – Це події, через які програма надсилає дані до магазину Redux.
3. редуктор – Це функція, яка приймає поточний стан програми та дію як аргументи, а потім повертає новий стан як результат.
4. проміжне – Ця функція дозволяє розробнику фіксувати всі дії компонента до того, як вони досягнуть функції скорочення.

27. Що таке хуки React?

Хуки 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?

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

32. Чому ключі React важливі?

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

33. Що таке подія в React?

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

34. Поясніть що Синтетична подія Засоби

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

35. Що таке Webpack?

Webpack — це система об’єднання модулів, яка використовується для об’єднання та мінімізації файлів JavaScript і CSS. Він створений на основі Node.js і корисний під час роботи з великою кількістю файлів або ресурсів, що не містять коду, наприклад зображень і шрифтів.

36. Що таке програма create-react-app?

Create-react-app — це інструмент, який допоможе вам створити односторінкову програму React у вашому середовищі Node.js. Він генерує всі файли та папки, необхідні для запуску базової програми, і ви берете їх звідти. Для цього потрібен вузол версії 14.0.0 і npm від версії. 5.6.

Використання просте:

npx create-react-app myNewApp

cd myNewApp

npm початок

37. Чи можете ви відобразити серверну сторону за допомогою React?

Так, ви можете, хоча це може стати ресурсомістким для великих проектів. Візуалізація на стороні сервера корисна, оскільки покращує взаємодію з користувачем і покращує пошукову оптимізацію. Вам знадобиться середовище Node.js, комплектувач, наприклад Webpack, і фреймворк Next.js та Ремікс для відтворення програм React під час виконання. Рішення для інтенсивного використання ресурсів полягає у використанні генератора статичного сайту, наприклад, на основі Next.js Гетсбі.

38. Поясніть, що робить функція стрілки

Функція зі стрілкою — це просто коротший спосіб визначення функцій. Це скорочення ES6, яке замінює:

= функція() з ()=>.

Наприклад:

test = function(){

повернути «Це тест»;

}

потім стає:

тест = () => {

повернути «Це тест»;

}

або для однорядкових операторів:

test = () => «Це тест»;

39. Що таке a Маршрутизатор React?

Маршрутизатор 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. Поясніть термін Профіль у React

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

47. Поясніть термін Контекст у React

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

48. Поясніть термін Монтаж у React

Монтування в React — це процес приєднання компонента як вузла до DOM. Демонтування – навпаки.

49. Поясніть термін надання у React

Рендеринг – це процес малювання компонента. Зазвичай це відбувається, коли змінюється стан компонента і React має перемалювати UI. Якщо компонент перемальовується під час візуалізації, його дочірні компоненти також перемальовуються.

50. Поясніть термін Межа помилки у React

Межа помилки стосується компонента React, який виловлює помилки JavaScript від своїх дочірніх компонентів, реєструє помилки та відображає резервний інтерфейс користувача замість вузлів, які вийшли з ладу. Межі помилок були введені в React 16.

Висновок

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

Слід також зауважити, що ніщо не залишається незмінним, і ваша співбесіда може мати будь-який напрямок. Тому вам слід продовжувати навчання та бути в курсі подій.