React Hooks重新渲染

Question

我有一个功能组件，它有两个状态：

let [data, setData] = useState([]);
let [loading, setLoading] = useState(false);

我还有一个简单的useEffect钩子，它调用一个返回promise的函数：

useEffect(() => {
someFunctionThatReturnsAPromise().then({
console.log("Before setData");
setData(dataFromFetch);
console.log("After setData");
console.log("Before setLoading");
setLoading(true);
console.log("After setLoading");
}
);
},[]);


return (
<div>
console.log("Hey i rendered");
</div>
);

由于我在useEffect中有一个空的依赖数组([](，这个useEffect将只运行一次。我的问题是：

鉴于setData会导致组件重新渲染，难道代码一到达setData(dataFromFetch);就不应该停止执行吗？在我的控制台日志中，这是打印的内容：

Hey i rendered
Before setData
Hey i rendered
After setData
Before setLoading
Hey i rendered
After setLoading

我期待着这样的东西：

Hey i rendered
Before setData
Hey i rendered

为什么即使在组件重新渲染后仍要继续执行？我在哪里可以读到这样的东西？

Answer 1

setState被添加到javascript事件堆栈，本质上是异步的，useEffect通过javascript调用堆栈完全执行，而不考虑添加到堆栈末尾的其他异步函数(如console.log和setStates(

https://reactjs.org/docs/state-and-lifecycle.html#state-更新可能是异步

下面是一篇关于事件队列/javascript生命周期的文章，可以更好地解释：https://flaviocopes.com/javascript-event-loop/