https://github.com/getfrontend/react-100-questions-ua
Запитання з React для підготовки до співбесіди 💙💛
https://github.com/getfrontend/react-100-questions-ua
interview-questions react react-questions reactjs
Last synced: 9 months ago
JSON representation
Запитання з React для підготовки до співбесіди 💙💛
- Host: GitHub
- URL: https://github.com/getfrontend/react-100-questions-ua
- Owner: getFrontend
- Created: 2024-05-02T20:18:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-25T20:38:57.000Z (almost 2 years ago)
- Last Synced: 2025-04-06T20:12:48.690Z (over 1 year ago)
- Topics: interview-questions, react, react-questions, reactjs
- Homepage:
- Size: 563 KB
- Stars: 39
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Запитання з React для підготовки до співбесіди 💙💛
### Список запитань
| № | Назва запитання |
| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 1 | [Що таке React?](#що-таке-react) |
| 2 | [Які основні переваги використання React?](#які-основні-переваги-використання-react) |
| 3 | [Що таке JSX?](#що-таке-jsx) |
| 4 | [Які основні відмінності між компонентами класів і функціональними компонентами в React?](#які-основні-відмінності-між-компонентами-класів-і-функціональними-компонентами-в-react) |
| 5 | [Що таке Virtual DOM, та як він працює?](#що-таке-virtual-dom-та-як-він-працює) |
| 6 | [Які методи життєвого циклу компонентів ви знаєте?](#які-методи-життєвого-циклу-компонентів-ви-знаєте) |
| 7 | [Що таке "стан" (state) компонента в React?](#що-таке-стан-state-компонента-в-react) |
| 8 | [Як оновити стан компонента?](#як-оновити-стан-компонента) |
| 9 | [Що таке пропси (props) у React?](#що-таке-пропси-props-у-react) |
| 10 | [У чому різниця між станом і пропсами в React?](#у-чому-різниця-між-станом-і-пропсами-в-react) |
| 11 | [Як обробляти події в React?](#як-обробляти-події-в-react) |
| 12 | [Що таке умовний рендеринг у React?](#що-таке-умовний-рендеринг-у-react) |
| 13 | [Як передати дані між компонентами вгору та вниз за ієрархією?](#як-передати-дані-між-компонентами-вгору-та-вниз-за-ієрархією) |
| 14 | [Як виконати HTTP-запити в React?](#як-виконати-http-запити-в-react) |
| 15 | [Що таке контекст (context) у React і для чого він використовується?](#що-таке-контекст-context-у-react-і-для-чого-він-використовується) |
| 16 | [Як реалізувати PureComponent?](#як-реалізувати-purecomponent) |
| 17 | [Що таке ключі (keys) у списках React-елементів і навіщо вони потрібні?](#що-таке-ключі-keys-у-списках-react-елементів-і-навіщо-вони-потрібні) |
| 18 | [Як використовувати стилі в React-компонентах?](#як-використовувати-стилі-в-react-компонентах) |
| 19 | [Що таке «керовані компоненти» (controlled components)?](#що-таке-керовані-компоненти-controlled-components) |
| 20 | [Що таке «некеровані компоненти» (uncontrolled components)?](#що-таке-некеровані-компоненти-uncontrolled-components) |
| 21 | [Що таке «підйом стану» (lifting state up)?](#що-таке-підйом-стану-lifting-state-up) |
| 22 | [Як створити форму в React?](#як-створити-форму-в-react) |
| 23 | [Як реалізувати умовне додавання класу до елемента в React?](#як-реалізувати-умовне-додавання-класу-до-елемента-в-react) |
| 24 | [Що таке фрагменти (fragments) у React?](#що-таке-фрагменти-fragments-у-react) |
| 25 | [Яким чином можна оптимізувати продуктивність React-додатку?](#яким-чином-можна-оптимізувати-продуктивність-react-додатку) |
| 26 | [Що таке HOC (Higher-Order Component) у React?](#що-таке-hoc-higher-order-component-у-react) |
| 27 | [В чем разница между HOC и компонентами с рендер-пропсами (render props)?](#в-чем-разница-между-hoc-и-компонентами-с-рендер-пропсами-render-props) |
| 28 | [Що таке рефи (refs) у React і як вони використовуються?](#що-таке-рефи-refs-у-react-і-як-вони-використовуються) |
| 29 | [Як реалізувати анімацію в React-додатку?](#як-реалізувати-анімацію-в-react-додатку) |
| 30 | [Як працює механізм "контексту" (context) для передачі даних?](#як-працює-механізм-контексту-context-для-передачі-даних) |
| 31 | [Що таке портали (portals) у React?](#що-таке-портали-portals-у-react) |
| 32 | [Як реалізувати lazy loading у React з використанням Suspense?](#як-реалізувати-lazy-loading-у-react-з-використанням-suspense) |
| 33 | [Які нововведення було додано в React 16?](#які-нововведення-було-додано-в-react-16) |
| 34 | [Як використовувати React DevTools для налагодження програми?](#як-використовувати-react-devtools-для-налагодження-програми) |
| 35 | [Що таке "хуки" (hooks) у React і для чого вони використовуються?](#що-таке-хуки-hooks-у-react-і-для-чого-вони-використовуються) |
| 36 | [Як створити власний хук у React?](#як-створити-власний-хук-у-react) |
| 37 | [Як обробляти помилки в React-додатку за допомогою Error Boundary?](#як-обробляти-помилки-в-react-додатку-за-допомогою-error-boundary) |
| 38 | [Як працює алгоритм узгодження (reconciliation) у React?](#як-працює-алгоритм-узгодження-reconciliation-у-react) |
| 39 | [Які популярні бібліотеки для управління станом ви знаєте, крім вбудованого useState?](#які-популярні-бібліотеки-для-управління-станом-ви-знаєте-крім-вбудованого-usestate) |
| 40 | [Яким чином можна оптимізувати рендеринг компонентів у React?](#яким-чином-можна-оптимізувати-рендеринг-компонентів-у-react) |
| 41 | [Що таке "глибоке порівняння" (deep comparison) у контексті оптимізації продуктивності React?](#що-таке-глибоке-порівняння-deep-comparison-у-контексті-оптимізації-продуктивності-react) |
| 42 | [Як використовувати memoization для оптимізації компонентів?](#як-використовувати-memoization-для-оптимізації-компонентів) |
| 43 | [Які патерни використання Redux ви знаєте?](#які-патерни-використання-redux-ви-знаєте) |
| 44 | [Як працює бібліотека React Router?](#як-працює-бібліотека-react-router) |
| 45 | [Що таке SSR (Server-Side Rendering) та як він відрізняється від CSR (Client-Side Rendering)?](#що-таке-ssr-server-side-rendering-і-як-він-відрізняється-від-csr-client-side-rendering) |
| 46 | [Як реалізувати асинхронне завантаження компонентів за допомогою React Router?](#як-реалізувати-асинхронне-завантаження-компонентів-за-допомогою-react-router) |
| 47 | [Які переваги дає використання Redux для управління станом застосунку?](#які-переваги-дає-використання-redux-для-управління-станом-застосунку) |
| 48 | [Що таке Redux Thunk?](#що-таке-redux-thunk) |
| 49 | [Як працює Redux Saga?](#як-працює-redux-saga) |
| 50 | [Як реалізувати ледаче завантаження Redux-редьюсерів?](#як-реалізувати-ледаче-завантаження-redux-редьюсерів) |
| 51 | [Що таке "нормалізація стану" (state normalization) у контексті керування станом програми?](#що-таке-нормалізація-стану-state-normalization-у-контексті-керування-станом-програми) |
| 52 | [Як створити анімований перехід між сторінками за допомогою React Router?](#як-створити-анімований-перехід-між-сторінками-за-допомогою-react-router) |
| 53 | [Як працюють CSS-модулі (CSS Modules) у React?](#як-працюють-css-модулі-css-modules-у-react) |
| 54 | [Що таке Styled Components, та як воно використовується?](#що-таке-styled-components-і-як-воно-використовується) |
| 55 | [Як передати дані з сервера на клієнт під час використання SSR у React?](#як-передати-дані-з-сервера-на-клієнт-під-час-використання-ssr-у-react) |
| 56 | [Які переваги та недоліки мають функціональні компоненти порівняно з компонентами класів?](#які-переваги-та-недоліки-мають-функціональні-компоненти-порівняно-з-компонентами-класів) |
| 57 | [Які особливості мають хуки useEffect та useLayoutEffect?](#які-особливості-мають-хуки-useeffect-та-uselayouteffect) |
| 58 | [Як оновити стан компонента після виконання асинхронної операції?](#як-оновити-стан-компонента-після-виконання-асинхронної-операції) |
| 59 | [Що таке CSS-in-JS, та які бібліотеки ви знаєте для реалізації цієї концепції в React?](#що-таке-css-in-js-і-які-бібліотеки-ви-знаєте-для-реалізації-цієї-концепції-в-react) |
| 60 | [Як реалізувати drag-and-drop функціональність у React-додатку?](#як-реалізувати-drag-and-drop-функціональність-у-react-додатку) |
| 61 | [Як реалізувати аутентифікацію та авторизацію в React-додатку?](#як-реалізувати-аутентифікацію-та-авторизацію-в-react-додатку) |
| 62 | [Як працює маршрутизація на стороні клієнта в React?](#як-працює-маршрутизація-на-стороні-клієнта-в-react) |
| 63 | [Що таке «code splitting» (поділ коду) в React?](#що-таке-code-splitting-поділ-коду-в-react) |
| 64 | [Як керувати станом між компонентами, що не мають близького зв'язку?](#як-керувати-станом-між-компонентами-що-не-мають-близького-звязку) |
| 65 | [Які засоби надає React для тестування компонентів?](#які-засоби-надає-react-для-тестування-компонентів) |
| 66 | [Як працює "ледаче завантаження" (lazy loading) компонентів у React?](#як-працює-ледаче-завантаження-lazy-loading-компонентів-у-react) |
| 67 | [Що таке "синтетичні події" (synthetic events) у React?](#що-таке-синтетичні-події-synthetic-events-у-react) |
| 68 | [Як організувати перевикористання компонентів у React?](#як-організувати-перевикористання-компонентів-у-react) |
| 69 | [Що таке "високонавантажені компоненти" (high-order components) та як їх створити?](#що-таке-високонавантажені-компоненти-high-order-components-та-як-їх-створити) |
| 70 | [Яких принципів слід дотримуватися під час іменування компонентів у React?](#яких-принципів-слід-дотримуватися-під-час-іменування-компонентів-у-react) |
| 71 | [Як реалізувати анімацію переходів між компонентами в React Router?](#як-реалізувати-анімацію-переходів-між-компонентами-в-react-router) |
| 72 | [Що таке "глибоке перенесення стану" (deep state transfer) у React?](#що-таке-глибоке-перенесення-стану-deep-state-transfer-у-react) |
| 73 | [Як реалізувати модальне вікно в React-додатку?](#як-реалізувати-модальне-вікно-в-react-додатку) |
| 74 | [Що таке SSR (Server-Side Rendering) і навіщо його використовувати?](#що-таке-ssr-server-side-rendering-і-навіщо-його-використовувати) |
| 75 | [Які переваги дає використання CSS-модулів (CSS Modules)?](#які-переваги-дає-використання-css-модулів-css-modules) |
| 76 | [Що таке "віртуалізація списку" (list virtualization) та як вона реалізується в React?](#що-таке-віртуалізація-списку-list-virtualization-і-як-вона-реалізується-в-react) |
| 77 | [Як реалізувати include компонентів у React?](#як-реалізувати-include-компонентів-у-react) |
| 78 | [Що таке "консиліація" (reconciliation) у контексті React?](#що-таке-консиліація-reconciliation-у-контексті-react) |
| 79 | [Як обробляти форми в React?](#як-обробляти-форми-в-react) |
| 80 | [Альтернативи Redux для керування станом у React-додатках?](#альтернативи-redux-для-керування-станом-у-react-додатках) |
| 81 | [Як працює «гаряча заміна модулів» (Hot Module Replacement) у середовищі розробки React-додатків?](#як-працює-гаряча-заміна-модулів-hot-module-replacement-у-середовищі-розробки-react-додатків) |
| 82 | [Що таке «мемоізація» (memoization) та як вона може бути застосована в React?](#що-таке-мемоізація-memoization-і-як-вона-може-бути-застосована-в-react) |
| 83 | [Як реалізувати зв'язування даних (data binding) у React?](#як-реалізувати-зв'язування-даних-data-binding-у-react) |
| 84 | [Що таке «передача даних через контекст» (context passing) у React?](#що-таке-передача-даних-через-контекст-context-passing-у-react) |
| 85 | [Як реалізувати перетягування (drag-and-drop) елементів у React-додатку?](#як-реалізувати-перетягування-drag-and-drop-елементів-у-react-додатку) |
| 86 | [Що таке «обчислювані властивості» (computed properties) у контексті React?](#що-таке-обчислювані-властивості-computed-properties-у-контексті-react) |
| 87 | [Як реалізувати «ледаче завантаження» (lazy loading) зображень у React?](#як-реалізувати-ледаче-завантаження-lazy-loading-зображень-у-react) |
| 88 | [Що таке «рендер-пропси» (render props) та як вони використовуються?](#що-таке-рендер-пропси-render-props-і-як-вони-використовуються) |
| 89 | [Як працює «ледаче завантаження» (lazy loading) сторонніх бібліотек у React?](#як-працює-ледаче-завантаження-lazy-loading-сторонніх-бібліотек-у-react) |
| 90 | [Що таке «реактивне програмування» (reactive programming) у контексті React?](#що-таке-реактивне-програмування-reactive-programming-у-контексті-react) |
| 91 | [Як обробляти помилки під час використання хуків (hooks) у React?](#як-обробляти-помилки-під-час-використання-хуків-hooks-у-react) |
| 92 | [Що таке «інкапсуляція стану» (state encapsulation) у React?](#що-таке-інкапсуляція-стану-state-encapsulation-у-react) |
| 93 | [Як реалізувати анімований перехід між компонентами в React Native?](#як-реалізувати-анімований-перехід-між-компонентами-в-react-native) |
| 94 | [Що таке «стабільні ідентифікатори» (stable keys) і навіщо вони потрібні в React?](#що-таке-стабільні-ідентифікатори-stable-keys-і-навіщо-вони-потрібні-в-react) |
| 95 | [Як оновити стан компонента після зміни props?](#як-оновити-стан-компонента-після-зміни-props) |
| 96 | [Що таке «компоненти вищого порядку» (Higher-Order Components, HOC) у React?](#що-таке-компоненти-вищого-порядку-higher-order-components-hoc-у-react) |
| 97 | [Які є патерни для роботи з асинхронністю в React?](#які-є-патерни-для-роботи-з-асинхронністю-в-react) |
| 98 | [Що таке «реактивний потік даних» (reactive data flow) у контексті React?](#що-таке-реактивний-потік-даних-reactive-data-flow-у-контексті-react) |
| 99 | [Що таке Next.js, і різниця між Next.js і React?](#що-таке-nextjs-і-різниця-між-nextjs-і-react) |
### Що таке React?
**React** - це бібліотека JavaScript, розроблена компанією Facebook, яка використовується для створення користувацьких інтерфейсів.
Вона дає змогу розбивати призначений для користувача інтерфейс на невеликі компоненти, які можуть оновлюватися незалежно один від одного, що забезпечує ефективне управління станом й оновленнями на веб-сторінці.
React використовує віртуальне DOM (Document Object Model) для оптимізації продуктивності, даючи змогу ефективно оновлювати тільки частини інтерфейсу, що змінилися.
Однією з головних концепцій React є "односпрямований потік даних", що полегшує відстеження змін й управління станом програми. React широко використовується в розробці веб-додатків і мобільних додатків з використанням фреймворка React Native.
[⬆ Повернутися до списку](#список-запитань)
### Які основні переваги використання React?
Використання React має кілька ключових переваг:
1. **Віртуальний DOM:** React використовує віртуальний DOM для ефективного управління оновленнями інтерфейсу. Це дає змогу мінімізувати операції безпосередньо з реальним DOM, що підвищує продуктивність програми.
2. **Компонентний підхід:** React дає змогу розбивати користувацький інтерфейс на безліч дрібних компонентів. Ці компоненти можуть бути повторно використані, що спрощує розробку, тестування та обслуговування коду.
3. **Односпрямований потік даних:** React забезпечує односпрямований потік даних, що спрощує відстеження змін стану та робить код більш передбачуваним і легко підтримуваним.
4. **Оголошувальний підхід:** React використовує оголошувальний стиль програмування, який дає змогу описувати, який вигляд має мати інтерфейс залежно від стану. Це робить код більш читабельним і зрозумілим.
5. **Екосистема та співтовариство:** React має велику й активну спільноту розробників, що забезпечує безліч готових рішень, бібліотек та інструментів для розробки.
6. **React Native:** Для розробки мобільних додатків можна використовувати React Native, який дає змогу використовувати React для створення нативних мобільних додатків під різні платформи.
7. **Висока продуктивність:** Завдяки віртуальному DOM та оптимізаціям, React здатний забезпечувати хорошу продуктивність навіть під час роботи з великими та складними інтерфейсами.
[⬆ Повернутися до списку](#список-запитань)
### Що таке JSX?
**JSX** (JavaScript XML) - це розширення синтаксису JavaScript, що використовується в React для опису структури користувацького інтерфейсу.
Цей синтаксис дає змогу об'єднувати код JavaScript і HTML-подібні елементи в одному місці, що робить створення компонентів React більш інтуїтивним і читабельним.
JSX дає змогу вставляти JavaScript-вирази всередині тегів, укладаючи їх у фігурні дужки. Наприклад:
```jsx
const name = "Микола";
const element =
Привіт, {name}
;
```
У цьому прикладі змінна name вставлена всередині JSX-елемента за допомогою фігурних дужок.
JSX також дає змогу описувати користувацькі компоненти користувача у вигляді елементів, що робить код більш структурованим і зручним для читання:
```jsx
function Greeting(props) {
return
Привіт, {props.name}!
;
}
```
JSX-код потрібно перетворити на звичайний JavaScript-код перед тим, як він буде виконаний у браузері. Для цього використовуються інструменти компіляції, зазвичай включені в складальний процес проекту на React.
[⬆ Повернутися до списку](#список-запитань)
### Які основні відмінності між компонентами класів і функціональними компонентами в React?
У React існують два основні способи створення компонентів: з використанням класів і з використанням функціональних компонентів. Ось основні відмінності між ними:
#### Компоненти класів:
1. **Синтаксис:** Компоненти класів визначаються як класи, що розширюють базовий клас React.Component.
2. **Стан (state):** Компоненти класів мають вбудовану підтримку для стану (state), що дає їм змогу зберігати та керувати даними всередині компонента.
3. **Методи життєвого циклу:** Компоненти класів мають широкий набір методів життєвого циклу (наприклад, componentDidMount, componentDidUpdate, componentWillUnmount), які дають змогу реагувати на різні етапи життя компонента.
4. **Пропси (props):** Пропси передаються в компоненти класів через атрибути під час використання. Вони доступні через this.props всередині методів компонента.
#### Функціональні компоненти:
1. **Синтаксис:** Функціональні компоненти визначаються як звичайні функції.
2. **Стан (state):** Спочатку функціональні компоненти не підтримували стан. Однак із появою хуків (hooks) у React (починаючи з React 16.8) функціональні компоненти тепер можуть використовувати стан та інші можливості, що раніше були доступні тільки компонентам класів.
3. **Хуки (hooks):** Функціональні компоненти можуть використовувати хуки, як-от useState, useEffect та інші, для керування станом, ефектами та іншими аспектами.
4. **Пропси (props):** Пропси також передаються функціональним компонентам, але доступні вони як аргументи функції.
Загалом, з появою хуків, функціональні компоненти стали кращим вибором для більшості випадків у React, оскільки вони забезпечують простіший синтаксис, який можна прочитати, а також спрощений спосіб керування станом та ефектами.
[⬆ Повернутися до списку](#список-запитань)
### Що таке Virtual DOM, та як він працює?
Virtual DOM (віртуальне DOM) - це концепція, яку використовують у бібліотеках і фреймворках, як-от React, для оптимізації оновлень реального DOM (Document Object Model) і підвищення продуктивності веб-додатків.
Реальний DOM - це представлення структури веб-сторінки в браузері у вигляді дерева об'єктів. Коли стан програми змінюється та потрібне оновлення інтерфейсу, браузер виконує зміни безпосередньо в реальному DOM. Однак багаторазові та часті оновлення реального DOM можуть бути витратними з погляду продуктивності, особливо для великих і складних інтерфейсів.
Віртуальний DOM розв'язує цю проблему таким чином:
1. Створення віртуального DOM: Під час зміни стану застосунку React створює віртуальне представлення DOM-структури, яка є легковажною копією реального DOM.
2. Порівняння віртуального DOM: React порівнює попередній стан віртуального DOM із новим станом, виявляючи, які частини інтерфейсу було змінено.
3. Генерація різниці (патч): На основі порівняння React створює мінімальний набір змін, необхідних для оновлення віртуального DOM згідно з новим станом.
4. Застосування змін: Створені зміни застосовуються до реального DOM тільки одним оновленням, що дає змогу уникнути множинних маніпуляцій із реальним DOM.
Використання віртуального DOM дає змогу значно поліпшити продуктивність, оскільки оновлення реального DOM відбуваються тільки в необхідних місцях. Це також робить розробку більш зручною та передбачуваною, оскільки розробнику не потрібно вручну керувати безліччю змін на реальному DOM.
[⬆ Повернутися до списку](#список-запитань)
### Які методи життєвого циклу компонентів ви знаєте?
У React компоненти проходять через низку етапів свого "життєвого циклу", включно з такими методами:
1. **constructor(props)**: Викликається під час створення компонента. Тут відбувається ініціалізація стану та прив'язка методів.
2. **componentDidMount()**: Викликається після того, як компонент було вставлено в DOM. Часто використовується для завантаження даних із сервера.
3. **componentDidUpdate(prevProps, prevState)**: Викликається після оновлення компонента. Дозволяє реагувати на зміни пропсів або стану.
4. **shouldComponentUpdate(nextProps, nextState)**: Дозволяє оптимізувати оновлення компонента, повертаючи false, якщо оновлення не потрібне.
5. **componentWillUnmount()**: Викликається перед видаленням компонента з DOM. Використовується для очищення ресурсів.
6. **static getDerivedStateFromProps(props, state)**: Рідко використовується. Дозволяє оновити стан на основі нових пропсів.
7. **getSnapshotBeforeUpdate(prevProps, prevState)**: Рідко використовується. Дозволяє отримати інформацію з DOM перед його оновленням.
8. **componentDidCatch(error, info)**: Використовується для обробки помилок у дочірніх компонентах.
Це лише короткий огляд методів життєвого циклу компонентів у React.
[⬆ Повернутися до списку](#список-запитань)
### Що таке "стан" (state) компонента в React?
"Стан" (state) у React є об'єктом, який містить дані, що впливають на те, як компонент відображається та поводиться. Стан є одним із фундаментальних понять React і використовується для зберігання інформації, яка може змінюватися під час роботи програми.
Коли стан компонента змінюється, React автоматично перерендерує компонент, щоб відобразити новий стан. Стан зазвичай ініціалізується в методі constructor() компонента, і для його оновлення використовується метод setState().
Приклад:
```jsx
import React, { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0, // Початковий стан
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
Счетчик: {this.state.count}
Збільшити
);
}
}
export default Counter;
```
У цьому прикладі компонент Counter має стан count, який оновлюється при кліці на кнопку. Під час виклику setState(), React оновить стан і перерендерить компонент, відображаючи нове значення count.
[⬆ Повернутися до списку](#список-запитань)
### Як оновити стан компонента?
У React для оновлення стану компонента слід використовувати метод setState(). Цей метод приймає або об'єкт з оновленнями стану, або функцію, яка повертає об'єкт з оновленнями. Під час виклику setState(), React оновить стан компонента та перерендерує його, щоб відобразити новий стан.
Приклад використання setState():
```jsx
import React, { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
// Оновлення стану з використанням об'єкта
this.setState({ count: this.state.count + 1 });
};
decrement = () => {
// Оновлення стану з використанням функції
this.setState((prevState) => {
return { count: prevState.count - 1 };
});
};
render() {
return (
Счетчик: {this.state.count}
Збільшити
Зменшити
);
}
}
export default Counter;
```
У цьому прикладі increment() і decrement() оновлюють стан count за допомогою setState(). Важливо використовувати функції під час оновлення стану, особливо якщо новий стан залежить від попереднього стану, щоб уникнути проблем з асинхронністю.
[⬆ Повернутися до списку](#список-запитань)
### Що таке пропси (props) у React?
"Пропси" (props) у React - це механізм передачі даних від батьківського компонента до дочірнього. Вони являють собою атрибути, які задаються при створенні компонента та не можуть бути змінені самим компонентом, який їх отримує. Пропси використовуються для передачі інформації про стан або конфігурацію компонента.
Приклад використання пропсів:
```jsx
import React from "react";
function Welcome(props) {
return
Вітаю, {props.name}!
;
}
const App = () => {
return ;
};
export default App;
```
У цьому прикладі компонент **Welcome** приймає пропс **name** і використовує його для виведення персоналізованого привітання. Компонент **App** передає значення "Ірина" в пропс **name** компонента **Welcome**.
Пропси передаються у вигляді об'єкта та доступні як властивості (**props**) всередині дочірнього компонента.
Використання пропсів дає змогу створювати більш гнучкі та перевикористовувані компоненти, адже можна налаштовувати їхню поведінку та відображення ззовні.
[⬆ Повернутися до списку](#список-запитань)
### У чому різниця між станом і пропсами в React?
Стан (**state**) і пропси (**props**) - це два основні концепти в React, які використовуються для управління даними в компонентах. Вони мають різні цілі та характеристики:
#### Стан (state):
1. Стан - це внутрішні дані компонента, які можуть змінюватися під час виконання.
2. Визначається та керується самим компонентом, у якому він знаходиться.
3. Зміна стану викликає перерендеринг компонента, щоб відобразити новий стан.
4. Доступно тільки для компонента, у якому було визначено стан.
5. Оновлюється з використанням методу setState().
#### Пропси (props):
1. Пропси - це дані, що передаються від батьківського компонента до дочірнього компонента.
2. Не можна змінити пропси всередині дочірнього компонента. Вони вважаються "тільки для читання".
3. Пропси слугують для налаштування та передавання даних у компоненти.
4. Використовуються для зв'язку між різними компонентами та передавання інформації вниз по ієрархії.
5. Не спричиняють перерендерінг у разі їхньої зміни.
Коротко кажучи, стан призначений для зберігання та управління даними, що змінюються всередині компонента, тоді як пропси призначені для передачі даних від батьківського компонента до дочірнього. Обидва ці концепти допомагають створювати динамічні та перевикористовувані інтерфейси в React додатках.
[⬆ Повернутися до списку](#список-запитань)
### Як обробляти події в React?
У React обробка подій відбувається з використанням синтаксису, аналогічного обробці подій у нативному JavaScript, але з деякими відмінностями. Ось як обробляти події в React:
1. **Створення методу обробки події:** Створіть метод усередині компонента, який буде виконуватися при виникненні події. Назва методу зазвичай починається з префікса "handle", за яким слідує ім'я події або описове ім'я.
2. **Прив'язка методу до елемента:** Прив'яжіть створений метод до елемента, який генеруватиме подію. Це робиться за допомогою JSX, вказавши метод як значення атрибута події.
3. **Використання аргументів:** Усередині методу обробки події ви можете отримати доступ до об'єкта події та використовувати його властивості, такі як `target`, щоб отримати інформацію про подію.
Приклад обробки кліка:
```jsx
import React, { Component } from "react";
class Button extends Component {
handleClick = () => {
console.log("Кнопка була натиснута");
};
render() {
return Натисни на мене;
}
}
export default Button;
```
У цьому прикладі метод `handleClick` викликається при кліці на кнопку, виводячи повідомлення в консоль.
Важливо зауважити, що під час передачі методу обробки події як атрибута JSX, не слід викликати його за допомогою круглих дужок (наприклад, не пишіть `onClick={this.handleClick()}`), адже це викличе виконання методу одразу під час рендерингу.
[⬆ Повернутися до списку](#список-запитань)
### Що таке умовний рендеринг у React?
Умовний рендеринг у React - це підхід, за якого вирішується, чи повинен компонент або його частина відображатися на основі будь-якої умови. Це дає змогу динамічно контролювати, які елементи інтерфейсу будуть показані або приховані залежно від стану застосунку або інших чинників.
Приклад умовного рендерингу:
```jsx
import React, { Component } from "react";
class Greeting extends Component {
render() {
const isLoggedIn = this.props.isLoggedIn;
if (isLoggedIn) {
return
Вітаємо вас на нашому сайті!
;
} else {
return Будь ласка, увійдіть до системи!
;
}
}
}
export default Greeting;
```
У цьому прикладі компонент Greeting залежно від значення пропса isLoggedIn рендерить різні заголовки. Якщо isLoggedIn дорівнює true, відображається привітання, в іншому разі - запрошення до входу в систему.
Умовний рендеринг можна реалізувати також за допомогою тернарного оператора:
```jsx
class Greeting extends Component {
render() {
const isLoggedIn = this.props.isLoggedIn;
return (
{isLoggedIn ? (
Привіт, Сергій!
) : (
Будь ласка, авторизуйтеся на сайті.
)}
);
}
}
```
Умовний рендеринг особливо корисний, коли потрібно адаптувати інтерфейс на основі динамічних даних або станів, таких як авторизація користувача, наявність даних та інші умови.
[⬆ Повернутися до списку](#список-запитань)
### Як передати дані між компонентами вгору та вниз за ієрархією?
У React дані можуть передаватися між компонентами вгору та вниз по ієрархії з використанням пропсів (props) і колбеків (callback функцій). Ось як це працює:
#### Передача даних вниз за ієрархією (від батька до дочірнього компонента):
Пропси (props): Батьківський компонент передає дані своєму дочірньому компоненту через пропси. Дочірній компонент може отримати доступ до цих даних як властивості (props).
Приклад:
```jsx
// Батьківський компонент
import React from "react";
import ChildComponent from "./ChildComponent";
const ParentComponent = () => {
const data = "Дані для дочірнього компонента";
return ;
};
// Дочірній компонент
import React from "react";
const ChildComponent = (props) => {
return
{props.dataProp}
;
};
export default ChildComponent;
```
#### Передавання даних вгору за ієрархією (від дочірнього компонента до батька):
Колбеки (callback функції): Батьківський компонент передає функцію як пропса дочірньому компоненту. Дочірній компонент може викликати цю функцію, передаючи їй дані назад вгору по ієрархії.
Приклад:
```jsx
// Батьківський компонент
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";
const ParentComponent = () => {
const [receivedData, setReceivedData] = useState("");
const handleDataChange = (data) => {
setReceivedData(data);
};
return (
Отримані дані: {receivedData}
);
};
// Дочірній компонент
import React from "react";
const ChildComponent = (props) => {
const sendDataToParent = () => {
props.onDataChange("Дані від дочірнього компонента");
};
return Надіслати дані;
};
export default ChildComponent;
```
Це дає змогу дочірньому компоненту впливати на дані та стан батьківського компонента.
Використовуючи цей підхід, ви можете ефективно передавати й оновлювати дані між компонентами вгору та вниз по ієрархії.
[⬆ Повернутися до списку](#список-запитань)
### Як виконати HTTP-запити в React?
Для виконання HTTP-запитів у React зазвичай використовують бібліотеки, такі як axios або вбудований fetch. Ось як виконати GET-запит з використанням бібліотеки axios:
1. Встановіть бібліотеку axios за допомогою npm або yarn:
```
npm install axios
```
або
```
yarn add axios
```
2. У компоненті, де ви хочете виконати HTTP-запит:
```jsx
import React, { useState, useEffect } from "react";
import axios from "axios";
const DataFetching = () => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
axios
.get("https://api.example.com/data")
.then((response) => {
setData(response.data);
setIsLoading(false);
})
.catch((error) => {
setError(error.message);
setIsLoading(false);
});
}, []); // Порожній масив залежностей, щоб запит виконався тільки один раз
if (isLoading) {
return
Завантаження...
;
}
if (error) {
return
Error: {error}
;
}
return (
Fetched Data
{JSON.stringify(data, null, 2)}
);
};
export default DataFetching;
```
У цьому прикладі ми використовуємо хук useState для управління станом даних, завантаження та помилок. Хук useEffect використовується для виконання HTTP-запиту під час монтування компонента. Залежно від результату запиту, ми оновлюємо стан для відображення даних, завантаження або помилки.
[⬆ Повернутися до списку](#список-запитань)
### Що таке контекст (context) у React і для чого він використовується?
Контекст (context) у React - це механізм, який дає змогу передавати дані глибоко вниз по ієрархії компонентів, минаючи пропси (props). Він використовується, коли певні дані потрібні в безлічі компонентів, і передача через кожен компонент стає незручною.
Контекст дає змогу створити «контекстне» оточення, в якому компоненти можуть отримувати доступ до даних без необхідності явно передавати їх через пропси. Це особливо корисно для глобальних даних, таких як дані автентифікації, теми оформлення та інші загальні стани.
Для створення контексту використовуються два елементи: провайдер (Provider) і споживач (Consumer).
Приклад використання контексту:
```jsx
import React, { createContext, useContext } from "react";
// Створюємо контекст
const UserContext = createContext();
// Компонент, який постачає дані
const UserProvider = ({ children }) => {
const user = { name: "Serhii", role: "developer" };
return {children};
};
// Компонент, що використовує контекст
const UserInfo = () => {
const user = useContext(UserContext);
return (
Name: {user.name}
Role: {user.role}
);
};
// Головний компонент, який обертає додаток у провайдер даних
const App = () => {
return (
);
};
export default App;
```
У цьому прикладі контекст UserContext використовується для передачі інформації про користувача від UserProvider до UserInfo, минаючи пропси. Компонент UserInfo використовує хук useContext, щоб отримати доступ до даних контексту.
Контекст слід використовувати обережно та тільки там, де це справді необхідно, оскільки це може ускладнити розуміння взаємодії компонентів та ускладнити налагодження.
[⬆ Повернутися до списку](#список-запитань)
### Як реалізувати PureComponent?
Щоб створити **PureComponent** у React, ви можете використовувати класи або функціональні компоненти з хуками.
1. З використанням класів:
```jsx
import React, { PureComponent } from "react";
class MyPureComponent extends PureComponent {
render() {
return
{/* Код компоненту */};
}
}
export default MyPureComponent;
```
2. З використанням функціональних компонентів і хуків:
```jsx
import React, { memo } from "react";
const MyPureComponent = () => {
return
{/* Код компоненту */};
};
export default memo(MyPureComponent);
```
Обидва варіанти **PureComponent** автоматично порівнюють пропси та стан, і перемальовують компонент тільки в разі змін даних. Це може істотно поліпшити продуктивність, уникаючи непотрібних перемальовок.
[⬆ Повернутися до списку](#список-запитань)
### Що таке ключі (keys) у списках React-елементів і навіщо вони потрібні?
У React, ключі (keys) - це спеціальні атрибути, які використовуються під час рендерингу списків компонентів або елементів. Вони допомагають React оптимізувати процес оновлення та перемальовування компонентів у списках.
Ключі призначаються кожному елементу в списку та мають бути унікальними серед своїх сусідніх елементів. Коли React оновлює список компонентів, він використовує ключі для визначення, які елементи були додані, видалені або змінені. Без ключів React буде перемальовувати та оновлювати всі елементи в списку, що може призвести до погіршення продуктивності.
Приклад використання ключів:
```jsx
import React from "react";
const TodoList = ({ data }) => {
return (
- {todo.text}
{data.map((todo) => (
))}
);
};
export default TodoList;
```
У цьому прикладі кожному елементу списку завдань (todo) присвоюється унікальний ключ (todo.id). Це дає змогу React ефективно оновлювати тільки змінені елементи, мінімізуючи кількість перемальовок.
Ключі особливо важливі під час роботи зі списками, які можуть змінюватися в часі, наприклад, під час додавання, видалення або переупорядкування елементів.
[⬆ Повернутися до списку](#список-запитань)
### Як використовувати стилі в React-компонентах?
У React для стилізації компонентів можна використовувати кілька підходів: вбудовані стилі (inline styles), стилі з використанням CSS-класів і бібліотеки стилів. Ось як це робиться:
#### 1. Вбудовані стилі (Inline Styles):
Вбудовані стилі являють собою об'єкт JavaScript, де ключі - це назви CSS-властивостей, а значення - відповідні значення властивостей.
```jsx
import React from "react";
const MyComponent = () => {
const styles = {
backgroundColor: "blue",
color: "yellow",
padding: "12px",
borderRadius: "20px",
};
return
};
export default MyComponent;
```
#### 2. Стилі з використанням CSS-класів:
Ви можете визначити CSS-класи в окремих файлах і додати їх до елементів у компонентах.
```jsx
// styles.css
.myClass {
background-color: blue;
color: yellow;
padding: 12px;
border-radius: 20px;
}
// MyComponent.jsx
import React from 'react';
import './styles.css';
const MyComponent = () => {
return
};
export default MyComponent;
```
#### 3. Бібліотеки стилів:
Існує безліч бібліотек для стилізації React-компонентів, таких як Styled Components, Emotion, CSS Modules та інші. Ці бібліотеки надають синтаксис для створення компонентів зі стилями всередині коду.
```jsx
// Styled Components
import React from "react";
import styled from "styled-components";
const StyledDiv = styled.div`
background-color: blue;
color: yellow;
padding: 12px;
border-radius: 20px;
`;
const MyComponent = () => {
return Стилізований компонент;
};
export default MyComponent;
```
Вибір методу залежить від уподобань та вимог проєкту. Важливо звернути увагу на підтримку класів, перевикористання стилів і простоту супроводу під час вибору підходу.
[⬆ Повернутися до списку](#список-запитань)
### Що таке «керовані компоненти» (controlled components)?
«Керовані компоненти» (controlled components) - це поняття, пов'язане з управлінням станом форм і введення даних у React. У керованих компонентах значення елемента введення (наприклад, текстового поля або чекбокса) контролюється станом React компонента, а не DOM елементом.
Коли компонент контролює значення введення, він зберігає це значення у своєму стані й оновлює його за допомогою обробників подій (наприклад, у разі зміни тексту в полі введення). Це дає змогу мати повний контроль над даними форми та легко реагувати на зміни.
Приклад керованого компонента з текстовим полем:
```jsx
import React, { useState } from "react";
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState("");
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
return (
Введене значення: {inputValue}
);
};
export default ControlledComponent;
```
У цьому прикладі значення текстового поля inputValue пов'язане зі станом компонента. Коли значення текстового поля змінюється, викликається обробник handleInputChange, який оновлює стан і, отже, значення текстового поля.
Використання керованих компонентів забезпечує передбачуваність стану, спрощує взаємодію з даними та дає змогу виконувати валідацію та інші операції над введеними даними перед їхнім надсиланням на сервер.
[⬆ Повернутися до списку](#список-запитань)
### Що таке «некеровані компоненти» (uncontrolled components)?
«Некеровані компоненти» (uncontrolled components) - це поняття, протилежне керованим компонентам, і воно відноситься до управління станом форм і введення даних у React. У разі некерованих компонентів, значення елемента введення (наприклад, input або textarea) зберігається безпосередньо в DOM, і React компонент не керує цим значенням.
Замість використання стану компонента для зберігання значення елемента введення, некеровані компоненти звертаються до DOM безпосередньо для отримання та оновлення значення.
Приклад некерованого компонента з текстовим полем:
```jsx
import React, { useRef } from "react";
const UncontrolledComponent = () => {
const inputRef = useRef(null);
const handleButtonClick = () => {
alert("Значення в полі введення: " + inputRef.current.value);
};
return (
Показати значення
);
};
export default UncontrolledComponent;
```
У цьому прикладі значення текстового поля не зберігається в стані компонента. Натомість ми використовуємо useRef для отримання посилання на DOM-елемент і потім отримуємо його значення через inputRef.current.value.
Некеровані компоненти можуть бути корисними, коли у вас є особливі випадки або вимоги, де контроль над станом через React не є оптимальним підходом. Однак, у більшості випадків, керовані компоненти забезпечують більш передбачуване та зручне управління даними у формах.
[⬆ Повернутися до списку](#список-запитань)
### Що таке «підйом стану» (lifting state up)?
«Підйом стану» (lifting state up) - це патерн у React, який передбачає переміщення стану з дочірніх компонентів до батьківських компонентів, щоб розділяти й керувати станом на вищому рівні та передавати його через пропси.
Цей підхід особливо корисний, коли кілька компонентів повинні мати доступ до одного й того самого стану або коли стан повинен бути синхронізований між різними частинами програми.
Приклад із підйомом стану:
```jsx
import React, { useState } from "react";
const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
return (
Введіть температуру в градусах {scale}:
onTemperatureChange(e.target.value)}
/>
);
};
const Calculator = () => {
const [celsius, setCelsius] = useState("");
const [fahrenheit, setFahrenheit] = useState("");
const handleCelsiusChange = (value) => {
setCelsius(value);
setFahrenheit((value * 9) / 5 + 32);
};
const handleFahrenheitChange = (value) => {
setFahrenheit(value);
setCelsius(((value - 32) * 5) / 9);
};
return (
);
};
export default Calculator;
```
У цьому прикладі компонент Calculator піднімає стан температур із TemperatureInput компонентів. При зміні температури в одному з вводів, стан піднімається в батьківський компонент Calculator, який потім оновлює стан для іншого вводу, забезпечуючи синхронізацію температур в обох шкалах.
«Підйом стану» допомагає спростити керування даними та їхню синхронізацію між компонентами, особливо під час роботи з компонентами на різних рівнях ієрархії.
[⬆ Повернутися до списку](#список-запитань)
### Як створити форму в React?
Створення форми в React охоплює використання HTML-елементів форми в JSX та управління введенням даних за допомогою стану. Ось як це робиться:
#### Створення компонента форми:
Спочатку створіть компонент форми та визначте елементи форми всередині нього, такі як текстові поля, чекбокси, кнопки тощо.
```jsx
import React, { useState } from "react";
const MyForm = () => {
const [formData, setFormData] = useState({
name: "",
email: "",
// інші поля форми
});
const handleInputChange = (event) => {
const { name, value } = event.target;
setFormData({
...formData,
[name]: value,
});
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(formData);
// відправляємо дані на сервер або виконуємо інші операції
};
return (
Ім'я:
Email:
{/* Інші поля форми */}
Отправить
);
};
export default MyForm;
```
#### Управління станом:
У цьому прикладі використовується хук useState, щоб керувати станом даних форми. Обробник handleInputChange викликається при зміні полів введення та оновлює стан форми.
#### Обробка надсилання:
Обробник handleSubmit викликається під час надсилання форми. У цьому випадку ми запобігаємо стандартній поведінці надсилання форми на сервер за допомогою event.preventDefault(), щоб продемонструвати обробку даних на клієнті.
#### Прив'язка значень до полів:
Значення полів форми пов'язані зі станом форми. value елементів введення встановлюється рівним значенням зі стану, а при зміні полів викликається обробник handleInputChange.
#### Надсилання даних:
Після заповнення форми та натискання кнопки відправлення, дані можна використовувати для відправлення на сервер, виконання операцій або інших необхідних дій.
[⬆ Повернутися до списку](#список-запитань)
### Як реалізувати умовне додавання класу до елемента в React?
У React ви можете умовно додати клас до елемента, використовуючи тернарний оператор або функцію для визначення класового імені. Ось приклади обох підходів:
#### З використанням тернарного оператора:
```jsx
import React from "react";
const MyComponent = ({ isActive }) => {
return (
);
};
export default MyComponent;
```
У цьому прикладі клас active буде додано до елемента, якщо isActive дорівнює true, інакше буде додано клас inactive.
#### З використанням функції для визначення класу:
```jsx
import React from "react";
const MyComponent = ({ isActive }) => {
const getClassNames = () => {
return isActive ? "active" : "inactive";
};
return
};
export default MyComponent;
```
Тут ми визначаємо функцію getClassNames, яка повертає клас залежно від значення isActive.
Якщо ви хочете додати кілька класів, ви можете використовувати об'єднання рядків або бібліотеки, такі як classnames.
```jsx
import React from "react";
import classnames from "classnames";
const MyComponent = ({ isActive, isHighlighted }) => {
const classNames = classnames({
active: isActive,
highlighted: isHighlighted,
});
return
};
export default MyComponent;
```
У цьому прикладі classnames бібліотека дає змогу додати кілька класів на основі об'єкта, де ключі - це назви класів, а значення - умови, за яких клас буде додано.
[⬆ Повернутися до списку](#список-запитань)
### Що таке фрагменти (fragments) у React?
Фрагменти (fragments) - це механізм у React, який дає змогу вам групувати дочірні елементи без необхідності створювати зайві DOM-елементи. Вони дають змогу повернути кілька елементів із компонента без обертання їх у додатковий DOM-контейнер.
До появи фрагментів, якщо ви хотіли повернути кілька елементів із компонента, вам доводилося обгортати їх у додатковий елемент (наприклад,
З використанням фрагментів, це має чистіший та ефективніший вигляд:
```jsx
import React from "react";
const MyComponent = () => {
return (
<>
>
);
};
export default MyComponent;
```
Фрагменти можуть бути оголошені за допомогою порожніх <> і >, а всередині них ви можете розміщувати будь-яку кількість дочірніх елементів.
Фрагменти особливо корисні, коли вам потрібно повернути кілька елементів з компонента, наприклад, з умовних блоків або маппінгу масивів, і ви хочете уникнути створення додаткових контейнерів у DOM.
[⬆ Повернутися до списку](#список-запитань)
### Яким чином можна оптимізувати продуктивність React-додатку?
Оптимізація продуктивності React-додатку - це важливий аспект, який може суттєво вплинути на користувацький досвід. Ось деякі способи оптимізації продуктивності:
**1. Використовуйте керовані компоненти:**
Використовуйте керовані компоненти для контролю над даними у формах і введенні. Це дасть змогу мінімізувати непотрібні перемальовування та полегшить обробку введених даних.
**2. Використовуйте ключі (keys) правильно:**
Під час рендерингу списків компонентів переконайтеся, що в кожного елемента є унікальний ключ. Це дасть змогу React ефективно оновлювати тільки змінені елементи.
**3. Ледаче завантаження (Code Splitting):**
Розділіть ваш застосунок на невеликі фрагменти та використовуйте механізм ледачого завантаження для завантаження компонентів тільки тоді, коли вони дійсно потрібні.
**4. Мемоїзація:**
Використовуйте хуки useMemo та useCallback для кешування обчислень та уникнення непотрібних перерахунків під час рендерингу.
**5. Пакети компонентів (Component Libraries):**
Використовуйте готові пакети компонентів (наприклад, Material-UI, Ant Design), які оптимізовані та протестовані з урахуванням продуктивності.
**6. Віртуалізація списків:**
Під час роботи з великими списками даних використовуйте бібліотеки віртуалізації (наприклад, react-virtualized), щоб рендерити тільки видимі елементи списку.
**7. Оптимізація рендерінгу:**
Уникайте непотрібних рендерів компонентів, використовуйте shouldComponentUpdate (у класових компонентах) або React.memo (у функціональних компонентах) для запобігання зайвим перемальовуванням.
**8. Уникайте глибокої вкладеності:**
Постарайтеся не створювати надто глибоку ієрархію компонентів, щоб зменшити час рендерингу та перерахунку.
**9. Аналіз продуктивності:**
Використовуйте інструменти, як-от React DevTools та браузерні інструменти продуктивності, щоб аналізувати й оптимізувати продуктивність вашого застосунку.
**10. Серверний рендеринг (Server-Side Rendering, SSR):**
Якщо це доречно для вашого застосунку, розгляньте можливість використання SSR для поліпшення початкового завантаження та SEO.
Зверніть увагу, що оптимізація продуктивності залежить від конкретного контексту вашого застосунку. Рекомендується використовувати інструменти профілювання та вимірювати продуктивність після кожної оптимізації, щоб переконатися, що вона справді призводить до поліпшень.
[⬆ Повернутися до списку](#список-запитань)
### Що таке HOC (Higher-Order Component) у React?
Високорівневий компонент (Higher-Order Component, HOC) - це патерн у React, який дає змогу повторно використовувати логіку компонентів, абстрагуючи її від самих компонентів. HOC не є частиною API React, це радше патерн композиції компонентів.
HOC - це функція, яка приймає компонент і повертає новий компонент із додатковою логікою. HOC дають змогу винести загальні функціональні або структурні аспекти компонентів і повторно використовувати їх із різними компонентами.
Приклад HOC:
```jsx
import React from "react";
const withLogger = (WrappedComponent) => {
return class WithLogger extends React.Component {
componentDidMount() {
console.log("Рендерінг компонента");
}
render() {
return ;
}
};
};
const MyComponent = () => {
return
};
const EnhancedComponent = withLogger(MyComponent);
export default EnhancedComponent;
```
У цьому прикладі withLogger - це HOC, який додає логування в метод componentDidMount. Потім компонент MyComponent обгортається HOC, створюючи EnhancedComponent.
HOC дозволяє:
- Розширювати функціональність компонентів без зміни самих компонентів.
- Перевикористовувати код і логіку між різними компонентами.
- Створювати загальні патерни для логування, аутентифікації, обробки помилок та інших аспектів.
Однак, з розвитком React і появою хуків, частина функціональності HOC тепер може бути реалізована з використанням хуків, таких як useEffect, useContext та інших. У більшості випадків, використання хуків є кращим.
[⬆ Повернутися до списку](#список-запитань)
### В чем разница между HOC и компонентами с рендер-пропсами (render props)?
Як HOC (Високорівневий компонент, Higher-Order Component), так і компоненти з рендер-пропсами представляють патерни в React для повторного використання логіки між компонентами. Однак, у них є відмінності в тому, як їх реалізовано та як вони використовуються.
#### HOC (Higher-Order Component):
- HOC - це функція, яка приймає компонент і повертає новий компонент із додатковою логікою.
- HOC можна використовувати як обгортку для компонентів, додаючи до них загальну функціональність.
- HOC виконуються під час створення компонента, і логіка, додана HOC, застосовується під час кожного рендеринга.
- У HOC є доступ до життєвих циклів компонента та його стану.
- Приклад HOC - connect з бібліотеки Redux, який пов'язує компоненти зі сховищем стану.
#### Компоненти з рендер-пропсами (Render Props Components):
- Компонент із рендер-пропсами - це компонент, який приймає функцію як властивість і викликає цю функцію для рендерингу чого-небудь.
- Компонент із рендер-пропсами дає змогу передавати логіку рендерингу безпосередньо в компонент, який використовує цей компонент із рендер-пропсами.
- Логіка рендерингу передається через функцію-пропс і може бути використана за потреби.
- Компонент з рендер-пропсами не має доступу до життєвих циклів батьківського компонента, але може мати доступ до стану через пропси.
- Приклад компонента з рендер-пропсами - компоненти Mouse або Toggle в документації React.
Вибір між HOC і компонентами з рендер-пропсами залежить від конкретної ситуації та вподобань розробника. Обидва патерни дають змогу досягти повторного використання логіки, але з різними підходами.
[⬆ Повернутися до списку](#список-запитань)
### Що таке рефи (refs) у React і як вони використовуються?
Refs (скорочення від references) - це механізм у React, який дає змогу отримувати прямий доступ до DOM-елементів або компонентів, створених у React. Вони дають змогу вам звертатися до елементів, оновлювати їхні властивості та викликати методи компонентів без використання пропсів або стану.
Refs корисні, коли вам потрібно взаємодіяти з DOM елементами безпосередньо або отримувати доступ до методів і властивостей компонентів, які не доступні через пропси.
#### Створення рефів
Існує два способи створення рефів:
1. З використанням `React.createRef()` (class components):
```jsx
import React, { Component } from "react";
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return
}
}
```
2. З використанням колбека (functional components):
```jsx
import React, { useRef } from "react";
const MyComponent = () => {
const myRef = useRef();
return
};
```
#### Використання рефів
Рефи можуть використовуватися для доступу до DOM-елементів або компонентів:
```jsx
class MyComponent extends Component {
constructor(props) {
super(props);
this.myInputRef = React.createRef();
}
focusInput() {
this.myInputRef.current.focus(); // Фокус на input елементі
}
render() {
return ;
}
}
```
```jsx
const MyComponent = () => {
const myButtonRef = useRef();
const handleClick = () => {
myButtonRef.current.textContent = "Кнопку натиснуто";
};
return (
Натисни мене
);
};
```
#### Які є нюанси?
- Використовуйте рефи з обережністю, оскільки це може порушити концепцію управління станом у React.
- У більшості випадків краще уникати використання рефів і віддавати перевагу роботі з даними через стан і пропси.
[⬆ Повернутися до списку](#список-запитань)
### Як реалізувати анімацію в React-додатку?
У React анімації можуть бути реалізовані з використанням різних методів і бібліотек. Ось кілька способів, як це можна зробити:
**1. CSS Анімації та Транзиції:**
Ви можете використовувати CSS для створення анімацій і транзицій. Додайте класи з анімацією або транзицією до елементів і змінюйте їхні стилі за допомогою JavaScript або стану компонентів.
**2. React Transition Group:**
Це бібліотека, яка полегшує створення анімацій під час додавання, оновлення або видалення компонентів. Вона надає компоненти для управління анімаціями на рівні компонентів.
**3. React Spring:**
Це потужна бібліотека для фізичних анімацій (пружинних анімацій). Вона надає хуки та компоненти для створення плавних анімацій.
**4. CSS-in-JS бібліотеки:**
Бібліотеки, як-от styled-components і emotion, дають змогу створювати стилі та анімації безпосередньо в JavaScript. Вони надають механізми для створення анімацій на основі стану компонентів.
**5. Бібліотеки для анімації SVG:**
Якщо ви працюєте з SVG, ви можете використовувати бібліотеки, як-от react-spring-svg, для анімування SVG елементів.
**6. Бібліотеки для анімованих переходів:**
Якщо вам потрібні складні анімовані переходи між різними сторінками, ви можете використовувати бібліотеки, такі як react-router-transition, які надають механізми для анімації переходів між маршрутами.
Приклад використання React Transition Group:
```jsx
import React from "react";
import { CSSTransition } from "react-transition-group";
import "./MyComponent.css";
const MyComponent = ({ show }) => {
return (
);
};
export default MyComponent;
```
У цьому прикладі, коли show дорівнює true, компонент буде анімований під час появи та зникнення за допомогою CSS класів і транзицій.
Зверніть увагу: При створенні анімацій, особливо складних, слід враховувати продуктивність і подбати про те, щоб анімації не сповільнювали роботу вашої програми.
[⬆ Повернутися до списку](#список-запитань)
### Як працює механізм "контексту" (context) для передачі даних?
Механізм "контексту" (context) в React дає змогу передавати дані глибоко вниз по дереву компонентів без явної передачі через пропси на кожному рівні. Це особливо корисно, коли кілька компонен�