javascript - 我无法理解这个 useEffect 是如何通过提取运行的

Question

我在 useEffect Hook 中有一个 fetch。我在其中的不同部分进行控制台登录并得到一些奇怪的结果

const [name, setName] = useState("Placeholder Name");
const [lat, setLat] = useState("Placeholder Lat");
const [long, setLong] = useState("Placeholder Long");
const [counter, setCounter] = useState(0);
const [loading, setLoading] = useState(true);

useEffect(() => {
  console.log("top level");
  fetch("https://api.wheretheiss.at/v1/satellites/25544")
    .then(res => res.json())
    .then(data => {
      console.log("inside fetch", name, long, lat);
      setName(data.name);
      setLat(data.latitude);
      setLong(data.longitude);
      setLoading(false);
    });
});

// Result on mount
top level 
inside fetch Placeholder Name Placeholder Long Placeholder Lat 
top level 
top level 
top level 
top level 
inside fetch iss Placeholder Long Placeholder Lat 
inside fetch iss 71.768808134445 27.26618722337
top level 
top level 
inside fetch iss 71.815373509259 27.312786482746

当组件安装时，我知道 useEffect 将在状态值更新时运行。该 API 端点有 1 秒的限制，因此效果将在其当前值与返回值匹配时停止运行。

我特别困惑的是为什么在调用“获取”控制台日志之前连续记录了 4 次“顶级”。这可能与异步获取有关，但我希望有人能澄清。

Answer 1

每次您使用 useState 回调之一设置状态时，组件都会重新呈现。

您连续 4 次设置状态值，因此组件会非常快速地连续 4 次重新渲染。每次渲染时，它都会调用您的 useEffect Hook ，因为您没有依赖项数组。所以它是 console.logging 连续 4 次因为函数的其余部分是异步的