随着现代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 的组件将不会渲染任何内容，但仍将对其进行评估。这意味着不必要的计算可能会在大型应用程序中加起来相当重要。

最后

以上就是彩色糖豆为你收集整理的在React中实现条件渲染的5种方法及优缺点1. if-else2.三元运算符3.Element变量4. AND运算符（&&）5.返回null的全部内容，希望文章能够帮你解决在React中实现条件渲染的5种方法及优缺点1. if-else2.三元运算符3.Element变量4. AND运算符（&&）5.返回null所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。