AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React 条件渲染最佳实践(7 种方法)

2022-05-12 429
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在 React 中，条件渲染可以通过多种方式，不同的使用方式场景取决于不同的上下文。在本文中，我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方法。

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


原作者 Syakir Rahman

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


往期回顾


在 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 种方法。


coding快乐！

文章标签：
JavaScript
前端开发
程序员
关键词：
React Native渲染
React Native最佳实践
React Native方法
react.js方法
react.js渲染
1431649393130558
目录
相关文章
大树营养快线
|
23天前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
大树营养快线
31 3
听白
|
1月前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
听白
23 1
光明顶阳顶天
|
28天前
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求，合理运用相关特性和策略，不断进行优化和调整，以达到最佳的性能提升效果。同时，要密切关注 React 的发展和更新，以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法，让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
光明顶阳顶天
104 59
想飞的雪糕
|
20天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新：深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点，探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化，React 利用虚拟 DOM 和 `diffing` 算法优化更新，Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略，如使用 `key`、分片渲染、虚拟滚动等，帮助开发者在处理大型数组时提升性能。总结指出，选择合适的框架应根据项目复杂度和性能需求来决定。
想飞的雪糕
30 2
夏天49597
|
1月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库，用于构建用户界面。本文从基础概念出发，深入探讨了 React 渲染优化的常见问题及解决方法，包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题，并提供了代码示例，帮助开发者提升应用性能。
夏天49597
50 6
大树营养快线
|
1月前
|
前端开发
react hooks父组件调用子组件方法？
【10月更文挑战第6天】
大树营养快线
301 4
跃@sir
|
1月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
跃@sir
48 4
万少！
|
1月前
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
万少！
12 1
听白
|
1月前
|
前端开发 JavaScript
React 条件渲染
10月更文挑战第9天
听白
25 0
前端徐徐
|
1月前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式：作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件，对比分析了每种方式的优缺点，最终推荐将组件作为函数传递，因为它提供了更好的可控性、灵活性和可扩展性。
前端徐徐
36 0