React: бібліотека для побудови UI
React -- JavaScript-бібліотека від Meta для побудови інтерфейсів на основі компонентів. Найпопулярніший інструмент фронтенд-розробки: понад 40% вебсайтів з JavaScript-фреймворками використовують React. Ключові концепції: компонентний підхід, односпрямований потік даних, Virtual DOM для ефективного рендерингу та хуки для управління станом та побічними ефектами.
| Хук | Призначення | Аналог у класах |
|---|---|---|
| useState | Локальний стан компонента | this.state + setState |
| useEffect | Побічні ефекти (API, таймери) | componentDidMount/Update |
| useContext | Глобальний стан без prop drilling | Context.Consumer |
| useRef | Посилання на DOM-елемент | createRef() |
| useMemo | Мемоїзація обчислень | shouldComponentUpdate |
| useCallback | Мемоїзація функцій | bind у конструкторі |
Компоненти, JSX та життєвий цикл
Компоненти -- будівельні блоки React-додатку. Кожен компонент -- функція, що повертає JSX (JavaScript XML) -- синтаксис, схожий на HTML, але з JavaScript-виразами у фігурних дужках {}. Props передають дані від батьківського компонента до дочірнього (read-only). Children -- вкладений контент між тегами компонента. Умовний рендеринг через тернарний оператор або &&. Списки рендеряться через map() з обов\'язковим key для кожного елемента.
Правила хуків
- Виклик лише на верхньому рівні
- Не всередині циклів, умов чи вкладених функцій
- Лише у функціональних компонентах
- Кастомні хуки починаються з "use"
Екосистема React
- Next.js -- SSR, маршрутизація, API
- React Router -- клієнтська навігація
- Redux / Zustand -- глобальний стан
- React Query -- серверний стан та кешування
Стан, Virtual DOM та оптимізація
useState зберігає стан між рендерами. Зміна стану через setState викликає ре-рендер компонента та його дочірніх елементів. Virtual DOM порівнює попередній та новий стан (reconciliation) і оновлює лише змінені DOM-ноди. useEffect виконує побічні ефекти: запити до API, підписки, таймери. Масив залежностей [] контролює коли ефект повторюється. Порожній масив -- один раз при монтуванні. React.memo запобігає зайвим ре-рендерам компонентів, якщо props не змінились.
Про тест
Тест «React: базові концепції» містить 20 питань про компоненти, JSX, хуки (useState, useEffect, useContext), Virtual DOM, props, стан, life cycle та екосистему React.