動態UI的秘訣：React中的條件渲染

作者：碼力無邊

各位React探險家，歡迎回到我們的《React奇妙之旅》！我是你們的老朋友碼力無邊。在之前的旅程中，我們已經學會了如何創建組件、傳遞數據（Props）、管理內部狀態（State），甚至如何與外部世界交互（useEffect）。我們的組件已經變得相當強大和動態了。

但是，一個用戶界面很少是一成不變的。我們經常需要根據不同的情況，向用戶展示不同的內容。比如：

用戶登錄了，就顯示“歡迎回來，[用戶名]”，否則就顯示“請登錄”按鈕。
數據正在加載中，就顯示一個“加載中…”的提示，加載完成后再顯示數據列表。
購物車里有商品，就顯示商品列表和總價，否則就顯示“您的購物車是空的”。

這種根據特定條件來決定渲染哪個UI部分的技術，就是我們今天要探索的核心——條件渲染（Conditional Rendering）。

條件渲染是構建動態和響應式用戶界面的基石。掌握了它，你就能像一位戲劇導演一樣，根據劇情的發展（應用的狀態），精確地控制舞臺上（頁面上）哪個“演員”（組件）該上場，哪個該退場。今天，我們將學習React中實現條件渲染的幾種主流“魔法”，從簡單直接到優雅靈活，總有一款適合你！

第一章：最樸素的魔法 —— `if/else` 語句

我們是JavaScript開發者，最熟悉、最直觀的條件判斷工具莫過于if...else語句。在React組件中，我們當然也可以使用它。

但是，請記住一個關鍵點：if/else是語句（Statement），而不是表達式（Expression）。這意味著你不能直接把它寫在JSX的花括號{}里面。

正確的做法是，在組件函數的return語句之前，使用if/else來準備好要渲染的內容，然后將結果渲染出來。

讓我們來看一個經典的登錄狀態切換的例子：

import React from 'react';function Greeting({ isLoggedIn }) {let content; // 聲明一個變量來存放要渲染的JSXif (isLoggedIn) {content = <h1>歡迎回來，尊貴的用戶！</h1>;} else {content = <h1>請先登錄</h1>;}return (<div>{content} {/* 在JSX中渲染這個變量 */}</div>);
}// 在App.jsx中使用
function App() {const [loggedIn, setLoggedIn] = React.useState(false);return (<div><Greeting isLoggedIn={loggedIn} /><button onClick={() => setLoggedIn(!loggedIn)}>{loggedIn ? '退出登錄' : '點擊登錄'}</button></div>);
}

優點：

可讀性強：對于剛接觸React的開發者來說，這種方式非常直觀，和傳統的JavaScript邏輯沒有區別。
處理復雜邏輯：當你的條件分支非常多，邏輯很復雜時（比如有多個else if），使用if/else結構會讓代碼的層次更清晰。

缺點：

代碼略顯冗長：需要一個額外的變量，并且把渲染邏輯和JSX結構分開了。對于簡單的條件判斷，有點“殺雞用牛刀”。

第二章：最優雅的魔杖 —— 三元運算符 `? :`

當你的條件渲染場景是“二選一”時，JavaScript的三元條件運算符（condition ? exprIfTrue : exprIfFalse）將成為你的最佳拍檔。

三元運算符是一個表達式，這意味著它可以直接嵌入到JSX的花括號{}中，讓我們的代碼變得極其緊湊和優雅。

讓我們用三元運算符來重構上面的Greeting組件：

import React from 'react';function Greeting({ isLoggedIn }) {return (<div>{isLoggedIn ? <h1>歡迎回來，尊貴的用戶！</h1> : <h1>請先登錄</h1>}</div>);
}

哇！代碼是不是瞬間清爽了很多？我們把條件邏輯直接寫在了需要它的地方。這種寫法在React社區中非常流行，你應該盡快熟悉它。

實踐場景：

切換按鈕的文本：{isEditing ? '保存' : '編輯'}
切換CSS類名：className={isActive ? 'active' : ''}
根據加載狀態顯示不同組件：{isLoading ? <Spinner /> : <DataList />}

優點：

簡潔緊湊：代碼量少，邏輯和視圖結合得更緊密。
可以直接嵌入JSX：這是它相對于if/else最大的優勢。

缺點：

不適合復雜邏輯：如果嵌套多層三元運算符，代碼會變得像“天書”一樣難以閱讀，這時應該回歸if/else。

第三章：最精準的狙擊 —— 邏輯與 `&&` 運算符

現在，我們面臨一種新的場景：如果滿足某個條件，就渲染某個東西；如果不滿足，就什么也不渲染。

比如，一個通知組件，只有當有未讀消息時，才顯示一個紅點徽章。

你當然可以用三元運算符來實現：{count > 0 ? <Badge count={count} /> : null}。當條件為false時，我們返回null。在React中，渲染null、undefined或false不會在DOM中產生任何輸出，這完全可行。

但是，我們有更簡潔的“語法糖”——邏輯與&&運算符。

在JavaScript中，true && expression總是返回expression，而false && expression總是返回false。React利用了這個特性。

import React from 'react';function Mailbox({ unreadMessages }) {const count = unreadMessages.length;return (<div><h1>您的收件箱</h1>{count > 0 && <h2>您有 {count} 條未讀消息。</h2>}{/* 如果count為0，整個&&表達式返回0(falsy)，React不會渲染任何東西 */}</div>);
}// 在App.jsx中使用
function App() {const messages = ['React 很好', 'Vue 也不錯'];const noMessages = [];return (<div><Mailbox unreadMessages={messages} /><hr /><Mailbox unreadMessages={noMessages} /></div>);
}

工作原理：

當count > 0為true時，&&運算符會繼續計算并返回右邊的表達式（即<h2>...</h2>），React會將其渲染出來。
當count > 0為false時，&&運算符會“短路”，立即返回左邊的false值，React會忽略它，不渲染任何東西。

優點：

極度簡潔：是處理“有或無”場景的最簡便寫法。

?? 一個必須注意的“陷阱”：
&&左側的表達式結果如果是數字0，要特別小心！因為0 && expression會返回0，而React會把數字0渲染到頁面上！

? 錯誤示范：
{messageCount && <MessageList />} // 如果messageCount是0，頁面上會出現一個孤零零的0。

? 正確規避：
確保&&左側是一個純粹的布爾值。
{messageCount > 0 && <MessageList />} // messageCount > 0的結果永遠是true或false。

第四章：終極武器 —— 封裝成獨立的組件

當你的條件渲染邏輯變得越來越復雜，甚至開始影響到當前組件的可讀性時，一個最佳的重構策略就是：將條件渲染的邏輯封裝到一個新的、獨立的組件中。

假設我們有一個頁面，根據用戶的權限等級（'guest', 'user', 'admin'）來顯示不同的控制面板。

不好的寫法（把所有邏輯都堆在App組件里）：

function App() {const [userRole, setUserRole] = React.useState('admin');return (<div>{/* 巨型三元運算符或if/else塊 */}{userRole === 'guest' ? (<GuestDashboard />) : userRole === 'user' ? (<UserDashboard />) : userRole === 'admin' ? (<AdminDashboard />) : null}</div>);
}

這樣的App組件承擔了太多的職責，顯得非常臃腫。

? 優雅的重構：

創建一個專門負責“路由”的組件Dashboard。

import React from 'react';
import GuestDashboard from './GuestDashboard';
import UserDashboard from './UserDashboard';
import AdminDashboard from './AdminDashboard';function Dashboard({ userRole }) {if (userRole === 'admin') {return <AdminDashboard />;}if (userRole === 'user') {return <UserDashboard />;}return <GuestDashboard />; // 默認顯示訪客面板
}// 現在App組件變得非常清爽
function App() {const [userRole, setUserRole] = React.useState('admin');return (<div><h1>我的應用</h1><Dashboard userRole={userRole} /></div>);
}

通過這種方式，App組件只關心傳遞userRole，而Dashboard組件則專門負責根據這個role來決定渲染哪個具體的面板。每個組件都職責單一，代碼的可讀性和可維護性大大提高。這體現了React組件化和單一職責原則的精髓。

總結：選擇最合適的“魔法”

今天，我們學習了在React中實現條件渲染的四種強大技術。它們沒有絕對的好壞之分，只有在特定場景下的適用性差異。

讓我們來做一個快速的回顧，幫你建立一個決策模型：

當你有復雜的、多分支的條件邏輯時（多個else if）：
- 首選：在return之前使用**if/else語句**，保持代碼的清晰和可讀性。
當你的場景是簡單的“二選一”時：
- 首選：在JSX中直接使用三元運算符 ? :，代碼會非常簡潔優雅。
當你的場景是“有或無”的切換時：
- 首選：使用邏輯與 && 運算符，這是最簡便的方式。但要警惕左側表達式為0的陷阱。
當條件渲染邏輯本身變得復雜和龐大時：
- 首選：將這部分邏輯抽取并封裝到一個新的組件中，讓父組件保持清爽。