Пошук уроків, статей та іншого контенту
Порівняєте розробку інтерфейсів на React із Vanilla JavaScript та визначите переваги кожного підходу.
Інтерфейс можна створювати за допомогою:
Vanilla JavaScript — звичайного JavaScript без фреймворків і бібліотек;
React — бібліотеки для побудови користувацьких інтерфейсів із компонентів.
Обидва підходи працюють у браузері та можуть створювати однакові функції: кнопки, форми, списки, модальні вікна. Відрізняється спосіб організації коду та оновлення сторінки.
У Vanilla JavaScript розробник безпосередньо працює з DOM — об’єктною моделлю документа.
Щоб змінити інтерфейс, зазвичай потрібно:
Знайти потрібний елемент.
Додати обробник події.
Змінити текст, атрибути або дочірні елементи.
Самостійно стежити за тим, щоб DOM відповідав даним програми.
Нижче — проста сторінка з лічильником:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Лічильник</title>
</head>
<body>
<h1>Лічильник</h1>
<p>Значення: <span id="count">0</span></p>
<button id="increment">Збільшити</button>
<button id="reset">Скинути</button>
<script>
const countElement = document.querySelector('#count');
const incrementButton = document.querySelector('#increment');
const resetButton = document.querySelector('#reset');
let count = 0;
incrementButton.addEventListener('click', () => {
count += 1;
countElement.textContent = count;
});
resetButton.addEventListener('click', () => {
count = 0;
countElement.textContent = count;
});
</script>
</body>
</html>Змінна count зберігає стан лічильника. Після кожної зміни потрібно вручну оновити textContent елемента span.
Для такого маленького прикладу цей підхід простий і зрозумілий. Але в складнішому інтерфейсі кількість ручних оновлень може швидко зрости.
React дає змогу описувати інтерфейс через компоненти. Компонент отримує дані та повертає опис того, що потрібно показати на сторінці.
У React важливо описати:
який інтерфейс потрібно відобразити;
які дані є станом компонента;
що має відбутися після дії користувача.
React сам оновлює потрібні частини інтерфейсу, коли стан змінюється.
Це повний приклад, який можна зберегти у файл index.html і відкрити в браузері:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лічильник на React</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Лічильник</h1>
<p>Значення: {count}</p>
<button onClick={() => setCount(count + 1)}>
Збільшити
</button>
<button onClick={() => setCount(0)}>
Скинути
</button>
</div>
);
}
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<Counter />);
</script>
</body>
</html>У цьому прикладі:
Counter — React-компонент;
useState(0) створює стан із початковим значенням 0;
count містить поточне значення;
setCount змінює стан;
{count} вставляє значення стану в інтерфейс;
після виклику setCount React повторно відображає компонент із новим значенням.
У React не потрібно вручну знаходити span і змінювати його textContent. Компонент описує, що потрібно показати для поточного значення count.
Імперативний код описує послідовність дій:
Знайти елемент.
Зчитати або змінити значення.
Додати обробник.
Оновити DOM.
Розробник сам керує кожною зміною сторінки.
Декларативний код описує бажаний результат:
Якщо
countдорівнює поточному значенню стану, покажи це значення на сторінці.
Розробник змінює стан, а React синхронізує інтерфейс із цим станом.
Це особливо корисно, коли на сторінці багато пов’язаних елементів. Замість ручного оновлення кожного елемента можна змінити стан компонента.
Переваги:
не потребує додаткових бібліотек;
добре підходить для невеликих сторінок;
дає прямий контроль над DOM;
сторінка може мати мінімальний розмір і просту структуру;
зручно вивчати базові можливості браузера.
Недоліки:
у великих застосунках DOM-логіка швидко ускладнюється;
потрібно самостійно стежити за синхронізацією даних та інтерфейсу;
повторне використання частин інтерфейсу може бути менш зручним;
зміни в різних частинах сторінки можуть залежати одна від одної.
Переваги:
інтерфейс можна розділити на повторно використовувані компоненти;
стан і відображення зручно організовувати разом;
код складних інтерфейсів легше структурувати;
React автоматично оновлює інтерфейс після зміни стану;
компоненти можна ізолювати та тестувати окремо.
Недоліки:
потрібно вивчити React і його основні поняття;
для простих сторінок React може бути зайвим;
проєкт має додаткові залежності та інструменти;
неправильна структура компонентів може ускладнити код замість його спрощення.
У Vanilla JavaScript повторне використання інтерфейсу часто реалізують через функції, шаблони або окремі модулі. Це можливо, але організацію такої структури розробник створює самостійно.
У React компонент природно є окремою частиною інтерфейсу.
function Button({ children, onClick }) {
return (
<button onClick={onClick}>
{children}
</button>
);
}
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Значення: {count}</p>
<Button onClick={() => setCount(count + 1)}>
Збільшити
</Button>
<Button onClick={() => setCount(0)}>
Скинути
</Button>
</div>
);
}Button — універсальний компонент. Його можна використовувати в різних місцях і передавати йому різний текст та обробник події.
Значення, передані компоненту ззовні, називаються props. У прикладі children і onClick — це props компонента Button.
Vanilla JavaScript часто достатньо, якщо:
сторінка невелика;
на ній мало інтерактивних елементів;
потрібно додати просту поведінку до вже готової HTML-сторінки;
не потрібна складна система компонентів;
важливо уникнути додаткових залежностей.
Приклади:
простий лендінг;
меню відкриття та закриття;
форма з базовою перевіркою;
невеликий віджет;
сторінка з кількома кнопками.
React може бути зручнішим, якщо:
застосунок має багато інтерактивних частин;
інтерфейс складається з повторюваних компонентів;
дані часто змінюються;
різні частини сторінки залежать від одного стану;
над проєктом працює команда;
застосунок потрібно розділити на зрозумілі незалежні частини.
Приклади:
панель керування;
інтернет-магазин;
застосунок із фільтрами та списками;
чат;
система керування завданнями;
складна форма з кількома кроками.
React не є обов’язковим для будь-якого сайту. Якщо сторінка має лише статичний текст і одну кнопку, Vanilla JavaScript може бути простішим рішенням.
У React не варто постійно знаходити елементи через querySelector і змінювати їх вручну. Основний спосіб оновлення інтерфейсу — зміна стану компонента.
Звичайна змінна JavaScript не змушує React повторно відобразити компонент:
let count = 0;Для даних, від зміни яких залежить інтерфейс, використовують стан:
const [count, setCount] = React.useState(0);Змінювати стан потрібно через функцію-оновлювач, наприклад setCount, а не прямим присвоєнням.
Коротший код не завжди означає кращий код. Для маленької задачі Vanilla JavaScript може бути коротшим, а для великого інтерфейсу React допомагає підтримувати структуру та повторне використання.
Vanilla JavaScript напряму працює з DOM і вимагає вручну оновлювати елементи.
React описує інтерфейс через компоненти та синхронізує його зі станом.
Vanilla JavaScript добре підходить для невеликих і простих сторінок.
React зручний для складних застосунків із багатьма станами та повторюваними частинами.
React не замінює JavaScript, а використовує його для організації динамічних інтерфейсів.
Вибір залежить від розміру проєкту, кількості інтерактивної логіки та потреби в компонентах.