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將不會呈現任何內容，但仍將對其進行評估。這意味着不必要的計算可能會在大型應用程序中加起來相當重要。