1.If-else

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

2.三元運算符(?)

三元運算符是條件如果為真則返回一個值，如果為假則返回另一個值，

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

3.邏輯與(&&)

在只關注一種條件結果的情況下，使用邏輯與比三元運算符更簡潔。

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

當空合并運算符 ( ??) 前面的值為null或undefined, 會返回問號右邊的表達式。

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

5.Switch Case 語句

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

6.策略方案

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

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

高階條件渲染場景

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

7.ErrorBoundry

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

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

8.高階組件 (HOC)

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

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

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

9.render props

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

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

條件渲染的最佳實踐

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

針對特定用例的高級技術：

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

注意事項

1. 過度使用三元運算符：

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

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

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

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

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

最新評論