跳至主要内容

React Compiler 是什麼？給初學者的簡單介紹

一句話講完​

React Compiler 是一個「自動幫你優化 React 程式」的工具。以前你要自己手動加一些東西來讓畫面不要重複渲染、跑得更快，現在這些事情交給編譯器自動處理，你只要專心寫功能就好。

先來複習一個問題：為什麼 React 需要優化？​

React 的畫面更新方式，是當「資料（state）」改變時，React 會重新計算畫面該長什麼樣子，這個過程叫做「渲染（render）」。

但問題是，有時候 React 會渲染太多次，包括一些其實「根本沒變的東西」也被重新計算一次。雖然單次渲染通常很快，但如果元件很多、畫面很複雜，這些多餘的渲染加起來就會讓 App 變慢、變卡。

以前的解決方法：自己手動優化​

過去，工程師要自己使用一些 React 提供的工具來避免不必要的渲染，例如：

  • useMemo：記住計算結果，避免重複計算
  • useCallback：記住函式，避免每次都產生新的函式
  • React.memo：包住元件，避免父元件更新時連帶重新渲染子元件

這些工具的概念都不難，但實際用起來有兩個麻煩：

  1. 要自己想清楚哪裡需要優化，新手常常不知道該在哪裡加。
  2. 寫起來很囉嗦，程式碼裡到處都是 useMemo、useCallback，可讀性變差。

React Compiler 在做什麼？​

React Compiler 的核心想法很簡單：

「這些優化的工作，本來就應該讓機器自動做，不該讓人類一行一行手動加。」

React Compiler 是一個在你寫程式碼時（build 階段）自動分析你的程式的工具。它會：

  1. 讀懂你寫的 React 元件和函式邏輯
  2. 自動判斷哪些地方的計算結果可以被「記住」、不需要重新計算
  3. 自動幫你加上類似 useMemo、useCallback 的優化效果
  4. 你完全不需要自己手動寫這些優化的程式碼

簡單來說：你寫一般、乾淨的 React 程式碼，編譯器幫你在背後悄悄加上優化。

用一個比喻來理解​

想像你在寫一篇文章，每次修改一個字，傳統做法是「整篇文章重新印一次」。

  • 過去：你要自己標記「這一段沒有改，不用重印」，才能加速印刷。
  • 現在用 React Compiler：印刷機自己很聰明，會自動判斷哪些段落沒變，不會浪費紙重印整篇文章——而你完全不用做任何標記。

實際上程式碼會差在哪？​

沒有 React Compiler（傳統寫法）​

function ProductList({ products, onAddToCart }) {
  // 為了避免每次重新計算，手動加 useMemo
  const sortedProducts = useMemo(() => {
    return products.sort((a, b) => a.price - b.price);
  }, [products]);

  // 為了避免每次產生新函式，手動加 useCallback
  const handleClick = useCallback((id) => {
    onAddToCart(id);
  }, [onAddToCart]);

  return (
    <ul>
      {sortedProducts.map((p) => (
        <li key={p.id} onClick={() => handleClick(p.id)}>
          {p.name}
        </li>
      ))}
    </ul>
  );
}

有 React Compiler（現代寫法）​

function ProductList({ products, onAddToCart }) {
  // 直接寫最自然、最簡單的程式碼
  const sortedProducts = products.sort((a, b) => a.price - b.price);

  const handleClick = (id) => {
    onAddToCart(id);
  };

  return (
    <ul>
      {sortedProducts.map((p) => (
        <li key={p.id} onClick={() => handleClick(p.id)}>
          {p.name}
        </li>
      ))}
    </ul>
  );
}

兩段程式碼執行的「效果」幾乎一樣快，但第二段明顯更乾淨、更好讀，也更不容易寫錯。React Compiler 會在編譯時自動幫你補上等同於 useMemo、useCallback 的優化效果。

React Compiler 能帶來什麼好處？​

  1. 程式碼更簡潔：不用再到處塞 useMemo、useCallback，邏輯更清楚。
  2. 降低出錯機率：手動寫優化程式碼時，常常忘記更新依賴項（dependency array），導致 bug。編譯器自動處理，比人更不容易犯錯。
  3. 效能更穩定：編譯器能分析整個程式的結構，做出比人類更全面、更一致的優化判斷。
  4. 新手更容易上手：不需要先學會什麼時候該用 useMemo，才能寫出效能還不錯的 React 程式。

那是不是代表 useMemo、useCallback 都不用學了？​

不完全是。建議的理解方式是：

  • React Compiler 解決的是「常見、機器能判斷得出來」的優化情境。
  • 一些特殊、需要人為判斷的情境（例如刻意要某個值在特定條件下才變化），還是可能需要手動處理。
  • 了解 useMemo、useCallback 背後的概念，仍然有助於你理解 React 渲染機制、看懂別人的程式碼，以及在編譯器無法自動處理的情況下自己排查問題。

簡單說：編譯器幫你處理大部分日常工作，但理解原理仍然有價值。

適合什麼樣的專案使用？​

  • 任何使用 React 撰寫的網頁應用程式
  • 特別適合元件數量多、畫面互動複雜的專案，因為這類專案最容易出現不必要的重複渲染
  • 新專案可以直接導入；舊專案通常也能逐步加入，不需要把所有程式碼整個重寫

重點總結​

項目傳統寫法使用 React Compiler
優化方式手動加 useMemo / useCallback / React.memo編譯器自動分析、自動優化
程式碼可讀性較雜亂簡潔乾淨
出錯機率較高（容易漏寫依賴項）較低
學習門檻需先理解渲染機制才能優化得好新手也能寫出效能不錯的程式

一句話記住：React Compiler 就是讓你「寫最自然的程式碼，效能交給機器處理」的工具。