Render 是 React 在產生畫面在網頁前，所需要執行的動作，今天會介紹整個 render 的步驟，還有跟他息息相關的 commit。React 會在什麼時候觸發 render，以及怎樣更新畫面，也是我們在開發的時候非常需要注意的地方。
今天的文章參考官方文章的：

• https://zh-hant.react.dev/learn/render-and-commit

文章用的舉例非常好，簡單的來說我們的 Component 在變成畫面 UI 的時候會需要三個步驟：

1. 觸發 render
2. Rendering component
3. Commit 到 DOM

文章中使用點餐到上菜當作舉例，也提供一個圖示我覺得滿不錯的，可以參考看看：

步驟 1：觸發 render

有兩種情況會觸發 render

1. 這是 component 的初始 render。
2. component（或是他的祖父層之一）的狀態發生改變。

當每次啟動我們的應用程式時，就會觸發 Component 的第一次 render，React 會使用 createRoot 的方法建立初始節點，並且呼叫 render 函式開始 render component。

狀態的改變則是我們在前面介紹的 state 的改變，每當 Component 裡的 state 透過 setter 而發生變化，就會再次觸發 render 更新 Component 畫面。舉例來說就是一位餐廳顧客點完第一道菜後，根據他的口渴或飢餓程度，又繼續點了茶、點心或其他各種菜色的流程。

步驟 2：React render 你的 component

觸發 render 後，React 會呼叫我們的 Component 來確定我們的畫面會需要顯示哪些內容，這時候就會叫做 component rendering。

React 會從最一開始的 root component 開始向下遞迴，如果 component 有回傳其他 component，React 就會也開始 render 被包含的 component，一直到沒有 component 被回傳，React 才能完全確定畫面會需要顯示哪些 UI。

第一次的初始 render 的時候，會直接從 root 開始 render，之後如果因為狀態改變而重新 render 的時候，React 就會檢查 Component 屬性是否與上一次有所差別。在下一個步驟 commit 之前，不會有其他動作。

要注意的是，我們會希望保持我們的 component 是 pure function，在 rendering 的時候能確保同樣的輸入會有同樣的輸出，並且彼此不會互相影響，否則可能會有非預期的事情發生。

React 把更改 commit 到 DOM

當 rendering 我們的 component 之後，接下來就要更改我們的畫面了，也就是瀏覽器上面的 DOM。

• 對於初始 render， React 會使用 appendChild() DOM API 在螢幕上顯示所有你建立的 DOM 節點。
• 對於重新 render， React 會採取最小必要的操作 (在 rendering 時計算！)，以使得 DOM 與 rendering 後的的輸出相符。

最小必要的操作指的是，React 會計算出在 render 時，跟上一次比有所差異，才會實際更新到 DOM 節點，不會在每次觸發都重新更新一次一樣的內容。

結語：瀏覽器繪製

更新完 DOM 之後，瀏覽器將會重新繪製螢幕畫面。儘管這個過程被稱為「瀏覽器 rendering」，我們更傾向於將它稱為「繪製（Painting）」，以避免混淆。如果想知道瀏覽器怎麼繪製，可以參考文章：

• https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/How_browsers_work#render

小結

今天把整個 React 把畫面呈現出來的流程的三大步驟簡單介紹一下，大家可以先把這個流程先記在腦海中，每一個步驟也會需要注意與運用的地方，在未來的篇章會有更多的說明。
今天的文章先在這邊告一個段落，感謝大家耐心地看完，如果有任何問題與建議歡迎跟我說，明天見，晚安。