React Hooks 重新渲染

Question

我有一個具有兩塊 state 的功能組件：

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

我還有一個簡單的 useEffect 掛鈎，它調用 function 並返回 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

為什么即使在組件重新渲染后仍繼續執行？ 我在哪里可以 go 閱讀這樣的內容？

Answer 1

setState被添加到 javascript 事件堆棧中，並且本質上是異步的，並且 useEffect 正在通過 javascript 調用堆棧完全執行，而不管堆棧末尾添加的其他異步函數（例如 console.logs 和 setStates）

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

這是一篇關於事件隊列/javascript生命周期的文章，可以更好地解釋： https://flaviocopes.com/javascript-event-loop/