Главная3 курс UX/UI React1 занятие. Знакомство с React. Первое приложение2. Декларативное и императивное программирование
1 занятие

2. Декларативное и императивное программирование

Императивное программирование (Imperative)

Акцент на том, КАК сделать

Вы описываете конкретные шаги для достижения результата, управляя каждым действием.

Пример на JavaScript:

// Умножение каждого элемента массива на 2 (императивно)
const numbers = [1, 2, 3];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}
console.log(doubled); // [2, 4, 6]

Вы сами управляете циклом и индексами.

Пример манипуляции DOM (императивно):

// Создание кнопки и обработчика события
const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', () => {
  button.style.backgroundColor = 'blue';
});
document.body.appendChild(button);

Вы явно создаете элемент, назначаете обработчик и меняете стиль.

Декларативное программирование (Declarative)

Акцент на том, ЧТО нужно получить

Вы описываете результат, а детали реализации скрыты (часто через абстракции).

Пример на JavaScript:

// Тот же пример с умножением (декларативно)
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

Метод map абстрагирует перебор массива. Вы говорите «преобразовать массив», а не как это делать.

React и декларативный подход

React поощряет декларативный стиль через:

Компоненты (описание UI на основе состояния).

Виртуальный DOM (React сам решает, как обновлять интерфейс).

Пример императивного подхода в DOM (без React):

// Прямое изменение DOM (императивно)
const element = document.getElementById('title');
element.textContent = 'New Title';
element.style.color = 'red';

Тот же пример в React (декларативно):

// Описание компонента
function Title({ text, color }) {
  return <h1 style={{ color }}>{text}</h1>;
}

// Использование
<Title text="New Title" color="red" />

Вы не управляете DOM вручную. React обновляет его на основе пропсов (text, color).

React использует декларативный подход, чтобы упростить работу с интерфейсами: вы описываете, как должен выглядеть UI для каждого состояния, а React синхронизирует DOM с этими состояниями.

Далее