在Web中時(shí)常需要根據(jù)不同的狀態(tài)來渲染對(duì)應(yīng)狀態(tài)下的部分內(nèi)容。愛掏網(wǎng) - it200.com在React中也同樣有這樣的運(yùn)用場(chǎng)景，只不過在React中可以創(chuàng)建不同的組件來封裝各種所需要的行為，然后根據(jù)不同狀態(tài)來渲染對(duì)應(yīng)的內(nèi)容。愛掏網(wǎng) - it200.com如果你熟悉Vue的話，知道他有一個(gè)v-if指令可以輕易幫助你根據(jù)不同的狀態(tài)（條件）來渲染所需的組件（或UI），但在React沒有這樣的指令。愛掏網(wǎng) - it200.com雖然在React中沒有v-if這樣的指令，但它可以使用你熟悉的JavaScript條件語(yǔ)句（比如if...else或switch）。愛掏網(wǎng) - it200.com接下來，我們就一起來看看如何在React中實(shí)現(xiàn)條件渲染。愛掏網(wǎng) - it200.com
在React中我們一般使用JSX來構(gòu)建我們所需要的組件模板。愛掏網(wǎng) - it200.com通過《深入了解JSX》和《如何編寫出優(yōu)雅的JSX》的學(xué)習(xí)我們知道JSX簡(jiǎn)單地說是HTML和JavaScript的結(jié)合物，以及我們?nèi)绾螛?gòu)建出更好的JSX模板。愛掏網(wǎng) - it200.com
在JSX中我們可以像使用JavaScript的if、switch或條件運(yùn)算符一樣。愛掏網(wǎng) - it200.com也就是說，React中的條件渲染和JavaScript中的一樣，使用JavaScript運(yùn)算符if、switch或條件運(yùn)算符去創(chuàng)建元素來表現(xiàn)當(dāng)前的狀態(tài)，然后根據(jù)不同的狀態(tài)來更新UI。愛掏網(wǎng) - it200.com
在學(xué)習(xí)React中條件渲染相關(guān)的知識(shí)之前，咱們先一起來回顧一下JavaScript中有關(guān)于條件運(yùn)算相關(guān)的知識(shí)。愛掏網(wǎng) - it200.com
回顧JavaScript中的條件語(yǔ)句
在JavaScript中我們可以使用if條件語(yǔ)句來根據(jù)條件做判斷，從而獲得相應(yīng)的結(jié)果；另外也可以使用switch來達(dá)到相應(yīng)的效果。愛掏網(wǎng) - it200.com我們可以拿生活中的一個(gè)示例來描述JavaScript中的條件語(yǔ)句。愛掏網(wǎng) - it200.com
例如，天氣預(yù)報(bào)說明天可能會(huì)降溫，有點(diǎn)冷，那么你可能會(huì)決定明天要不要加衣服。愛掏網(wǎng) - it200.com針對(duì)這樣的場(chǎng)景，我們可以創(chuàng)建一個(gè)類似下圖這樣的決策模型：
在每做一個(gè)決定都會(huì)問自己一個(gè)問題，問題的答案總是在true和false之間做選擇。愛掏網(wǎng) - it200.com這個(gè)問題的答案決定了你的下一個(gè)選擇。愛掏網(wǎng) - it200.com比如上圖的穿衣決策模型。愛掏網(wǎng) - it200.com而這種模型用于我們的編碼中也非常的適用。愛掏網(wǎng) - it200.com
if ... else語(yǔ)句
在JavaScript中使用最常見的條件語(yǔ)句是if、if ... else或者if ... else if ... else。愛掏網(wǎng) - it200.com如果把穿衣服的選擇放到我們的編碼中來，可能會(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（假）。愛掏網(wǎng) - it200.com在JavaScript中我們可能通過 比較運(yùn)算符、邏輯運(yùn)算符 和 關(guān)系操作符來獲得true或false的值。愛掏網(wǎng) - it200.com也就是說，if語(yǔ)句中除了像上例那樣簡(jiǎn)單直接給表達(dá)式傳true或false的值之外，還可以通過運(yùn)算符得到。愛掏網(wǎng) - it200.com
比較運(yùn)算符
常見的JavaScript比較運(yùn)算符主要有：
| 比較運(yùn)算符 | 描述 |
|---|---|
== |
如果兩邊操作數(shù)相等時(shí)返回true，否則返回false
|
!= |
如果兩邊操作數(shù)不相等時(shí)返回true，否則返回false
|
=== |
如果兩邊操作數(shù)相等且類型相同時(shí)返回true，否則返回false
|
!== |
如果兩邊操作數(shù)不相等或類型不相同時(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í)，返回的也是布爾值，不過實(shí)際上&&和||返回的是一個(gè)特定的操作數(shù)的值，所以當(dāng)它用于非布爾值的時(shí)候，返回值就可能是非布爾值。愛掏網(wǎng) - it200.com
| 邏輯運(yùn)算符 | 描述 |
|---|---|
&& |
通常稱為邏輯與，當(dāng)操作數(shù)都為true時(shí)返回true，否則返回false
|
|| |
通常稱為邏輯或，當(dāng)操作數(shù)有任一操作數(shù)為true時(shí)返回true，如果操作數(shù)都是false時(shí)則返回false
|
! |
通常稱為邏輯非，如果操作數(shù)為true則返回false，否則返回true
|
關(guān)系操作符
關(guān)系操作符對(duì)操作數(shù)進(jìn)行比較，根據(jù)比較結(jié)果true或false，返回相應(yīng)的布爾值。愛掏網(wǎng) - it200.com
| 關(guān)系操作符 | 描述 |
|---|---|
in |
如果所指定的屬性確實(shí)存在于所指定的對(duì)象中，則返回true，否則返回false
|
instanceof |
如果所判別的對(duì)象確實(shí)是所指定的類型，則返回true，否則返回false
|
在JavaScript中除了if之外還有if ... else以及if ... else if ... else等。愛掏網(wǎng) - it200.com我們用流程圖來描述這幾種類型的if語(yǔ)句大致如下圖這樣的。愛掏網(wǎng) - it200.com
if 語(yǔ)句
單個(gè)if語(yǔ)句是最簡(jiǎn)單的if語(yǔ)句，比如：
if (temperature 如果我們用圖來描述的話，大致像下圖這樣：
平時(shí)寫代碼的時(shí)候，有可能會(huì)碰到多個(gè)if并排，類似于if ... if這樣的。愛掏網(wǎng) - it200.com我們?cè)谏厦娴氖纠献鲎龈脑欤?/p>
if (temperature > 30) {
console.log('今天穿短袖')
}
if (temperature > 20 && temperature 10 && temperature
if ... else語(yǔ)句
我們?cè)诰幋a的時(shí)候，還會(huì)碰到條件滿足做什么，條件不滿足做什么。愛掏網(wǎng) - it200.com用圖的話可以這樣來描述：
來看一個(gè)簡(jiǎn)單的實(shí)例：
if (isWeekend) {
// 是周末
console.log('不用上班')
} else {
// 不是周末
console.log('需要上班')
}
同樣的，在if ... else中還會(huì)嵌套if ... else(可以在任何{}內(nèi)嵌套)，如果我們用圖來表示的話，大致如下圖這樣：
在實(shí)際編碼中，我們可以按照上圖的模型來使用：
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ǔ)句
接下來我們來看多個(gè)條件判斷，JavaScr