Декларативність у React

ReactJunior~1 хв читання

Коротко

Декларативний підхід - це спосіб описувати що потрібно отримати, а не як це зробити. React побудований саме на декларативності: ти описуєш стан інтерфейсу, а React сам дбає про те, як ефективно оновити його в DOM.

Приклад на контрасті

Імперативний підхід (Vanilla JS)

Ти сам кажеш браузеру покроково, що робити:

javascript

const button = document.createElement('button');
button.textContent = 'Натисни мене';
button.addEventListener('click', () => {
  button.textContent = 'Натиснуто';
});
document.body.appendChild(button);

Тут ти вручну:

створюєш елемент,

додаєш текст,

навішуєш обробник,

змінюєш DOM за подією.

Це імперативно: ти описуєш як досягти результату.

Декларативний підхід (React)

Ти описуєш що має бути залежно від стану:

javascript

function Button() {
  const [clicked, setClicked] = React.useState(false);

  return (
    <button onClick={() => setClicked(true)}>
      {clicked ? 'Натиснуто' : 'Натисни мене'}
    </button>
  );
}

Тут ти не описуєш кроки оновлення DOM. Ти просто декларуєш, як має виглядати інтерфейс при різних станах (clicked).

React сам:

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

Суть декларативності в React

Імперативний стиль	Декларативний стиль
Опиши, як усе зробити	Опиши, що має бути
Керуєш DOM вручну	React сам оновлює DOM
Багато коду і побічних ефектів	Мінімум логіки роботи з DOM
Важко підтримувати складні інтерфейси	Легко розуміти і розширювати UI

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Декларативність у React

#Коротко

#Приклад на контрасті

#Імперативний підхід (Vanilla JS)

#Декларативний підхід (React)

#Суть декларативності в React