Чому React називають декларативною бібліотекою?

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

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

Імперативний vs декларативний підхід

Щоб зрозуміти це, порівняємо два підходи:

Імперативний стиль (звичайний JavaScript)

Ти покроково кажеш браузеру, як оновити інтерфейс:

javascript

const button = document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", () => {
  button.textContent = "Clicked!";
});
document.body.appendChild(button);

Тут ти явно керуєш DOM: створюєш елементи, додаєш слухачів, оновлюєш текст.

Декларативний стиль (React)

Ти описуєш кінцевий стан інтерфейсу, а React сам вирішує, як його досягти:

javascript

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

  return (
    <button onClick={() => setClicked(true)}>
      {clicked ? "Clicked!" : "Click me"}
    </button>
  );
}

Тут ти не торкаєшся DOM вручну. Ти просто кажеш: "якщо clicked - true, покажи текст 'Clicked!'". React сам порівняє старий і новий стан та оновить лише потрібну частину.

Чому це зручно

Код простіше читати й підтримувати (ти описуєш, що має бути, а не як змінити DOM).
Менше помилок під час роботи зі станом.
Легше масштабувати великі інтерфейси.

Аналогія

Імперативний код - це як сказати роботу:

"Візьми ложку, набери суп, піднеси до рота, нахили, поверни ложку назад".

Декларативний код - це як сказати:

"Погодуй мене супом".

Робот (у нашому випадку React) сам розбирається, як саме це зробити.

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

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

Premium

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

Чому React називають декларативною бібліотекою?

#Імперативний vs декларативний підхід

#Імперативний стиль (звичайний JavaScript)

#Декларативний стиль (React)

#Чому це зручно

#Аналогія