英文 | https://blog.bitsrc.io/5-ways-to-implement-conditional-rendering-in-react-64730323b434
翻譯 | web前端開發（ID：web_qdkf)
隨着現代Web應用程序的權重從後端轉移到前端，我們被迫花更多時間思考性能優化。實施條件渲染時也是如此。
因此，嘗試花費適當的時間優化代碼，同時始終努力儘可能地重用組件。這將幫助你在質量和運輸時間之間取得適當的平衡。
你可以嘗試使用Bit.dev之類的組件中心來發布，記錄和組織組件。這樣，你的所有組件都可以在所有項目中重複使用。
1、 if-else
我們可以將if-else條件邏輯應用於React中的JSX。請記住，JSX在執行之前已經編譯爲JS，因此我們實際上是在用JS代碼編寫。
例如：
var globalVar = truefunction App() { if(globalVar) { return <div>If Rendering</div> } else { return <div>Else Rendering</div> }}
性能
if-else語句可能會導致React重新渲染而浪費。在中小型應用程序中可能看不到它，但是在具有成百上千個組件的大型應用程序中，性能下降會非常明顯。
讓我們看一下以下示例：
render() { if(props.showA) { return ( <A /> <B /> <C /> ) } return ( <B /> <C /> )}
根據條件安裝組件A，B，C。
如果showA道具是真實的，則渲染A，B，C。如果showA道具爲假，則跳過A並僅渲染B和C。
這裏的問題來自React的差異算法。這個算法是React用來知道何時避免浪費渲染的算法。
最初showA爲true時，組件將按照其結構A-> B-> C showA進行渲染。只要爲true且其道具不變，React就不會重新渲染。
但是，渲染結構將在showA變爲false 時發生變化。結構將是B->C。現在，React將看到與前一個結構不同的結構，並且將重新渲染（卸載和重新安裝）B和C組件，即使它們的prop / state保持不變。並且不需要重新渲染。這是浪費的重新渲染。
2、三元運算符
三元運算符是“ if-else”條件的縮寫。第一部分說明條件，第二部分則爲返回值（如果爲true），最後一部分爲返回值（如果爲false）。
condition ? true_cond : false_cond
例如：
let cond = truefunction App() { return ( {cond ? <div>If Rendering</div> : <div>Else Rendering</div> } )}
3、元素變量
元素變量包含JSX元素，因此可以在React組件中的任何地方使用。元素變量使您的代碼更易於閱讀和理解，因爲它消除了組件中的多個return語句。
實施此操作的標準方法：
function App(props) { if(props.loggedIn) { return <div>Logged In</div> } else { return <div>Not Logged In</div> }}
在上面的組件中，我們有多個return語句。我們在JSX中使用if-else來有條件地呈現部分UI。
我們可以使用元素變量來存儲要在條件語句的每個結果上返回的元素。
例如：
function App(props) { let element if(props.loggedIn) { element = <div>Logged In</div> } else { element = <div>Not Logged In</div> } return element}
根據if-else語句的求值，我們使用element變量保存要渲染的最後一個元素。
通過使用元素變量，使我們的代碼更簡潔易讀。
性能
這裏的問題與if-else以上項目中提到的問題相同。
4、AND運算子（&&）
AND運算符用於檢查其左右表達式均正確。
left_expr && right_expr
如果表達式解析爲true，則AND運算符將返回正確表達式的求值。
例如：
（true &&“ nnamdi”）//“ nnamdi”（true && 1234）// 1234
另一方面，如果表達式解析爲false，則AND運算符將返回false：
(false && "nnamdi")// false(false && 1234)// false
如果是這種情況，我們可以使用此AND運算符在React中有條件地呈現JSX。
例如：
function App(props) { return ( <div> { props.loggedIn && <h3>You're logged in as {props.data.username}</h3> } </div> )}
我們在JSX中使用AND運算符。花括號使我們能夠在JSX中添加和評估JS表達式。
性能
儘管從本質上來說，它與前面兩種條件渲染的方法沒有什麼不同，但是具有AND（&&）運算符的JSX表達式被認爲是更好的選擇，因爲它迫使在有條件返回和渲染元素時返回相同的結構。
5、返回空值
我們可以將組件設置爲返回null值而不是JSX表達式，以便對其進行評估但不呈現任何內容。
當組件返回null時，它將阻止React安裝該組件。
function App(props) { if(props.noRender) return null
return ( <div>App Component</div> )}
如果設置了noRender屬性，則此組件返回null。因此，如果我們不希望App組件渲染，則將設置noRender props <App noRender=true />。
請注意，無論如何，都會觸發組件返回null的生命週期方法。
性能
如上所述，儘管返回的組件null將不會呈現任何內容，但仍將對其進行評估。這意味着不必要的計算可能會在大型應用程序中加起來相當重要。
