React является декларативным - что это значит?

При изучении React вы, скорее всего не раз слышали, что он является декларативным. Но что означает декларативность и что противоположно декларативности?

Декларативный vs императивный

Противоположностью декларативности является императивность. Это не специфические для React термины. Они применимы к программированию в целом.

Если кратко, то с точки зрения пользовательских интерфейсов:

• императивный подход - это когда вы обеспечиваете пошаговую мутацию DOM до достижения желаемого пользовательского интерфейса.
• декларативный подход - это когда вы описываете конечное состояние желаемого пользовательского интерфейса.
  

Давайте посмотрим на примеры

Допустим, нам нужно создать такой пользовательский интерфейс:

Императивный подход

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

const btn = document.querySelector('.btn');
const container = document.querySelector('.container');

const listner1 = () => {
  btn.style.background = '#DB2777';
  btn.innerText = 'Точно?';
  btn.removeEventListener('click', listner1);
  btn.addEventListener('click', listner2);
}

const listner2 = () => {
  container.innerText = '🦄';
  btn.style.display = 'none';
}

btn.addEventListener('click', listner1);

Вот песочница с примером, чтобы можно было потыкаться:

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

Вот пример декларативного решения React.

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

const [scene, setScene] = useState('button');

if (scene === 'button') {
  return (
    <Button
      blue
      onClick={() => setScene('question')}
    >
      Покажи единорожку
    </Button>
  );
}

if (scene === 'question') {
  return (
    <Button
      pink
      onClick={() => setScene('unicorn')}
    >
      Точно?
    </Button>
  );
}

if (scene === 'unicorn') {
  return <span>🦄</span>
}

Мы можем структурировать компонент по-другому. Это не делает его менее декларативным.

const [scene, setScene] = useState('button');

if (scene === 'button' || scene === 'question') {
  return (
    <Button
      blue={scene === 'button'}
      pink={scene === 'question'}
      onClick={() => setScene(scene === 'button' ? 'question' : 'unicorn')}
    >
      {scene === 'button' ? 'Покажи единорожку' : 'Точно?'}
    </Button>
  );
}


if (scene === 'unicorn') {
  return <span>🦄</span>
}

Декларативным этот подход делает то, что мы описываем конечный пользовательский интерфейс для любого данного представления состояния. Это противоположно предоставлению ручных мутаций DOM для перехода между состояниями пользовательского интерфейса (императив).

На этом сегодня все, надеюсь вам это было полезно!