『Day 6』React 條件渲染

前言

在前面幾篇文章中，我們討論了 React 元件的基本概念，包括如何建立元件以及如何透過 Props 傳遞資料。今天要來聊聊另一個重要的主題：條件渲染（Conditional Rendering）。
在實際開發中，我們經常需要根據不同的條件來決定畫面要顯示什麼內容。比方說：判斷使用者是否登入來顯示不同的導航列、根據商品庫存狀態顯示不同的按鈕等等。React 讓我們能夠運用熟悉的 JavaScript 條件判斷來處理這類需求。

React 的渲染機制

在開始之前，讓我們先了解一下 React 的渲染機制：

React 的渲染分為「初次渲染」和「重新渲染」。初次渲染發生在元件首次被加入畫面時，而重新渲染則是在元件的 props 或 state 改變時觸發。

了解初步認識渲染機制後，接下來，讓我們來看看在 React 中實作條件渲染的幾種主要方法…

使用 if 語句

最直觀的條件渲染方式就是使用 if 判斷，我在處理較複雜的條件邏輯時特別喜歡用這個方式：

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

這種寫法的好處是邏輯清晰，當專案變得複雜時，程式碼依然容易理解和維護。

當其他開發者在閱讀程式碼時，可以很快理解組件的運作方式。

不過要注意的是，有時候這樣的寫法可能會導致程式碼重複的問題，像上面的例子中 <li className="item"> 就重複出現了兩次。

使用三元運算符

當遇到簡單的條件判斷時，我們可以使用三元運算符來讓程式碼更簡潔：

return (
  <li className="item">
    {isPacked ? name + ' ✅' : name}
  </li>
);

這種寫法在處理簡單的條件判斷時非常好用，程式碼看起來更加緊湊。

但要留意不要太過複雜，在實務開發中我曾經看到在同一個渲染邏輯中使用了三層的三元運算符，類似這樣：

return (
  <div className="user-status">
    {isLoggedIn ? 
      (isPremium ? 
        <PremiumUserIcon /> : 
        <NormalUserIcon />
      ) : 
      (isGuest ? 
        <GuestIcon /> : 
        <UnknownUserIcon />
      )
    }
  </div>
);

這種情況反而讓程式碼變得更難閱讀和維護，建議遇到複雜的條件判斷時，還是使用 if 判斷會比較適合。

邏輯與運算符 (&&)

對於只在條件為true時，才渲染其內容的情況下，我們可以使用 && 運算符:

return (
  <li className="item">
    {name} {isPacked && '✅'}
  </li>
);

但要小心! 這裡隱藏著一個常見的陷阱。

我們看一下這段:

1	{messageCount && <p>New messages</p>}

看是一切正常，但當 messageCount 為 0 時，React 會渲染 0 而不是什麼都不渲染。

之所以會造成這個狀況，我們先來回顧一下JavaScript中 && 運算符的特性：

如果左側為真值（truthy），返回右側的值。
如果左側為假值（falsy），立即返回左側的值，不再評估右側。

因為有這個特性，又加上當值是false、null 和 undefined 時，React會將它們視為JSX中的”hole”，因此不做渲染。

但是，如果左側是0 時，React並不會把它當作是falsy ，而是會把他當作是 number 0，因此依照上面的特性，React 會渲染 0 。

所以當我們在使用&& 時，左側要讓它是**boolean** 。

1	{messageCount > 0 && <p>New messages</p>}

結語

React 的條件渲染靈活運用了 JavaScript 的邏輯運算，主要通過以下方式實現：

if 語句：最直觀但可能導致代碼重複。
三元運算符：適用於簡單條件，使代碼更簡潔。
邏輯與（&&）運算符：適合僅在條件為真時渲染內容。

掌握條件渲染技巧對於建立動態的使用者介面至關重要。透過靈活運用不同的條件渲染方式，我們可以建立更動態且友善的使用者介面。同時，了解其中的陷阱與注意事項，也能幫助我們寫出更穩健的程式碼。