隨著現代Web應用的重量從後端轉移到前端，我們不得不花更多的時間去考慮效能優化。在實現條件渲染時也是如此。
所以，試著花適量的時間來優化你的程式碼，同時儘可能多地推動重用元件。這將幫助你在品質和交付時間之間取得適當的平衡。
1. if-else
我們可以將 if-else 條件邏輯應用於React中的JSX。請記住，JSX在執行之前已編譯為JS，因此我們實際上是在用JS程式碼編寫。
/ Example /
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 prop為真，則渲染A，B，C。如果 showA prop 為假，則跳過A並僅渲染B和C。
這裡的問題來自React的差異演算法。這個演算法是React用來知道何時避免浪費渲染的演算法。
在初始 showA 為 true 時，元件將按照其結構A-> B-> C進行渲染。只要 showA 為 true 且其props不變，React就不會重新渲染。
但是，當 showA 變為 false 時，呈現結構將發生變化，結構將為B->C。現在，React會看到一個與之前的結構不同的結構，並且會重新渲染（un-mount 和 re-mount）B和C元件，即使它們的props/state保持不變，不需要重新渲染。這是一種浪費的重新渲染。
2.三元運算子三元運算子是“if-else”條件的縮寫。第一部分說明條件，第二部分則為返回值（如果為true），最後一部分為返回值（如果為false）。
condition ? true_cond : false_cond/ Example /
let cond = truefunction App() { return ( {cond ? <div>If Rendering</div> : <div>Else Rendering</div> } )}Element變數包含JSX元素，因此可以在React元件中的任何地方使用。Element變數使你的程式碼更易於閱讀和理解，因為它消除了元件中的多個return語句。
實施此操作的標準方法：
function App(props) { if(props.loggedIn) { return <div>Logged In</div> } else { return <div>Not Logged In</div> }}在上面的元件中，我們有多個return語句。我們在JSX中使用 if-else 來有條件地呈現部分UI。
我們可以使用Element變數來儲存要在條件語句的每個結果上返回的元素。
/ Example /
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變數 儲存要渲染的最後一個元素。
通過使用Element變數，我們使我們的程式碼更簡潔易讀。
/ 效能 /
這裡的問題與上面的 if-else 項中提到的問題相同。
4. AND運算子（&&）AND運算子用於檢查其左右表示式均正確。
left_expr && right_expr如果表示式解析為true，則AND運算子將返回正確表示式的求值。
Example：
(true && "nnamdi")// "nnamdi"(true && 1234)// 1234另一方面，如果表示式解析為false，則AND運算子將返回false：
(false && "nnamdi")// false(false && 1234)// false如果是這種情況，我們可以使用此AND運算子在React中有條件地呈現JSX。
/ Example /
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我們可以將元件設定為返回 null 值而不是JSX表示式，以便對其進行評估，但不會渲染任何內容。
當元件返回null時，它將阻止React安裝該元件。
function App(props) { if(props.noRender) return null return ( <div>App Component</div> )}如果設定了noRender屬性，則此元件返回null。因此，如果我們不希望App元件渲染，則將設定noRender道具 <App noRender = true />。
請注意，無論如何，都會觸發元件返回null的生命週期方法。
/ 效能 /
如上所述，儘管返回 null 的元件將不會渲染任何內容，但仍將對其進行評估。這意味著不必要的計算可能會在大型應用程式中加起來相當重要。
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
私信回覆：大禮包，送某網精品視訊課程網盤資料，準能為你節省不少錢！