【React】1981- React 的 8 种条件渲染的方法

条件渲染是React中的一个强大功能，它允许开发人员根据某些条件控制组件的显示。它在创建动态和交互式用户界面方面发挥着至关重要的作用。

然而，了解条件渲染在 React 中的工作原理并掌握其实现对于开发人员来说可能具有挑战性，尤其是那些刚接触该框架的开发人员。

今天这篇文章可以为您提供帮助。无论您是初学者还是希望提高技能的经验丰富的开发人员，本文都将为您详细解释 React 中的条件渲染，并提供实际示例来帮助您成为掌握它的人。

那么，让我们深入研究并释放 React 中条件渲染的全部潜力！

了解 React 中的条件渲染

条件渲染是根据一定的条件选择性地渲染组件的过程。这使得开发人员能够创建更加动态和响应更快的用户界面。

在 React 中，有几种方法可以在 React 应用程序中处理条件渲染。

• If/Else 语句
• 三元运算符 (?)
• 逻辑与 (&&)
• 空合并运算符 (??)
• Switch Case 语句
• 误差边界
• 高阶组件 (HOC)
• 渲染道具

让我们深入它们的使用方法，我们现在开始吧。

01、If/Else 语句

传统的 if/else 语句用于分支逻辑。它们帮助根据条件是真还是假来执行代码的某些部分。这是一种根据条件控制流量的简单方法。

if/else 语句检查条件：如果条件为真，则运行“if”块内的代码。否则，“else”块将运行。

02、三元运算符 (?)

三元运算符是“if-else”语句的单行替代品。它检查条件，如果为真则返回一个值，如果为假则返回另一个值。它简洁，非常适合 JSX 中的简单条件渲染。

03、逻辑与（&&）：

如果第一个数为真，逻辑 && 运算符返回第二个数，否则返回第一个数。在 React 中，只要条件为真，就可以很方便地包含一个元素。

04、空合并运算符 (??)

空合并运算符 (??) 为空或未定义的操作数提供默认值。它在 React 中用于设置后备内容或值，确保组件不会因丢失数据而损坏。

这里，useState钩子用于初始化用户状态。我们故意将年龄保留为未定义，以表示某些信息可能不会立即出现或丢失的情况。

在组件内，我们使用空合并运算符 (??) 来处理年龄可能为空或未定义的可能性。如果缺少 user.age，则 userAge 变量默认为“Not available”，然后在渲染的输出中使用该变量。这确保了即使年龄数据不存在，我们的组件也可以优雅地处理这种缺失并提供后备，维护一个完整的、用户友好的界面。

05、Switch Case 语句

“switch”语句评估表达式并执行相关的“case”块，匹配表达式的值。它非常适合在 React 中导致不同渲染的多种条件，确保代码有组织且可读。

06、高级条件渲染技术

掌握基本方法后，您可能会遇到需要更复杂解决方案的场景。这些先进技术通常用于较大的应用程序或需要更高抽象级别的特定情况：

误差边界：

错误边界是在其子组件树中的任何位置捕获 JavaScript 错误、记录这些错误并显示后备 UI 而不是崩溃的组件树的组件。它们就像组件的捕获块。

在条件渲染中的作用：当组件子树中出现错误时，错误边界有条件地渲染后备 UI。整个应用程序不会崩溃并显示白屏，而是仅将出现错误的组件子树替换为用户定义的后备 UI。

07、高阶组件 (HOC)：

HOC 是包装组件的函数，允许您重用组件逻辑。他们可以根据收到的 props 有条件地渲染组件，从而提供更灵活的方式来跨组件共享逻辑。

想象一下，我们有一个功能，应该只有拥有高级帐户的用户才能看到。我们将创建一个 HOC 来检查用户的帐户类型并有条件地相应地呈现组件。

首先，我们在自己的文件中定义 HOC withPremiumFeature（例如 withPremiumFeature.js）：

现在，我们将创建一个组件，我们希望根据用户的高级状态有条件地呈现该组件。这可以是任何功能组件 - 例如， SpecialFeature.js。

接下来，我们将使用 withPremiumFeature HOC 增强 SpecialFeature 组件，以添加基于用户帐户类型的条件渲染功能。

08、渲染 Prop

此模式涉及一个作为 prop 传递给组件的函数，返回一个 React 元素。它用于在组件之间共享渲染逻辑，允许您根据状态、道具或渲染prop中包含的逻辑有条件地渲染 UI 的不同部分。

让我们考虑一个场景，我们想要创建一个可重用的组件来跟踪用户是否在线，然后根据该状态有条件地呈现内容。

首先，我们创建 UserOnlineStatus 组件。它不会自行渲染某些内容，而是接受一个函数作为其“render”属性，并将渲染责任委托给该函数。它还会将“isOnline”状态传递给该函数。

现在，在父组件中，我们可以使用 UserOnlineStatus 并向其传递一个函数，以根据用户的在线状态呈现我们想要的内容。

在此示例中，UserOnlineStatus 组件负责确定用户的在线状态，但不直接渲染 UI。

相反，它将渲染委托给一个 prop（render prop），该 prop 是由父组件（在本例中为 App）传递的函数。此函数 (renderStatus) 获取 isOnline 状态并根据此信息决定渲染内容。

React 条件渲染的最佳实践

了解各种条件渲染技术至关重要，但了解何时在 React 应用程序中使用每种技术也同样重要。以下是一些指导您决策过程的最佳实践：

1. If/Else 语句：使用传统的 if/else 语句进行简单的分支逻辑，例如基于单个条件渲染组件。这种方法简单易读。当您的条件简单且有限时，if/else 语句通常是一个不错的选择。
2. 三元运算符 (?)：三元运算符非常适合简洁的条件渲染，特别是当您需要基于单个条件渲染两个组件之一时。它非常适合您希望保持 JSX 干净且可读的简单场景。
3. 逻辑 AND (&&)：当您只想在条件为真时渲染组件时，逻辑 AND 运算符是一个干净而高效的选择。但是，在处理可能为假的值（例如数字或空字符串）时要小心。
4. 空值合并运算符 (??)：使用空值合并运算符为 null 或未定义的操作数提供默认值。当您需要确保组件不会因丢失数据而损坏时，它特别有用。即使数据可能不存在，该技术也能确保稳健的渲染。
5. Switch Case 语句：当您有多个条件导致不同的渲染时，请使用 switch case 语句。这种方法可以保持代码的组织性和可读性，使其成为具有多个条件分支的复杂场景的绝佳选择。

针对特定用例的高级技术：

错误边界：当您需要优雅地处理 JavaScript 错误并防止整个应用程序崩溃时，错误边界就会发挥作用。当您想要隔离并有条件地渲染特定组件子树的后备 UI 时，请考虑使用它们。即使出现错误，错误边界也有助于保持流畅的用户体验。

高阶组件 (HOC)：HOC 对于封装和重用组件逻辑非常有用，并且在您想要根据 props 或用户特定条件有条件地渲染组件的场景中表现出色。例如，您可以使用 HOC 来呈现仅对高级用户可用的功能。它们提供了一种灵活的方式来跨组件共享逻辑，同时保持代码库干净。

渲染道具：当您需要对渲染进行细粒度控制并希望在组件之间共享渲染逻辑时，渲染道具模式是一个不错的选择。它非常适合需要根据状态、道具或渲染道具函数中包含的复杂逻辑有条件地渲染 UI 的不同部分的场景。

通过遵循这些最佳实践，您将在 React 应用程序中实现条件渲染时做出明智的决策。每种技术都有其优点，选择适合工作的技术可以带来更干净、更易于维护的代码和更好的用户体验。

条件渲染中的提示、技巧和常见陷阱

乍一看，浏览 React 中的条件渲染似乎很简单。然而，经验丰富的开发人员知道，这个过程充满了细微差别，如果被误解，可能会导致错误和低效渲染。以下是一些需要注意的专业提示和常见陷阱：

1. 过度使用三元运算符：

提示：虽然三元运算符（条件？真：假）因其简洁性而非常出色，但它们可能会损害复杂嵌套条件下的可读性。将它们用于简单的条件。

陷阱：避免嵌套三元运算符。如果您发现自己这样做，这可能表明您应该重构为单独的组件或使用更合适的方法，例如 if 语句或创建特定的渲染函数。

2.滥用逻辑&&造成短路：

提示：逻辑 && 运算符是在条件为真时呈现组件的一种简洁方式。但是，请确保条件的错误状态不会无意中呈现任何内容。对于数字（0 为假）和字符串尤其如此。

陷阱：处理数字时要小心。例如，如果 count 为 0，{count && <Component />} 将无法渲染 <Component />，因为 0 在 JavaScript 中是一个假值。

3. 滥用空值合并运算符??：

提示：当您想要为 null 或未定义值而不是所有虚假值呈现替代内容时，请使用 nullish 合并运算符 (??)。

陷阱：不要将其与逻辑 || 混淆 操作员。表达式值?? 如果“value”为 null 或未定义，alternative 仅显示“alternative”，而 value || Alternative 显示每个假值的“替代”（例如，''、0、false）。

结论

对于希望创建动态和交互式用户界面的开发人员来说，掌握 React 中的条件渲染是一项基本技能。通过对本指南中讨论的概念和技术的深入理解，您将有能力应对 React 项目中的复杂渲染挑战。

快乐编码！