Побочный эффект исправления несвежего закрытия путем передачи функции в setCount

Question

У меня есть вопрос по поводу устаревания.

Код:

import React, { useState } from "react";

export default function App() {
  const [flag, setFlag] = useState(false);
  const [count, setCount] = useState(0);

  if (!flag) {
    console.log("before", count);
    setCount(count => count + 2);
    setCount(count => count + 3);
    setCount(count => count + 1);
    setFlag(true);
    console.log("after", count);
  }

  return (
    <div>
      <p>Render: {flag + ""}</p>
      <p>Render: {count}</p>
    </div>
  );
}

Вывод:

Render: true

Render: 6

Здесь я установил setCount закрытия устаревания на

setCount(count => count + 2);
setCount(count => count + 3);
setCount(count => count + 1);

Но в консоли я получаю

before 0
after 0

, где я ожидаю получить

before 0
after 6

Можете ли вы объяснить, почему в журнале консоли счетчик по-прежнему равен 0?

Демонстрация здесь: https://codesandbox.io/s/crazy-joliot-xnmrp

Спасибо!

Answer 1

count является постоянным; это не может измениться. Цель setCount состоит не в том, чтобы изменить переменную из предыдущего рендера, а в том, чтобы дать команду реагировать на рендеринг снова. При следующем рендеринге будет создана новая переменная с новым значением.

Если вы хотите увидеть новое значение, поместите ваш console.log в тело компонента, и вы увидите его перерисовать с новым значением.

Answer 2

Переменная count устанавливается для каждого рендера. При первом рендере счетчик равен 0 и остается 0 до выхода из функции. Вызов setCount при первом выполнении рендеринга / функции устанавливает значение счетчика для следующего вызова рендеринга / вызова функции, и во время его выполнения (второй рендеринг) флаг const теперь имеет значение false, поэтому журнал консоли нового значения счетчика никогда не выполняется.

Эффект можно увидеть, если поместить журналы консоли вне блока! Flag