在React中实现条件渲染的5种方法及优缺点

 随着现代Web应用的重量从后端转移到前端，我们不得不花更多的时间去考虑性能优化。在实现条件渲染时也是如此。

从网站建设到定制行业解决方案，为提供成都网站制作、网站设计、外贸网站建设服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。创新互联将不断加快创新步伐，提供优质的建站服务。

所以，试着花适量的时间来优化你的代码，同时尽可能多地推动重用组件。这将帮助你在质量和交付时间之间取得适当的平衡。

[[327628]]

1. if-else

我们可以将 if-else 条件逻辑应用于React中的JSX。请记住，JSX在执行之前已编译为JS，因此我们实际上是在用JS代码编写。

/ Example /

 
 

  
  
var globalVar = true 
  
  
function App() { 
  
  
  if(globalVar) { 
  
  
    return 
If Rendering
 
  
  
  } else { 
  
  
    return 
Else Rendering
 
  
  
  } 
  
  
} 
 
 

/ 性能 /

if-else 语句可能会导致React中的渲染浪费。这在中小型应用中可能感觉不到，但在有成百上千组件的大型应用中，性能拖累会相当明显。

让我们研究以下示例：

 
 

  
  
render() { 
  
  
  if(props.showA) { 
  
  
    return ( 
  
  
       
  
  
       
  
  
       
  
  
    ) 
  
  
      } 
  
  
  return ( 
  
  
     
  
  
     
  
  
  ) 
  
  
} 
 
 

根据条件加载组件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 ?  
  
  
     
If Rendering
 
  
  
     : 
  
  
     
Else Rendering
 
  
  
    } 
  
  
  ) 
  
  
} 
 
 

3.Element变量

Element变量包含JSX元素，因此可以在React组件中的任何地方使用。Element变量使你的代码更易于阅读和理解，因为它消除了组件中的多个return语句。

实施此操作的标准方法：

 
 

  
  
function App(props) { 
  
  
  if(props.loggedIn) { 
  
  
    return 
Logged In
 
  
  
  } else { 
  
  
    return 
Not Logged In
 
  
  
  } 
  
  
} 
 
 

在上面的组件中，我们有多个return语句。我们在JSX中使用 if-else 来有条件地呈现部分UI。

我们可以使用Element变量来存储要在条件语句的每个结果上返回的元素。

/ Example /

 
 

  
  
function App(props) { 
  
  
  let element 
  
  
  if(props.loggedIn) { 
  
  
    element = 
Logged In
 
  
  
  } else { 
  
  
    element = 
Not Logged In
 
  
  
  } 
  
  
  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 ( 
  
  
    
 
  
  
    { 
  
  
      props.loggedIn &&  
  
  
      
You're logged in as {props.data.username}
 
  
  
    }