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

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

条件渲染在每种编程语言(包括 javascript)中都是的常见功能。 在 javascript 中,我们通常使用if else 语句,switch case语句和三元运算符编写条件渲染。

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

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

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

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

目录

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

1.If Else条件渲染

最佳实践概述

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

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

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

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

// * Conditional rendering with common if-else statement.
if (isLoggedIn) {
 setUserProfile(userData);
 setUserHistory(userHistory);
 // other block of codes;
}

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

if (userProfile.role === "superadmin") {
 initSuperAdminFunction();
 initSuperAdminComponent();
 // other block of codes;
} else if (userProfile.role === "admin") {
 initAdminFunction();
 initAdminComponent();
 // other block of codes;
} else {
 initUserComponent();
 // other block of codes;
}

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

if (userProfile.role === "superadmin") initSuperAdminComponent();
else if (userProfile.role === "admin") initAdminFunction();
else initUserComponent();

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

JSX 中的 if else 语句

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

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

return (
 <div>
  {(() => {
   if (isLoggedIn) {
    return <div>I'm logged in.</div>;
   }
  })()}
 </div>
);

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

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

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

最佳实践概览

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

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

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

// Conditional rendering with common if else
let isDrinkCoffee;
if (role === "programmer") {
 isDrinkCoffee = true;
} else {
 isDrinkCoffee = false;
}

// Conditional rendering with ternary operator
let isDrinkCoffee = role === "programmer" ? true : false;

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

// Conditional rendering with common if else
function isDrinkCoffee(role) {
 if (role === "programmer") {
  return true;
 } else {
  return false;
 }
}

// Conditional rendering with ternary operator
function isDrinkCoffee(role) {
 return role === "programmer" ? true : false;
}

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

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

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

return <div>{isShow ? <SmallComponent /> : null}</div>;

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

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

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

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

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

return (
 <div>
  {condition_a ? (
   <ComponentA />
  ) : condition_b ? (
   <ComponentB />
  ) : condition_c ? (
   <ComponentC />
  ) : (
   <ComponentD />
  )}
 </div>
);

看起来非常乱,是吧?

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

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

最佳实践概览

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

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

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

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

// Instead of using ternary operator,
{
 isShow ? <SmallComponent /> : null;
}

// Use short-circuit && operator
{
 isShow && <SmallComponent />;
}

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

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

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

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

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

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

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

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

let welcomeMessage;
switch (role) {
 case "superadmin":
  welcomeMessage = "Welcome Super Admin";
 // you can put other codes here as well.
 case "admin":
  welcomeMessage = "Welcome Admin";
 // you can put other codes here as well.
 case "user":
  welcomeMessage = "Welcome User";
 // you can put other codes here as well.
 default:
  welcomeMessage = "Welcome Guest";
 // you can put other codes here as well.
}

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

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

return (
 <div>
  {(() => {
   switch (status) {
    case "warning":
     return <AlertComponent status="warning" message={messageState} />;
    case "error":
     return <AlertComponent status="error" message={messageState} />;
    case "success":
     return <AlertComponent status="success" message={messageState} />;
    default:
     return <AlertComponent status="info" message={messageState} />;
   }
  })()}
 </div>
);

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

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

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

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

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

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

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

const ALERT_STATUS = {
 warning: <AlertComponent status="warning" />,
 error: <AlertComponent status="error" />,
 success: <AlertComponent status="success" />,
 info: <AlertComponent status="info" />,
};

return <div>{ALERT_STATUS[status]}</div>;

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

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

const ALERT_STATUS = (message) => ({
 warning: <AlertComponent status="warning" message={message} />,
 error: <AlertComponent status="error" message={message} />,
 success: <AlertComponent status="success" message={message} />,
 info: <AlertComponent status="info" message={message} />,
});

return <div>{ALERT_STATUS(messageState)[status]}</div>;

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

let newVariable = ALERT_STATUS(messageState)[status];

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

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

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

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

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

import React from "react";
import AlertComponent from "./path/to/AlertComponent";

export const ALERT_STATUS = (message) => ({
 warning: <AlertComponent status="warning" message={message} />,
 error: <AlertComponent status="error" message={message} />,
 success: <AlertComponent status="success" message={message} />,
 info: <AlertComponent status="info" message={message} />,
});

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

import { ALERT_STATUS } from "./alertStatus";

用法与以前相同。

6.HOC 条件渲染

最佳做法摘要

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

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

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

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

// This is Higher Order Component
import React from "react";
export default function withAuthentication(Component) {
 // some code of authentication logic/service that result an isLoggedIn variable/state:
 let isLoggedIn = true;

 return function AuthenticatedComponent(props) {
  if (isLoggedIn) {
   return <Component {...props} />;
  } else {
   return <div class="alert alert-danger">You're not authenticated!</div>;
  }
 };
}

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

import withAuthentication from "./withAuthentication";
const AuthenticatedUIComponent = withAuthentication(AnUIComponent);

return (
 <div>
  <AuthenticatedUIComponent />
 </div>
);

这样更棒了,是吗?

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

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

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

最佳做法摘要

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

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

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

<If condition={test}>
 <span>Truth</span>
</If>;

<Choose>
 <When condition={test1}>
  <span>IfBlock</span>
 </When>
 <When condition={test2}>
  <span>ElseIfBlock</span>
  <span>Another ElseIfBlock</span>
  <span>...</span>
 </When>
 <Otherwise>
  <span>ElseBlock</span>
 </Otherwise>
</Choose>;

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

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

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

const If = (props) => {
 const condition = props.condition || false;
 const positive = props.then || null;
 const negative = props.else || null;

 return condition ? positive : negative;
};
<IF condition={isLoggedIn} then={<Hello />} else={<div>请先登录</div>} />

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

编码愉快!

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

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

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

(0)

相关推荐

  • React学习笔记之条件渲染(一)

    前言 在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态).下面就来看看详细的介绍: 条件渲染 可以根据state的值进行组件的条件渲染.例如: function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; }

  • 详解React 的几种条件渲染以及选择

    对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面 取数据时发生错误, 错误页面 数据正常 加载状态 针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等. 当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的的事时

  • 详解React 条件渲染

    在 React 中,你可以创建不同的组件来封装各种你需要的行为.然后还可以根据应用的状态变化只渲染其中的一部分. React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 先来看两个组件: function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGreeting(props)

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

    在 React 中,条件渲染可以通过多种方式,不同的使用方式场景取决于不同的上下文. 在本文中,我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方法. 条件渲染在每种编程语言(包括 javascript)中都是的常见功能. 在 javascript 中,我们通常使用if else 语句,switch case语句和三元运算符编写条件渲染. 以上所有这些方法都适用于 React. 但是问题是,我们如何才能有效地使用它们? 像你知道的那样,React 具有 JSX 标记,通常我们需要

  • 详解React 代码共享最佳实践方式

    任何一个项目发展到一定复杂性的时候,必然会面临逻辑复用的问题.在React中实现逻辑复用通常有以下几种方式:Mixin.高阶组件(HOC).修饰器(decorator).Render Props.Hook.本文主要就以上几种方式的优缺点作分析,帮助开发者针对业务场景作出更适合的方式. Mixin 这或许是刚从Vue转向React的开发者第一个能够想到的方法.Mixin一直被广泛用于各种面向对象的语言中,其作用是为单继承语言创造一种类似多重继承的效果.虽然现在React已将其放弃中,但Mixin的

  • 了不起的11个JavaScript代码重构最佳实践小结

    模式和重构之间有着一种与生俱来的关系.从某种角度来看,设计模式的目的就是为许多重构行为提供目标. 1.提炼函数 在JavaScript开发中,我们大部分时间都在与函数打交道,所以我们希望这些函数有着良好的命名,函数体内包含的逻辑清晰明了.如果一个函数过长,不得不加上若干注释才能让这个函数显得易读一些,那这些函数就很有必要进行重构. 如果在函数中有一段代码可以被独立出来,那我们最好把这些代码放进另外一个独立的函数中.这是一种很常见的优化工作,这样做的好处主要有以下几点. 避免出现超大函数. 独立出

  • react后台系统最佳实践示例详解

    目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负

  • React条件渲染实例讲解使用

    我们先创建一个用于演示条件渲染的组件 import './App.css'; import React from "react"; class App extends React.Component{ constructor(props){ super(props); this.state = { signIn: false } } increase(){ this.setState({ signIn: !this.state.signIn }) } render(){ let lig

  • 构建Vue大型应用的10个最佳实践(小结)

    这些是我构建大型Vue项目得出的最佳实践,这些技巧将帮助你更高效的编码,并且使其更容易维护和协作. 在我今年的自由职业生涯中我有幸开发了一些大型Vue程序.我所说的这些项目使用了大量Vuex stores

  • jquery提升性能最佳实践小结

    将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示: 复制代码 代码如下: var myLength = myArray.length; for (var i = 0; i < myLength; i++) { // 要做的事 } 在循环外使用append 进行DOM操作是有代价的,如果需要往DOM中添加大量元素,你应该一次批量完成,而不是一次一个. 复制代码 代码如下: // 别这样 $.each(really

  • 15条JavaScript最佳实践小结

    本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深).条目顺序按重要级粗略的从高到低排列. 把外部JavaScript文件放在HTML底部 我们的目标是相同的:为用户尽可能快地显示内容.当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕.因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生.如果你的JavaScript代码只是增加

随机推荐