1.If-else

if-else是一種控制流程的簡單方法，在控制渲染中能發(fā)揮很好的作用。

2.三元運(yùn)算符(?)

三元運(yùn)算符是條件如果為真則返回一個(gè)值，如果為假則返回另一個(gè)值，

在react中使用的非常廣泛，在條件比較簡單和內(nèi)容較少的情況下非常實(shí)用，并且語法簡潔。

3.邏輯與(&&)

在只關(guān)注一種條件結(jié)果的情況下，使用邏輯與比三元運(yùn)算符更簡潔。

4.空值合并運(yùn)算符(??)

當(dāng)空合并運(yùn)算符 ( ??) 前面的值為null或undefined, 會(huì)返回問號(hào)右邊的表達(dá)式。

在組件內(nèi)，我們使用空合并運(yùn)算符 (??) 來處理可能age是null或undefined的情況。如果user.age缺少，該userAge變量默認(rèn)為“未知”，然后在渲染的輸出中使用。這確保了即使年齡數(shù)據(jù)不存在，組件也可以優(yōu)雅地處理這種數(shù)據(jù)缺失。

5.Switch Case 語句

switch/case非常適合在 React 中不同條件導(dǎo)致導(dǎo)致不同渲染，確保代碼的可維護(hù)且可讀性。

6.策略方案

該方案可以作為Switch Case的替代者，

甚至可以使用true和false來做key來處理一些特定場景，在下面的場景中isWorkDay,isSunday,isFestival都可能是true，所以這里產(chǎn)生了優(yōu)先級(jí)，可以利用這里的優(yōu)先級(jí)來做一些條件渲染。

高階條件渲染場景

掌握基本常用方法后，還會(huì)遇到需要更復(fù)雜解決方案的場景。

7.ErrorBoundry

ErrorBoundry可以捕獲其子組件樹中的 JavaScript 錯(cuò)誤、記錄這些錯(cuò)誤，并顯示兜底UI 而不是崩潰的組件樹的組件。

在這里需要捕獲到錯(cuò)誤的時(shí)候依據(jù)條件渲染用戶自定義的兜底UI。

8.高階組件 (HOC)

HOC 是包裝組件的函數(shù)，可以根據(jù)收到的 props 有條件地渲染組件，從而提供更靈活的方式來跨組件共享邏輯。

想象一下，有一個(gè)功能只有擁有高級(jí)帳戶的用戶才能看到。我們將創(chuàng)建一個(gè) HOC 來檢查用戶的帳戶類型并有條件地相應(yīng)地呈現(xiàn)組件。

高階組件withPremiumFeature中根據(jù)參數(shù)判斷展示內(nèi)容

9.render props

render props是將函數(shù)作為props傳遞給組件，該函數(shù)中可以根據(jù)條件判斷決定UI展示。

在這個(gè)例子中，該UserOnlineStatus組件負(fù)責(zé)確定用戶的在線狀態(tài)，但不直接渲染UI。相反，它將渲染委托給一個(gè) prop（render prop），這是一個(gè)由父組件傳遞的函數(shù)。函數(shù) ( renderStatus) 獲取isOnline狀態(tài)并根據(jù)此信息決定渲染內(nèi)容。

條件渲染的最佳實(shí)踐

• If/Else 語句： 使用傳統(tǒng)的 if/else 語句進(jìn)行簡單的分支邏輯渲染組件,簡單易讀。當(dāng)條件簡單且有限時(shí)，if/else 語句通常是一個(gè)不錯(cuò)的選擇。
• 三元運(yùn)算符 (?)： 三元運(yùn)算符非常適合簡潔的條件渲染，特別當(dāng)需要基于單個(gè)條件渲染兩個(gè)組件之一時(shí)。它非常適合希望保持 JSX 干凈且可讀的簡單場景。
• 邏輯 AND (&&)： 當(dāng)只想條件為真渲染組件時(shí)，邏輯 AND 運(yùn)算符是一個(gè)干凈而高效的選擇。
• 空值合并運(yùn)算符 (??)： 使用空值合并運(yùn)算符為 null 或未定義的操作數(shù)提供默認(rèn)值。當(dāng)您需要確保組件不會(huì)因丟失數(shù)據(jù)而損壞時(shí)，它特別有用。即使數(shù)據(jù)可能不存在，該技術(shù)也能確保穩(wěn)健的渲染。
• Switch Case 語句： 當(dāng)您有多個(gè)條件導(dǎo)致不同的渲染時(shí)可使用 switch case 語句。這種方法可以保持代碼的組織性和可讀性，使其成為具有多個(gè)條件分支的復(fù)雜場景的絕佳選擇。
• 策略方案： 可維護(hù)性高，但是條件復(fù)雜的時(shí)候會(huì)比較麻煩。

針對(duì)特定用例的高級(jí)技術(shù)：

• ErrorBoundry： 主要應(yīng)用在捕獲組件樹的錯(cuò)誤并展示兜底UI的場景。
• 高階組件 (HOC)： HOC 對(duì)于封裝和重用組件邏輯有用，并且在想要根據(jù) props 或用戶特定條件渲染組件的場景中尤其有用
• render Props： 當(dāng)您需要對(duì)渲染進(jìn)行細(xì)粒度控制并希望在組件之間共享渲染邏輯時(shí)，render props模式是一個(gè)不錯(cuò)的選擇

注意事項(xiàng)

1. 過度使用三元運(yùn)算符：

• 嵌套的三元運(yùn)算符的可讀性堪憂，如果發(fā)現(xiàn)使用了嵌套三元運(yùn)算符，這可能表明應(yīng)該重構(gòu)為單獨(dú)的組件或使用更合適的方法，例如if語句或創(chuàng)建新的渲染函數(shù)。

2.濫用邏輯&&造成短路：

• 處理數(shù)字0或者空字符串時(shí)要小心。例如，如果 count 為 0，{count && <Component />}則將無法渲染，因?yàn)?0 在 JavaScript 中是一個(gè)假值。

3. 濫用空值合并運(yùn)算符??：不要將它與邏輯||運(yùn)算符混淆。value ?? alternative如果“value”為空或未定義，則表達(dá)式僅顯示“alternative”，而value || alternative對(duì)于每個(gè)假值（例如，''、0、false）則顯示“alternative”。

以上就是React中條件渲染的常見方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于React條件渲染的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論