Почему компонент функции снова рендерится с помощью setCount (1)

Question

Код:

https://codesandbox.io/s/amazing-sound-d20rz?file=/src/App.js

Конверт:

• реагировать (v16.13.1)
• реагировать (v16.12.0)

import React, { useState, useEffect } from "react";
import "./styles.css";

function AppRenderLog() {
  console.log("app render");

  return null;
}

export default function App() {
  const [count, setCount] = useState(2);

  useEffect(() => {
    console.log("do something");
  });

  setTimeout(() => {
    setCount(1);
    setCount(1);
    setCount(1);
  });

  console.log("render by setCont(1)");
  return (
    <div className="App">
      {count}
      <AppRenderLog />
    </div>
  );
}

Ожидаемый выход:

render by setCont(1)
app render
do something
render by setCont(1)
app render
do something

Токовый выход:

render by setCont(1)
app render
do something
render by setCont(1)
app render
do something
render by setCont(1) // why? re-render App Component but effectCallback not exec, AppRenderLog Component not re-render
// why others not re-render <App />

Answer 1

Понятия не имею, что вы пытаетесь выполнить sh, но если вы добавите второй файл console.log в эффект, он не будет дважды регистрировать это.

• Первый набор журналов - от монтажа компонентов.
• Второй набор журналов - от обновления состояния, поставленного в очередь в setTimeout.
• Третий (и последующий) набор журналов делает не происходит, потому что состояние на самом деле не обновляется (т. е. ему присваивается то же значение). Вы можете проверить это, установив начальное состояние на 1, то есть useState(1), и вы увидите только монтажный набор журналов.

Код:

import React, { useState, useEffect } from "react";
import "./styles.css";

function AppRenderLog() {
  console.log("app render");
  return null;
}

export default function App() {
  const [count, setCount] = useState(2);

  useEffect(() => {
    console.log("do something");
  });

  setTimeout(() => {
    setCount(1);
    setCount(1);
    setCount(1);
  });

  useEffect(() => {
    console.log("render by setCont(1)");
  });

  return (
    <div className="App">
      {count}
      <AppRenderLog />
    </div>
  );
}

Console Log Выходные данные

app render 
do something 
render by setCont(1) 
app render 
do something 
render by setCont(1)

Выход журнала консоли при начальном состоянии 1

app render 
do something 
render by setCont(1)