Почему React декларативный если в setState присваивается императивное значение?

Почему React декларативный если в setState присваивается императивное значение

Этот вопрос выявляет частое недопонимание разницы между декларативностью React и императивностью setState. На самом деле они разных уровней абстракции.

React декларативный на уровне UI, не на уровне состояния

Декларативность означает: "Я описываю, как должен выглядеть UI в зависимости от состояния". Императивность означает: "Я описываю, какие действия выполнять для достижения результата".

// ❌ Императивный подход (jQuery, vanilla JS)
const button = document.getElementById("button");
const counter = document.getElementById("counter");

let count = 0;

button.addEventListener("click", () => {
  count++; // Выполни действие: увеличь count
  counter.textContent = count; // Выполни действие: измени текст
  counter.style.color = count > 5 ? "red" : "black"; // Выполни действие: измени цвет
});

Здесь мы говорим: "Как то: увеличь count, обнови текст, измени цвет".

// ✅ Декларативный подход (React)
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p style={{ color: count > 5 ? "red" : "black" }}>
        Count: {count}
      </p>
    </div>
  );
}

Здесь мы говорим: "Какой результат: если count > 5, цвет красный, иначе чёрный. UI всегда соответствует состоянию".

Разные уровни абстракции

setState — это как работает React ВНУТРИ (как частная реализация) Render — это что мы видим СНАРУЖИ (декларативный API)

function Counter() {
  const [count, setCount] = useState(0);
  
  // Это ДЕКЛАРАТИВНО: описываем, как должен выглядеть UI для каждого значения count
  return (
    <div>
      <p>Count: {count}</p> {/* Когда count = 0, выводим "Count: 0" */}
                             {/* Когда count = 1, выводим "Count: 1" */}
                             {/* И так далее... */}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
  // Когда count меняется -> React ПЕРЕОЦЕНИВАЕТ выражение {count} -> вызывает render
}

setCount(count + 1) — это всего лишь команда React: пересчитай компонент с новым состоянием.

Реact сам решает:

• Когда пересчитать
• Какие части переосвидетельствовать
• Как обновить DOM

Мы не говорим "обнови paragraph", мы говорим "состояние изменилось, React, разберись сам".

Аналогия: Электронная таблица

      A       B           C
1   Value   Formula    Result
2   5       =A2*2      10
3   3       =A3*2      6

Это декларативно: ячейка C всегда = A * 2. Мы не говорим "пересчитай C1", мы описываем формулу.

Когда меняется A2:

• Таблица АВТОМАТИЧЕСКИ пересчитывает C2
• Мы только меняем A2 (как setCount)
• Таблица решает, что пересчитывать (как React)

Takeaway: setState = меняем значение (как A2) Render = описываем UI (как формула C = A*2)

React скрывает императивность

// Представьте, как React ВНУТРИ преобразует декларативный код:

function Counter() {
  const [count, setCount] = useState(0);
  
  // Что мы пишем (ДЕКЛАРАТИВНО):
  return <p>Count: {count}</p>;
  
  // Что React делает ВНУТРИ (ИМПЕРАТИВНО):
  // 1. count = 0
  // 2. Отобразить <p>Count: 0</p>
  // 3. Пользователь нажимает кнопку
  // 4. setCount(1) -> count = 1
  // 5. Пересчитать return -> <p>Count: 1</p>
  // 6. Вычислить разницу: 0 -> 1
  // 7. Обновить DOM элемент
  // 8. Повторить с пункта 3
}

React преобразует наш декларативный код в императивные команды браузеру.

setState не прерывает декларативность

Ключевой момент: setCount вызывает компонент ЗАНОВО с новым значением.

function Counter() {
  const [count, setCount] = useState(0);
  
  // При count = 0:
  // <button onClick={() => setCount(1)}>
  //   <p>Count: 0</p>
  // </button>
  
  // Нажимаем кнопку -> setCount(1) вызывает компонент снова
  
  // При count = 1 (функция вызвана снова!):
  // <button onClick={() => setCount(2)}>
  //   <p>Count: 1</p>
  // </button>
  
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </>
  );
}

Каждый вызов setCount создаёт новый "снимок" UI для конкретного состояния.

Сравнение с jQuery (полностью императивным)

// jQuery: ПОЛНОСТЬЮ ИМПЕРАТИВНЫЙ
let count = 0;
button.onClick = function() {
  count++; // Шаг 1: меняем переменную
  paragraph.textContent = "Count: " + count; // Шаг 2: меняем элемент вручную
  paragraph.style.color = count > 5 ? "red" : "black"; // Шаг 3: меняем цвет вручную
  if (count > 10) { // Шаг 4: проверяем условие
    button.disabled = true; // Шаг 5: отключаем кнопку
  }
};

Мы явно говорим каждый шаг: измени count, потом update paragraph, потом update color, и т.д.

// React: ДЕКЛАРАТИВНЫЙ
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <button onClick={() => setCount(count + 1)} disabled={count > 10}>
        Increment
      </button>
      <p style={{ color: count > 5 ? "red" : "black" }}>
        Count: {count}
      </p>
    </>
  );
}

Мы описываем: UI = функция(count). React сам разбирается как обновлять.

Внутренняя реализация React

// Упрощённо, как работает React ВНУТРИ:

class React {
  render(component) {
    // 1. Выполни функцию компонента с текущим состоянием
    const vdom = component.render();
    
    // 2. Преобразуй в реальный DOM (ИМПЕРАТИВНО)
    this.updateDOM(vdom);
  }
  
  setState(newState) {
    // 3. Обнови состояние
    this.state = newState;
    
    // 4. СНОВА выполни компонент (ДЕКЛАРАТИВНО)
    this.render(component);
    
    // 5. Сравни старый и новый VDOM (diff algorithm)
    // 6. Обнови только изменённые части DOM (ИМПЕРАТИВНО)
  }
}

Практический пример

function FormExample() {
  const [name, setName] = useState("");
  const [submitted, setSubmitted] = useState(false);
  
  // ДЕКЛАРАТИВНО: "Вот как должен выглядеть UI":
  return (
    <>
      {!submitted ? (
        <> {/* Показываем форму только если не submitted */}
          <input
            value={name}
            onChange={(e) => setName(e.target.value)} {/* setName — команда обновить состояние */}
          />
          <button onClick={() => setSubmitted(true)}>Submit</button>
        </>
      ) : (
        <p>Hello, {name}!</p> {/* Показываем приветствие если submitted */}
      )}
    </>
  );
}

Мы НЕ говорим:

• "Скрой форму"
• "Покажи сообщение"
• "Обнови paragraph"

Мы говорим:

• "Если submitted = false, показывай форму"
• "Если submitted = true, показывай приветствие"

React сам вычислит разницу и обновит DOM.

Вывод

setState кажется императивным, но на самом деле:

1. setCount(x) — это просто команда React: "Пересчитай компонент с x"
2. Компонент пересчитывается с новым значением (функция вызывается снова)
3. Вся функция — декларативное описание UI для этого состояния
4. React внутри импементативно обновляет DOM

Аналогия: setState = нажать на кнопку пересчёта в Excel, render = формулы в ячейках, React внутри = вычислитель.

Declarity на уровне компонента (что выглядит UI), императивность — это деталь реализации React (как обновлять DOM). Мы не видим и не контролируем эту реализацию.