Стан компонентів

Імперативний підхід використовує звичайні змінні для збереження та оновлення даних, тоді як реактивний використовує «реактивні» змінні, створювані за допомогою хуків, для керування станом в компонентах React.

Імперативний підхід використовує тільки класові компоненти, а реактивний - тільки функціональні.

Імперативне програмування використовує стилізований підхід до створення компонентів, тоді як реактивне - декларативний

Імперативний підхід використовує тільки функціональні компоненти, а реактивний - тільки класові.

Хук useState використовується тільки для зміни значення стану в класових компонентах

Хук useState автоматично визначає та оновлює стан без задання початкового значення

Хук useState створює пару значення та функцію для її оновлення, ініціалізується за допомогою значення по замовчуванню, і це дозволяє створити та оновлювати стан у функціональних компонентах

Хук useState приймає в якості аргументів початкове значення реактивної змінної і користувацької функції, яка дозволяє оновлювати реактивну змінну

Запуститься перерендер компонента, але із затримкою

Не відбудеться перерендер компонента, React оптимізує ігнорування подібних оновлень

З'явиться помилка виконання (runtime error) через неявну рекурсію

Виникне помилка на етапі компіляції

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

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

Перерендер відбудеться, якщо setCount викликається з тим самим значенням, що і поточний стан

Перерендер відбудеться, якщо setCount викликається з флагом rerender: true

Перерендер завжди відбудеться при кожному виклику setCount, незалежно від змін у стані об'єкта

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

Перерендер відбудеться тільки у випадку, якщо setCount викликається з новим об'єктом, а не тим самим посиланням на об'єкт

Перерендер відбудеться тільки у випадку, якщо компонент використовує хук useEffect, і у списку залежностей вказана відповідна реактивна змінна

Порівняння об'єктів у JavaScript базується на порівнянні посилань (references) на об'єкти, тобто чи посилаються обидва операнди на одну і ту ж область пам'яті

Порівняння об'єктів у JavaScript ґрунтується на порівнянні їхнього вмісту, тобто на порівнянні значень всіх полів

Обидва вищезазначені варіанти правильні

counterObj.value = counterObj.value + 1;

setCounterObj((prevObj) => ({ ...prevObj, value: prevObj.value + 1 }));

setCounterObj(counterObj);

setCounterObj(counterObj);

import React, { useState } from 'react';

const Counter = () => {

const [count, setCount] = useState({ value: 0 });

const increment = () => {

count.value = count.value + 1;

setCount(count);

};

return (

<div>

<p>Count: {count.value}</p>

<button onClick={increment}>Increment</button>

</div>

);

};

export default Counter;

import React, { useState } from 'react';

const Counter = () => {

const [count, setCount] = useState({ value: 0 });

const increment = () => {

setCount({ value: count.value + 1 });

};

return (

<div>

<p>Count: {count.value}</p>

<button onClick={increment}>Increment</button>

</div>

);

};

export default Counter;

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

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

Розбиття додатку на компоненти робить код більш зрозумілим та легким для читання

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

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

Класові компоненти мають білше методів життєвого циклу, функціональні використовують механізм хуків

Стан можна використовувати лише у класових компонентах

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