godmmt
commented
1 month ago Answer
1. 印出結果
一開始先執行 Home()，進入主畫面
Home() return AComponent
所以執行 AComponent
先執行 AComponent 中的 test();
const test = async () => {
console.log(1);
setTimeout(() => {
console.log(2);
}, 0);
setTimeout(() => {
console.log(3);
}, 0);
console.log(4);
new Promise((resolve) => {
console.log(5);
resolve(true);
}).then(() => {
console.log(6);
});
};這裡雖然有 async 但是沒有 await，所以會等待 test() 執行完才執行下一行 也就說這裡 text() 是同步執行。
一開始直接執行 console.log(1)，印出 1。
接著遇到 setTimeout(() => { console.log(2); }, 0);，
會將這個放到 Event Loop 中的 Task Queue 中，等待 Call Stack 空了之後，並且 Microtask Queue 也為空的時候，才會執行。
接著遇到 setTimeout(() => { console.log(3); }, 0);，
也是一樣放入 Task Queue 中。
這裡兩者的時間雖然都是 0，但依然會先執行 console.log(2) 再執行 console.log(3)，原因是因為 Task Queue 是先進先出。
接著執行 console.log(4)，印出 4。
接著遇到 new Promise((resolve) => { console.log(5); resolve(true); }).then(() => { console.log(6); });
這裡的(resolve) => { console.log(5); resolve(true); }是同步執行，所以會印出 5。
通常 Promise 這個 Callback 會放入像是 Call API 這種非同步的操作。 這裡用 resolve(true) 來模擬非同步操作完成，並且將結果傳遞給 then()。 如果要模擬非同步操作失敗，則會使用 reject()。
resolve(true);表示操作成功，所以繼續往下執行這部分 .then(() => { console.log(6); }); ，
但這部分會放入 Microtask Queue 中，等待 Call Stack 空了之後，才會執行。
目前 Call Stack 中還有 AComponent 這個 function，所以要繼續執行 AComponent 這個 function 直到結束，才會輪到 Microtask Queue，之後才再輪到 Task Queue。
所以這裡就繼續執行 AComponent 中的 console.log('AComponent')，印出 AComponent rendered。
接著 AcComponent return BComponent，所以執行 BComponent。
遇到 BComponent 中的 console.log('BComponent')，印出 BComponent rendered。
接著 BComponent return CComponent，所以執行 CComponent。
遇到 CComponent 中的 console.log('CComponent')，印出 CComponent rendered。
目前 AComponent 中的所有 function 都執行完畢，所以 Call Stack 為空。
接著執行 Microtask Queue 中的 Promise.then()，印出 6。
接著執行 Task Queue 中的 setTimeout(() => { console.log(2); }, 0);，印出 2。 以及 setTimeout(() => { console.log(3); }, 0);，印出 3。
所以最後印出的結果為：
1
4
5
AComponent rendered
BComponent rendered
CComponent rendered
6
2
32. 按下按鈕後，會發生什麼事情？
按下按鈕後，會執行 handleClick()，會先印出 Button clicked，並且 setCount 會將 count + 1。
狀態更新後，會重新 render，所以會再次執行 BComponent 這個 function。
會先印出 BComponent rendered。
接著 BComponent return CComponent，所以會執行 CComponent。
執行 CComponent 中的 console.log('CComponent')，印出 CComponent rendered。
所以按下按鈕後，會印出：
Button clicked
BComponent rendered
CComponent rendered3. 執行 handleClick 但同時不觸發 CComponent rendered
不使用 useState，改成使用 useRef
// BComponent.js
import React, { useRef } from "react";
import CComponent from "./ccomponent";
const BComponent = () => {
const countRef = useRef(0);
console.log("BComponent rendered");
const handleClick = () => {
console.log("Button clicked");
countRef.current += 1;
console.log(`Button clicked ${countRef.current} times`);
};
return (
<div>
<h2>B Component</h2>
<button onClick={handleClick}>Click me</button>
<p>Button clicked {countRef.current} times</p>
<CComponent />
</div>
);
};
export default BComponent;
將 Quiz 整理成 KM
文章位置: https://github.com/CAFECA-IO/WorkGuidelines/blob/main/newbie/react-document/react-and-js-execution-flow-and-lifecycle.md
KM Steps:
大綱
Quiz
index.jsx :
acomponent.jsx :
bcomponent.jsx :
ccomponent.jsx :
Questions