React条件渲染最佳实践（7种方法）
时间：2023-04-02 11:55:27
HTML
在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语句。例如，如果用户登录，我们想要执行一些代码。//*使用常见的if-else语句进行条件渲染。if(isLoggedIn){setUserProfile(userData);设置用户历史（用户历史）；//其他代码块；}或者，当您想根据用户角色定义可访问的内容时。if(userProfile.role==="superadmin"){initSuperAdminFunction();initSuperAdminComponent();//其他代码块；}elseif(userProfile.role==="admin"){initAdminFunction();初始化管理组件();//其他代码块；}else{initUserComponent();//其他代码块;}如果只想执行一行代码，例如在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），像这样：div>;}})()}
);如您所见，单独的if语句过于冗长。这就是为什么我不建议在JSX中使用if-else语句。继续阅读其他一些在JSX中进行条件渲染的方法。使用三元运算符进行条件渲染最佳实践概述条件变量或函数返回值赋值当您只想编写一行代码来进行条件渲染时JSX中的条件渲染三元运算符是常见if-else语句的快捷方式。使用三元运算符，您可以内联或仅在一行代码中编写条件渲染。让我们看一个为条件渲染分配变量值的例子。//使用普通的条件渲染ifelseletisDrinkCoffee;if(role==="programmer"){isDrinkCoffee=true;}else{isDrinkCoffee=false;}//使用三元运算符的条件渲染letisDrinkCoffee=role==="programmer"?真假;下面是一个函数返回值的条件渲染示例：}else{返回错误；}}//带三元运算符的条件渲染functionisDrinkCoffee(role){returnrole==="programmer"?true:false;}如您所见，您使用了三元运算符函数，它用一行代码替换了if-else语句。您还可以在JSX中使用三元运算符代替if-else和立即调用函数表达式(IIFE)。假设我们想根据isShow状态有条件地渲染一个小部件。您可以像这样编写条件渲染。返回
{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语句。//而不是使用三元运算符，{isShow?
:null;}//使用短路&&运算符{isShow&&
;}在三元运算符中，即使没有“else”条件，也需要写“null”表达式以避免语法错误。使用&&运算符，您无需编写额外的代码。但是，请记住，&&运算符不能被if-else语句替换，更不用说if-elseif-else语句了。4.带开关的多条件渲染——案例可以在任意位置使用它进行多条件渲染，并且只有一个变量可以判断条件。~~和if-else语句一样，switch-case语句也是几乎所有编程语言的共同特征。它用于具有相同类型条件的多个条件渲染。例如，我们可以使用switch-case语句来根据用户角色渲染特定的变量值。letwelcomeMessage;switch(role){case"superadmin":welcomeMessage="欢迎超级管理员";//你也可以在这里放置其他代码。case"admin":welcomeMessage="欢迎管理员";//你也可以在这里放置其他代码。case"user":welcomeMessage="欢迎用户";//你也可以在这里放置其他代码。默认值：welcomeMessage="欢迎光临"；//你也可以在这里放置其他代码。}你还可以在JSX中使用switch-case语句进行条件渲染。但是，您需要将其包装在IIFE中。假设您想要呈现一个基于警报状态设置样式的警报组件。返回(
{(()=>{switch(status){"message={messageState}/>;case"success":return
;default:return
;}})()}
);您可能已经注意到，两个示例都只有一个变量（角色和状态）来判断条件。这与我之前谈到的情况相同。switch-case语句不能用于处理复杂和不同类型的条件。但是您可以使用通用的if-elseif-else语句来处理这些情况。5.枚举对象的多条件渲染只有当你想给变量赋值或返回值时才使用它有多个条件。~~Enum对象也可以用来在React中实现多重条件渲染。它是JSX标记中switch-case语句的更好选择。如您所知，在第5种方法中，您应该将switch-case语句包装在JSXIIFE中。使用枚举对象，您不需要这样做。让我们使用前面的例子来计算距离。您想要根据状态呈现警报组件。这就是使用枚举对象有条件地呈现它的方式。constALERT_STATUS={警告：
，错误：
，成功：
，信息：
,};返回
{ALERT_STATUS[状态]}
;您需要创建一个枚举对象，首先称为“ALERT_STATUS”。然后，只需在JSX中使用[]括号内的状态变量调用它，该状态变量的值为'warning'、'error'、'success'或'info'。如果您需要传递其他道具或属性，您可以将ALERT_STATUS更改为这样的函数。constALERT_STATUS=(message)=>({警告：
，错误：
，成功：
,信息:
,});返回
{ALERT_STATUS(messageState)[status]}
;你也可以将变量传递给警报组件。让newVariable=ALERT_STATUS(messageState)[status];当然，你应该先定义枚举对象。将枚举对象拆分为单独的文件以供重用使用枚举对象进行条件渲染的最佳特性是它们可以重用。回到示例案例，Alert组件是React中通常可重用的组件。所以当你想有条件地渲染它的时候，你也可以复用它。您可以在单独的文件中定义枚举，然后将其导出。从“react”导入React；从“./path/to/AlertComponent”导入AlertComponent；exportconstALERT_STATUS=(message)=>({warning:
,error:
，成功：
，信息：
，});然后，当你想在你的组件中使用它时，导入它。从“./alertStatus”导入{ALERT_STATUS}；使用方法和以前一样。6.HOC条件渲染最佳实践总结如果你想在渲染你的组件之前实现或检查某些条件，请使用它。~~在React中可以使用高阶组件（HOC）来实现条件渲染。当你想在渲染组件之前运行一些逻辑或检查时使用它。例如，您想在访问某些组件之前检查用户是否经过身份验证。您可以使用HOC来保护这些组件，而不是在每个需要身份验证的组件中编写if-else语句。//这是高阶组件importReactfrom"react";exportdefaultfunctionwithAuthentication(Component){//导致isL??oggedIn变量/状态的一些身份验证逻辑/服务代码：letisLoggedIn=true;返回函数AuthenticatedComponent(props){if(isLoggedIn){return
;}else{return
您未通过身份验证！ ;然后，你就可以在组件中导入和使用它了。从“./withAuthentication”导入withAuthentication；constAuthenticatedUIComponent=withAuthentication(AnUIComponent);return(
);这更好，不是吗？您可以将HOC用于其他可重用的条件渲染，例如加载指示器实现、空检查等。有关HOC（具有功能组件）的更多详细信息，请访问medium(https://medium.com/@alberchu539/higher-在反应钩子世界中订购组件69fe1f0b0791）。7.使用外部库进行JSX条件渲染的最佳实践总结避免使用这种方法。熟悉上面的6种方法:D虽然我不推荐这种方法，但我只是想让你知道有一个babel插件可以让JSX带有自己的条件渲染标签。使用JSX控制语句，您可以像这样在JSX中编写条件渲染。
