Какой подход использует React — императивный или декларативный? В чём разница?

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

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

Пример сравнения

Рассмотрим задачу: показать список элементов и выделить активный.

Императивный подход (на чистом JavaScript):

const list = document.getElementById('list');
const items = ['A', 'B', 'C'];
items.forEach((text, index) => {
  const li = document.createElement('li');
  li.textContent = text;
  if (index === activeIndex) {
    li.classList.add('active');
  }
  list.appendChild(li);
});

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

function ItemList({ items, activeIndex }) {
  return (
    <ul>
      {items.map((text, index) => (
        <li key={index} className={index === activeIndex ? 'active' : ''}>
          {text}
        </li>
      ))}
    </ul>
  );
}

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

Преимущества декларативного подхода

• Код более предсказуемый и легче отлаживается
• Меньше шансов внести ошибки при ручном управлении DOM
• Упрощает повторное использование компонентов
• Позволяет сосредоточиться на логике приложения, а не на деталях обновления интерфейса

Вывод: Декларативный подход React делает разработку UI более продуктивной и менее подверженной ошибкам. Его стоит применять в любых проектах, где важна поддерживаемость и масштабируемость интерфейса.