『Day 12』React 渲染機制

前言

在學習 React 的過程中，助教一直再跟我們說要理解底層的邏輯，其中就屬渲染機制最令我印象深刻。當初在學習的時候，總是不太理解為什麼改變了某個值，畫面卻沒有跟著更新；或是為什麼有時候明明沒有要更新的元件，卻也跟著重新渲染。直到了解了 React 的渲染機制後，這些問題才慢慢有了答案。
今天想跟大家分享一下 React 渲染機制的運作方式。我們可以把它想像成一間餐廳的運作流程：顧客（使用者）點餐後，服務生（React）接收訂單並送到廚房（元件），最後將美味的餐點（UI）送到顧客面前。這個比喻或許可以幫助我們更直覺地理解整個渲染流程。

React 渲染的三個階段

React 的渲染過程可以分為三個主要階段：

1. 觸發渲染（Trigger）

   • 有兩種情況會觸發渲染：
     • 元件的初次渲染（就像餐廳開門時的第一個訂單）
     • 元件（或其祖先元件）的 state 更新（如顧客加點新的餐點）
   • 這個階段告訴 React：「我們需要更新畫面了」

2. 渲染元件（Render）

   • React 會呼叫我們的元件函式，就像廚師（元件）根據訂單（props/state）準備餐點
   • 這個過程是遞迴的：如果一個元件回傳其他元件，React 會繼續渲染那些元件，直到完成整個元件樹的渲染

   function Gallery() {
     return (
       <section>
         <h1>藝術作品集</h1>
         <Image />
         <Image />
         <Image />
       </section>
     );
   }

3. 提交到 DOM（Commit）

   • React 會根據渲染結果，更新實際的 DOM
   • 初次渲染時，React 會透過 appendChild() 這個 DOM API 將所有新建立的節點放到畫面上
   • 重新渲染時，React 只會進行最小必要的 DOM 更新

Pure Rendering (純粹渲染)的重要性

React 特別強調渲染必須是 Pure Calculation（純粹的計算過程），這意味著：

1. 相同輸入，相同輸出：給定相同的 props 和 state，元件每次都應該產生相同的 JSX。
2. 不影響外部：渲染過程不應該修改任何在渲染之前就存在的物件或變數。

// ✅ 好的示例：Pure Rendering
function ProfileCard({ user }) {
  return (
    <div className="card">
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  );
}

// ❌ 不好的示例：渲染過程修改了外部變數
let count = 0;
function Counter() {
  count++;// 不應該在渲染時修改外部變數
  return <div>{count}</div>;
}

渲染後的瀏覽器繪製

在 React 完成 DOM 的更新之後，還有一個重要的步驟：瀏覽器的重新繪製（painting）。這個步驟是由瀏覽器自動處理的，React 不會介入這個過程。

有興趣深入了解瀏覽器渲染機制的朋友，可以去查詢「瀏覽器渲染流程」或「Critical Rendering Path」相關的資料喔！

總結

React 的渲染是一個純粹的過程，通過「觸發渲染→呼叫元件→提交到 DOM」這三個步驟，高效地將元件程式碼轉換為使用者看到的網頁內容。

了解 React 的渲染機制，不只是理論知識，更能幫助我們：

• 寫出更可預測的程式碼
• 避免渲染相關的效能問題
• 更好地理解元件的生命週期

在實際開發中，把元件設計成純粹的函式，讓渲染過程變得可預測，這是寫出穩定且高效能 React 應用程式的重要基礎。