在React中实现条件渲染的5种方法各有利弊

随着现代Web应用程序的重心从后端转移到前端，我们不得不花更多的时间思考性能优化。实现条件渲染时也是如此。因此，请尝试花费适当的时间来优化您的代码，同时尽可能地推动组件的重用。这将帮助您在质量和交货时间之间取得适当的平衡。1.if-else我们可以将if-else条件逻辑应用于React中的JSX。请记住，JSX在执行之前被编译为JS，因此我们实际上是在编写JS代码。/示例/varglobalVar=truefunctionApp(){if(globalVar){return

}else{return}}/性能/if-else语句会导致渲染浪费。这在中小型应用程序中可能不明显，但在具有数百或数千个组件的大型应用程序中，性能拖累可能会非常明显。让我们研究下面的例子：render(){if(props.showA){return()}return()}加载组件A基于acondition，B，C。如果showA属性为真，则渲染A，B，C。如果showA属性为假，则跳过A，只渲染B和C。这里的问题来自于React的diff算法。这个算法是React用来知道何时避免浪费渲染的。当初始的showA为true时，组件将根据其结构A->B->C进行渲染。只要showA为真并且它的props没有改变，React就不会重新渲染。但是当showA变为false时，渲染结构将发生变化，结构将是B->C。现在，React将看到与以前不同的结构，并且将重新渲染（卸载和重新安装）B和C组件，即使它们的props/state保持不变，也无需重新渲染。这是浪费的重新渲染。2.三元运算符三元运算符是“if-else”条件的简称。第一部分描述条件，第二部分是返回值（如果为真），最后一部分是返回值（如果为假）。condition?true_cond:false_cond/Example/letcond=truefunctionApp(){return({cond?

IfRendering

:

ElseRendering

})}3.元素变量元素变量包含JSX元素，所以可以在React组件中的任何地方使用。元素变量使您的代码更易于阅读和理解，因为它消除了组件中的多个返回语句。实现这个的标准方法：functionApp(props){if(props.loggedIn){return

LoggedIn

}else{return

NotLoggedIn

}}在上面的组件中我们有多个返回声明。我们在JSX中使用if-else来有条件地渲染部分UI。我们可以使用Element变量来存储要在条件语句的每个结果上返回的元素。/例子/functionApp(props){letelementif(props.loggedIn){element=

LoggedIn

}else{element=

NotLoggedIn

}returnelement}根据if-else的评估声明中，我们使用元素变量来保存要渲染的最后一个元素。通过使用元素变量，我们使代码更加简洁和可读。/performance/这里的问题和上面if-else项说的一样。4.AND运算符（&&）AND运算符用于检查其左右表达式是否正确。left_expr&&right_expr如果表达式解析为真，AND运算符将返回正确表达式的求值。示例：(true&&"nnamdi")//"nnamdi"(true&&1234)//1234另一方面，如果表达式解析为false，AND运算符将返回false：(false&&"nnamdi")//false(false&&1234)//false如果是这种情况，我们可以使用这个AND运算符在React中有条件地渲染JSX。/Example/functionApp(props){return(

{props.loggedIn&&

You'reloggedinas{props.data.username}

}

)}我们在JSX中使用AND运算符。大括号使我们能够在JSX中添加和计算JS表达式。/性能/虽然和前面两种条件渲染方式本质上是一样的，但是带有AND（&&）运算符的JSX表达式被认为是更好的选择，因为它在强制返回相同结构的同时返回和渲染条件元素。5.返回null我们可以将组件设置为返回一个null值而不是JSX表达式，这样它将被计算但什么也不会被渲染。当组件返回null时，它会阻止React安装该组件。functionApp(props){if(props.noRender)returnnullreturn(

AppComponent

)}如果设置了noRender属性，则此组件返回null。因此，如果我们不希望App组件呈现，则将设置noRender属性。请注意，组件的返回null的生命周期方法无论如何都会被触发。/performance/如上所述，虽然一个返回null的组件不会渲染任何东西，但它仍然会被评估。这意味着在大型应用程序中，不必要的计算加起来会非常可观。