在Web中時(shí)常需要根據(jù)不同的狀態(tài)來(lái)渲染對(duì)應(yīng)狀態(tài)下的部分內(nèi)容。愛(ài)掏網(wǎng) - it200.com在React中也同樣有這樣的運(yùn)用場(chǎng)景，只不過(guò)在React中可以創(chuàng)建不同的組件來(lái)封裝各種所需要的行為，然后根據(jù)不同狀態(tài)來(lái)渲染對(duì)應(yīng)的內(nèi)容。愛(ài)掏網(wǎng) - it200.com如果你熟悉Vue的話，知道他有一個(gè)v-if指令可以輕易幫助你根據(jù)不同的狀態(tài)（條件）來(lái)渲染所需的組件（或UI），但在React沒(méi)有這樣的指令。愛(ài)掏網(wǎng) - it200.com雖然在React中沒(méi)有v-if這樣的指令，但它可以使用你熟悉的JavaScript條件語(yǔ)句（比如if...else或switch）。愛(ài)掏網(wǎng) - it200.com接下來(lái)，我們就一起來(lái)看看如何在React中實(shí)現(xiàn)條件渲染。愛(ài)掏網(wǎng) - it200.com

在React中我們一般使用JSX來(lái)構(gòu)建我們所需要的組件模板。愛(ài)掏網(wǎng) - it200.com通過(guò)《深入了解JSX》和《如何編寫(xiě)出優(yōu)雅的JSX》的學(xué)習(xí)我們知道JSX簡(jiǎn)單地說(shuō)是HTML和JavaScript的結(jié)合物，以及我們?nèi)绾螛?gòu)建出更好的JSX模板。愛(ài)掏網(wǎng) - it200.com

在JSX中我們可以像使用JavaScript的if、switch或條件運(yùn)算符一樣。愛(ài)掏網(wǎng) - it200.com也就是說(shuō)，React中的條件渲染和JavaScript中的一樣，使用JavaScript運(yùn)算符if、switch或條件運(yùn)算符去創(chuàng)建元素來(lái)表現(xiàn)當(dāng)前的狀態(tài)，然后根據(jù)不同的狀態(tài)來(lái)更新UI。愛(ài)掏網(wǎng) - it200.com

在學(xué)習(xí)React中條件渲染相關(guān)的知識(shí)之前，咱們先一起來(lái)回顧一下JavaScript中有關(guān)于條件運(yùn)算相關(guān)的知識(shí)。愛(ài)掏網(wǎng) - it200.com

回顧JavaScript中的條件語(yǔ)句

在JavaScript中我們可以使用if條件語(yǔ)句來(lái)根據(jù)條件做判斷，從而獲得相應(yīng)的結(jié)果；另外也可以使用switch來(lái)達(dá)到相應(yīng)的效果。愛(ài)掏網(wǎng) - it200.com我們可以拿生活中的一個(gè)示例來(lái)描述JavaScript中的條件語(yǔ)句。愛(ài)掏網(wǎng) - it200.com

例如，天氣預(yù)報(bào)說(shuō)明天可能會(huì)降溫，有點(diǎn)冷，那么你可能會(huì)決定明天要不要加衣服。愛(ài)掏網(wǎng) - it200.com針對(duì)這樣的場(chǎng)景，我們可以創(chuàng)建一個(gè)類(lèi)似下圖這樣的決策模型：

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

if ... else語(yǔ)句

在JavaScript中使用最常見(jiàn)的條件語(yǔ)句是if、if ... else或者if ... else if ... else。愛(ài)掏網(wǎng) - it200.com如果把穿衣服的選擇放到我們的編碼中來(lái)，可能會(huì)像下面這樣：

let isCooling = true
let isThick = true

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

在if條件語(yǔ)句中需要一個(gè)表達(dá)式，該表達(dá)式返回的值是 true（真） 或 false（假）。愛(ài)掏網(wǎng) - it200.com在JavaScript中我們可能通過(guò) 比較運(yùn)算符、邏輯運(yùn)算符 和 關(guān)系操作符來(lái)獲得true或false的值。愛(ài)掏網(wǎng) - it200.com也就是說(shuō)，if語(yǔ)句中除了像上例那樣簡(jiǎn)單直接給表達(dá)式傳true或false的值之外，還可以通過(guò)運(yùn)算符得到。愛(ài)掏網(wǎng) - it200.com

比較運(yùn)算符

常見(jiàn)的JavaScript比較運(yùn)算符主要有：

比較運(yùn)算符	描述
==	如果兩邊操作數(shù)相等時(shí)返回true，否則返回false
!=	如果兩邊操作數(shù)不相等時(shí)返回true，否則返回false
===	如果兩邊操作數(shù)相等且類(lèi)型相同時(shí)返回true，否則返回false
!==	如果兩邊操作數(shù)不相等或類(lèi)型不相同時(shí)返回true，否則返回false
>	如果左邊的操作數(shù)大于右邊的操作數(shù)時(shí)返回true，否則返回false
>=	如果左邊的操作數(shù)大于或等于右邊的操作數(shù)時(shí)返回true，否則返回false
	如果左邊的操作數(shù)小于右邊的操作數(shù)時(shí)返回true，否則返回false
	如果左邊的操作數(shù)小于或等于右邊的操作數(shù)時(shí)返回true，否則返回false

在JavaScript中使用==和===得到的結(jié)果會(huì)有所不同，其中==會(huì)發(fā)生一些奇怪的現(xiàn)象，如下圖所示：

邏輯運(yùn)算符

邏輯運(yùn)算符常用于布爾（邏輯運(yùn)算）值之間；當(dāng)操作數(shù)都是布爾值時(shí)，返回的也是布爾值，不過(guò)實(shí)際上&&和||返回的是一個(gè)特定的操作數(shù)的值，所以當(dāng)它用于非布爾值的時(shí)候，返回值就可能是非布爾值。愛(ài)掏網(wǎng) - it200.com

邏輯運(yùn)算符	描述
&&	通常稱(chēng)為邏輯與，當(dāng)操作數(shù)都為true時(shí)返回true，否則返回false
||	通常稱(chēng)為邏輯或，當(dāng)操作數(shù)有任一操作數(shù)為true時(shí)返回true，如果操作數(shù)都是false時(shí)則返回false
!	通常稱(chēng)為邏輯非，如果操作數(shù)為true則返回false，否則返回true

關(guān)系操作符

關(guān)系操作符對(duì)操作數(shù)進(jìn)行比較，根據(jù)比較結(jié)果true或false，返回相應(yīng)的布爾值。愛(ài)掏網(wǎng) - it200.com

關(guān)系操作符	描述
in	如果所指定的屬性確實(shí)存在于所指定的對(duì)象中，則返回true，否則返回false
instanceof	如果所判別的對(duì)象確實(shí)是所指定的類(lèi)型，則返回true，否則返回false

在JavaScript中除了if之外還有if ... else以及if ... else if ... else等。愛(ài)掏網(wǎng) - it200.com我們用流程圖來(lái)描述這幾種類(lèi)型的if語(yǔ)句大致如下圖這樣的。愛(ài)掏網(wǎng) - it200.com

if 語(yǔ)句

單個(gè)if語(yǔ)句是最簡(jiǎn)單的if語(yǔ)句，比如：

if (temperature 

如果我們用圖來(lái)描述的話，大致像下圖這樣：

平時(shí)寫(xiě)代碼的時(shí)候，有可能會(huì)碰到多個(gè)if并排，類(lèi)似于if ... if這樣的。愛(ài)掏網(wǎng) - it200.com我們?cè)谏厦娴氖纠献鲎龈脑欤?/p>

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

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

if ... else語(yǔ)句

我們?cè)诰幋a的時(shí)候，還會(huì)碰到條件滿(mǎn)足做什么，條件不滿(mǎn)足做什么。愛(ài)掏網(wǎng) - it200.com用圖的話可以這樣來(lái)描述：

來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：

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

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

在實(shí)際編碼中，我們可以按照上圖的模型來(lái)使用：

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

if ... else if ... else語(yǔ)句

接下來(lái)我們來(lái)看多個(gè)條件判斷，JavaScr