React 条件渲染最佳实践小结(7种)

2023-07-14 15:38:04 70

在React中，条件渲染可以通过多种方式，不同的使用方式场景取决于不同的上下文。在本文中，我们将讨论所有可用于为React中的条件渲染编写更好的代码的方法。

条件渲染在每种编程语言（包括javascript）中都是的常见功能。在javascript中，我们通常使用ifelse语句，switchcase语句和三元运算符编写条件渲染。

以上所有这些方法都适用于React。但是问题是，我们如何才能有效地使用它们？

像你知道的那样，React具有JSX标记，通常我们需要实现条件逻辑去控制组件。但是，我们不能在JSX中直接使用常见的ifelse或switchcase语句。

在JSX中，我们应该使用其他条件渲染方法，例如三元运算符和&&运算符。在这里，我们将讨论更多细节。

以下是我积累的7种条件渲染方法，它们可以在React中使用。每种方式在一定的情况下都有自己的优势。

IfElse条件渲染
使用三元运算符进行条件渲染
&&运算符的条件渲染
带switchcase多条件渲染
枚举对象的多条件渲染
HOC(高阶组件)条件渲染
带有外部库的JSX条件渲染

1.IfElse条件渲染

最佳实践概述

在JSX标记之外的任何地方使用
或者，如果你想在if-else块中执行多行代码

这是所有程序员都能想到的第一个方法，即常见的if-else语句。我们可以在React项目中的任何地方使用它。

在React中，如果要在if或者else块内部或JSX外部的任何地方执行多行代码，最好使用通用的if-else语句。

例如，如果用户登录，我们想执行一些代码。

//*Conditionalrenderingwithcommonif-elsestatement.
if(isLoggedIn){
setUserProfile(userData);
setUserHistory(userHistory);
//otherblockofcodes;
}

或者，当你想基于用户角色定义可访问的内容时。

if(userProfile.role==="superadmin"){
initSuperAdminFunction();
initSuperAdminComponent();
//otherblockofcodes;
}elseif(userProfile.role==="admin"){
initAdminFunction();
initAdminComponent();
//otherblockofcodes;
}else{
initUserComponent();
//otherblockofcodes;
}

如果你只想执行一行代码，例如在if或else块中调用函数，则可以删除括号。

if(userProfile.role==="superadmin")initSuperAdminComponent();
elseif(userProfile.role==="admin")initAdminFunction();
elseinitUserComponent();

if-else中不带括号的条件仅适用于其正下方的一行代码。

JSX中的ifelse语句

你可能知道，我们可以在JSX中的方括号{}中注入和混合一些javascript代码。但是它有一些局限性。

你不能直接向其中插入if-else语句。在JSX中注入if-else语句仅适用于立即调用函数表达式（IIFE），如下所示：

return(

{(()=>{
if(isLoggedIn){
returnI'mloggedin.;
}
})()}

);

如你所见，仅if语句就太冗长了。这就是为什么我不建议在JSX中使用if-else语句的原因。

继续阅读JSX中还有其他一些条件渲染的方法。

2.使用三元运算符进行条件渲染

最佳实践概览

条件变量或函数返回值赋值
当你只想写一行代码来做条件判断
于JSX中的条件渲染

三元运算符是常见if-else语句的快捷方式。使用三元运算符，你可以在行内编写条件渲染，也可以只编写一行代码。

让我们看一下条件渲染的变量值分配示例。

//Conditionalrenderingwithcommonifelse
letisDrinkCoffee;
if(role==="programmer"){
isDrinkCoffee=true;
}else{
isDrinkCoffee=false;
}

//Conditionalrenderingwithternaryoperator
letisDrinkCoffee=role==="programmer"?true:false;

这是函数返回值的条件渲染示例：

//Conditionalrenderingwithcommonifelse
functionisDrinkCoffee(role){
if(role==="programmer"){
returntrue;
}else{
returnfalse;
}
}

//Conditionalrenderingwithternaryoperator
functionisDrinkCoffee(role){
returnrole==="programmer"?true:false;
}

如你所见，你用了三元运算符，就用用一行代码来代替if-else语句。

你也可以在JSX中使用三元运算符，而不是将if-else与立即调用函数表达式（IIFE）一起使用。

假设我们要基于isShow状态有条件地渲染一个小组件。您可以这样编写条件渲染。

return{isShow?:null};

if-elseif-else使用三元运算符

在上面的示例中，我仅向你展示如何使用三元运算符替换if-else语句。

三元运算符还可用于替换多个条件渲染（if-elseif-else）或嵌套的条件渲染。

但是，我不建议你使用它，因为它比普通的if-else语句更难读。

假设你要在JSX中实现嵌套的条件渲染。

return(

{condition_a?(

):condition_b?(

):condition_c?(

):(

)}

);

看起来非常乱，是吧？

对于这种情况，使用IIFE，switch-case语句或枚举对象比三元运算符更好。

3.&&运算符的条件渲染

最佳实践概览

使用它进行简单的条件渲染，不必去执行"else"块中的代码。

使用三元运算符，可以缩短if-else语句的代码量，并为JSX中的条件渲染提供更好的选择。

但是，你知道有比三元运算符更简单的方法吗？

&&运算符可用于替换此类if语句。

//Insteadofusingternaryoperator,
{
isShow?:null;
}

//Useshort-circuit&&operator
{
isShow&&;
}

在三元运算符中，即使没有"else"条件，也需要写"null"表达式以避免语法错误。

使用&&运算符，你不需要写多余的代码。

但是，请记住，不能将&&运算符替换为if-else语句，更不用说if-elseif-else语句了。

4.带switch的多条件渲染-案例

可以在任何位置使用它来进行多个条件渲染，而只有一个变量可以判断条件。

像if-else语句一样，switch-case语句也是几乎每种编程语言中的常见功能。

它用于具有相同类型条件的多个条件渲染。

例如，我们可以使用switch-case语句根据用户角色呈现特定的变量值。

letwelcomeMessage;
switch(role){
case"superadmin":
welcomeMessage="WelcomeSuperAdmin";
//youcanputothercodeshereaswell.
case"admin":
welcomeMessage="WelcomeAdmin";
//youcanputothercodeshereaswell.
case"user":
welcomeMessage="WelcomeUser";
//youcanputothercodeshereaswell.
default:
welcomeMessage="WelcomeGuest";
//youcanputothercodeshereaswell.
}

你还可以使用switch-case语句在JSX中进行条件渲染。但是，你需要将其包装在IIFE中。

假设你要呈现一个基于alert状态设置样式的alert组件。

return(

{(()=>{
switch(status){
case"warning":
return;
case"error":
return;
case"success":
return;
default:
return;
}
})()}

);

你可能已经注意到，两个示例都只有一个变量（role和status）来判断条件。这就是我之前所说的相同类型的条件。

switch-case语句不能用于处理复杂和不同类型的条件。但是你可以使用通用的if-elseif-else语句去处理那些场景。

5.枚举对象的多重条件渲染

仅当您要分配具有多个条件的变量值或返回值时，才使用它。

枚举对象还可以用于在React中实现多个条件渲染。对于JSX标记中的switch-case语句，它是更好的选择。

如你所知，在第5种方法中，你应该将switch-case语句包装在JSX的IIFE中。使用枚举对象，你不需要这样做。

让我们用一个以前的一个示例来距离。你要基于状态呈现alert组件。这是使用枚举对象有条件地呈现它的方式。

constALERT_STATUS={
warning:,
error:,
success:,
info:,
};

return{ALERT_STATUS[status]};

你需要创建一个枚举对象，首先称为“ALERT_STATUS”。然后，只需在JSX中使用[]括号内的状态变量来调用它，该变量的值为'warning'，'error'，'success'或'info'。

如果需要传递其他道具或属性，则可以将ALERT_STATUS更改为这样的函数。

constALERT_STATUS=(message)=>({
warning:,
error:,
success:,
info:,
});

return{ALERT_STATUS(messageState)[status]};

你还可以将变量传递给alert组件。

letnewVariable=ALERT_STATUS(messageState)[status];

当然，你应该首先定义枚举对象。

将枚举对象拆分到单独文件来复用

关于使用枚举对象进行条件渲染的最好的特性是可以复用。

回到示例案例，Alert组件是React中通常可重用的组件。因此，当你要有条件地渲染它时，也可以让它复用。

你可以在单独的文件中定义枚举，然后将它导出。

importReactfrom"react";
importAlertComponentfrom"./path/to/AlertComponent";

exportconstALERT_STATUS=(message)=>({
warning:,
error:,
success:,
info:,
});

然后，在要在组件中使用它时将其导入。

import{ALERT_STATUS}from"./alertStatus";

用法与以前相同。

6.HOC条件渲染

最佳做法摘要

如果要在渲染组件之前实现或检查某些条件，请使用它。

高阶组件（HOC）可用于在React中实现条件渲染。当你要运行某些逻辑或在渲染组件之前进行检查时，可以使用它。

例如，你要在访问某些组件之前检查用户是否已通过身份验证。

你可以使用HOC来保护那些组件，而不是在每个需要身份验证的组件中编写if-else语句。

//ThisisHigherOrderComponent
importReactfrom"react";
exportdefaultfunctionwithAuthentication(Component){
//somecodeofauthenticationlogic/servicethatresultanisLoggedInvariable/state:
letisLoggedIn=true;

returnfunctionAuthenticatedComponent(props){
if(isLoggedIn){
return;
}else{
returnYou'renotauthenticated!

; } }; }

然后，您可以将其导入并在组件中使用。

importwithAuthenticationfrom"./withAuthentication";
constAuthenticatedUIComponent=withAuthentication(AnUIComponent);

return(



);

这样更棒了，是吗？

你可以将HOC用于其他可复用的条件渲染，例如加载指示器实现，空值检查等。

有关HOC（具有功能组件）的更多详细信息，可以在medium(https://medium.com/@albertchu539/higher-order-components-in-a-react-hooks-world-69fe1f0b0791)。

7.带有外部库的JSX条件渲染

最佳做法摘要

避免使用此方法。熟悉上面的6种方法：D

尽管我不建议你使用此方法，但我只是想让你知道，有一个babel插件使JSX具有自己的条件渲染标记。

使用JSX控制语句，您可以像这样在JSX中编写条件渲染。


Truth
;



IfBlock


ElseIfBlock
AnotherElseIfBlock
...


ElseBlock

;

在编译中，这些标签将转换为三元运算符。

一些开发人员使用此插件，因为它对于JSX中的条件渲染看起来更具可读性。

译者注:你还可以实现一个简单的IF组件来实现简单的判断。

constIf=(props)=>{
constcondition=props.condition||false;
constpositive=props.then||null;
constnegative=props.else||null;

returncondition?positive:negative;
};

}else={请先登录}/>

这就是你可以在React中用于条件渲染的所有7种方法。

编码愉快！

译文来自https://dev.to/syakirurahman/react-conditional-rendering-best-practices-with-7-different-methods-16e3#6_Conditional_Rendering_with_HOC
原作者SyakirRahman

译者:蓝色的秋风(github/hua1995116)

到此这篇关于React条件渲染最佳实践小结(7种)的文章就介绍到这了,更多相关React条件渲染内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

React 条件渲染最佳实践小结(7种)

热门推荐

随机推荐