在Web中時常需要根據不同的狀態來渲染對應狀態下的部分內容。愛掏網 - it200.com在React中也同樣有這樣的運用場景，只不過在React中可以創建不同的組件來封裝各種所需要的行為，然后根據不同狀態來渲染對應的內容。愛掏網 - it200.com如果你熟悉Vue的話，知道他有一個v-if指令可以輕易幫助你根據不同的狀態（條件）來渲染所需的組件（或UI），但在React沒有這樣的指令。愛掏網 - it200.com雖然在React中沒有v-if這樣的指令，但它可以使用你熟悉的JavaScript條件語句（比如if...else或switch）。愛掏網 - it200.com接下來，我們就一起來看看如何在React中實現條件渲染。愛掏網 - it200.com

在React中我們一般使用JSX來構建我們所需要的組件模板。愛掏網 - it200.com通過《深入了解JSX》和《如何編寫出優雅的JSX》的學習我們知道JSX簡單地說是HTML和JavaScript的結合物，以及我們如何構建出更好的JSX模板。愛掏網 - it200.com

在JSX中我們可以像使用JavaScript的if、switch或條件運算符一樣。愛掏網 - it200.com也就是說，React中的條件渲染和JavaScript中的一樣，使用JavaScript運算符if、switch或條件運算符去創建元素來表現當前的狀態，然后根據不同的狀態來更新UI。愛掏網 - it200.com

在學習React中條件渲染相關的知識之前，咱們先一起來回顧一下JavaScript中有關于條件運算相關的知識。愛掏網 - it200.com

回顧JavaScript中的條件語句

在JavaScript中我們可以使用if條件語句來根據條件做判斷，從而獲得相應的結果；另外也可以使用switch來達到相應的效果。愛掏網 - it200.com我們可以拿生活中的一個示例來描述JavaScript中的條件語句。愛掏網 - it200.com

例如，天氣預報說明天可能會降溫，有點冷，那么你可能會決定明天要不要加衣服。愛掏網 - it200.com針對這樣的場景，我們可以創建一個類似下圖這樣的決策模型：

在每做一個決定都會問自己一個問題，問題的答案總是在true和false之間做選擇。愛掏網 - it200.com這個問題的答案決定了你的下一個選擇。愛掏網 - it200.com比如上圖的穿衣決策模型。愛掏網 - it200.com而這種模型用于我們的編碼中也非常的適用。愛掏網 - it200.com

if ... else語句

在JavaScript中使用最常見的條件語句是if、if ... else或者if ... else if ... else。愛掏網 - it200.com如果把穿衣服的選擇放到我們的編碼中來，可能會像下面這樣：

let isCooling = true
let isThick = true

if (isCooling) {
    if (isThick) {
        console.log('明天要穿羽絨服，戴鴨絨帽')
    } else {
        console.log('明天穿件普通外套就可以')
    }
} else {
    console.log('明天穿件襯衣')
}

在if條件語句中需要一個表達式，該表達式返回的值是 true（真） 或 false（假）。愛掏網 - it200.com在JavaScript中我們可能通過 比較運算符、邏輯運算符 和 關系操作符來獲得true或false的值。愛掏網 - it200.com也就是說，if語句中除了像上例那樣簡單直接給表達式傳true或false的值之外，還可以通過運算符得到。愛掏網 - it200.com

比較運算符

常見的JavaScript比較運算符主要有：

比較運算符	描述
==	如果兩邊操作數相等時返回true，否則返回false
!=	如果兩邊操作數不相等時返回true，否則返回false
===	如果兩邊操作數相等且類型相同時返回true，否則返回false
!==	如果兩邊操作數不相等或類型不相同時返回true，否則返回false
>	如果左邊的操作數大于右邊的操作數時返回true，否則返回false
>=	如果左邊的操作數大于或等于右邊的操作數時返回true，否則返回false
	如果左邊的操作數小于右邊的操作數時返回true，否則返回false
	如果左邊的操作數小于或等于右邊的操作數時返回true，否則返回false

在JavaScript中使用==和===得到的結果會有所不同，其中==會發生一些奇怪的現象，如下圖所示：

邏輯運算符

邏輯運算符常用于布爾（邏輯運算）值之間；當操作數都是布爾值時，返回的也是布爾值，不過實際上&&和||返回的是一個特定的操作數的值，所以當它用于非布爾值的時候，返回值就可能是非布爾值。愛掏網 - it200.com

邏輯運算符	描述
&&	通常稱為邏輯與，當操作數都為true時返回true，否則返回false
||	通常稱為邏輯或，當操作數有任一操作數為true時返回true，如果操作數都是false時則返回false
!	通常稱為邏輯非，如果操作數為true則返回false，否則返回true

關系操作符

關系操作符對操作數進行比較，根據比較結果true或false，返回相應的布爾值。愛掏網 - it200.com

關系操作符	描述
in	如果所指定的屬性確實存在于所指定的對象中，則返回true，否則返回false
instanceof	如果所判別的對象確實是所指定的類型，則返回true，否則返回false

在JavaScript中除了if之外還有if ... else以及if ... else if ... else等。愛掏網 - it200.com我們用流程圖來描述這幾種類型的if語句大致如下圖這樣的。愛掏網 - it200.com

if 語句

單個if語句是最簡單的if語句，比如：

if (temperature 

如果我們用圖來描述的話，大致像下圖這樣：

平時寫代碼的時候，有可能會碰到多個if并排，類似于if ... if這樣的。愛掏網 - it200.com我們在上面的示例上做做改造：

if (temperature > 30) {
    console.log('今天穿短袖')
}

if (temperature > 20 && temperature  10 && temperature 

if ... else語句

我們在編碼的時候，還會碰到條件滿足做什么，條件不滿足做什么。愛掏網 - it200.com用圖的話可以這樣來描述：

來看一個簡單的實例：

if (isWeekend) {
    // 是周末
    console.log('不用上班')
} else {
    // 不是周末
    console.log('需要上班')
}

同樣的，在if ... else中還會嵌套if ... else(可以在任何{}內嵌套)，如果我們用圖來表示的話，大致如下圖這樣：

在實際編碼中，我們可以按照上圖的模型來使用：

if (number == 0) {
    console.log('number是個蛋')
} else {
    if (number > 0) {
        console.log('number是個正數')
    } else {
        console.log('number是個負數')
    }
}

if ... else if ... else語句

接下來我們來看多個條件判斷，JavaScr