隨着現代Web應用的重量從後端轉移到前端,我們不得不花更多的時間去考慮性能優化。在實現條件渲染時也是如此。
所以,試着花適量的時間來優化你的代碼,同時儘可能多地推動重用組件。這將幫助你在質量和交付時間之間取得適當的平衡。
1. if-else
我們可以將 if-else 條件邏輯應用於React中的JSX。請記住,JSX在執行之前已編譯爲JS,因此我們實際上是在用JS代碼編寫。
/ Example /
var globalVar = true
function 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 = true
function App() {
return (
{cond ?
<div>If Rendering</div>
:
<div>Else Rendering</div>
}
)
}
3.Element變量
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 的組件將不會渲染任何內容,但仍將對其進行評估。這意味着不必要的計算可能會在大型應用程序中加起來相當重要。