在React中實現條件渲染的5種方法及優缺點

作者：做工程師不做碼農 2020-05-26 11:39:05

隨著現代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道具。

請注意，無論如何，都會觸發組件返回null的生命周期方法。

/ 性能 /

如上所述，盡管返回 null 的組件將不會渲染任何內容，但仍將對其進行評估。這意味著不必要的計算可能會在大型應用程序中加起來相當重要。

責任編輯：華軒來源：今日頭條