条件渲染：根据条件显示UI 45 分钟

在React应用中，用户界面（UI）往往不是一成不变的。它需要根据不同的条件显示或隐藏特定的元素。例如，当用户登录后显示个人信息，未登录时显示登录按钮；当数据正在加载时显示加载指示器，加载完成后显示数据；或者根据用户操作显示不同的消息。这种根据条件决定渲染什么（或者不渲染什么）的机制，就是条件渲染（Conditional Rendering）。

条件渲染是React中一个非常核心且强大的概念，它允许你构建动态且响应用户状态变化的UI。在本节中，我们将学习几种在React中实现条件渲染的常见方法。

1. 使用 if/else 语句 (在 JSX 外部)

这是最直观的条件渲染方式。你可以在组件的 return 语句之前使用标准的 JavaScript if/else 语句来决定渲染哪个 JSX 片段。这是处理复杂条件逻辑的理想选择。

解释： Greeting 组件接收一个 isLoggedIn 的 props。根据 isLoggedIn 的布尔值，它会返回两种不同的 h1 元素。

2. 使用逻辑 && 运算符 (在 JSX 内部)

当你只想在条件为 true 时渲染一个元素，而条件为 false 时不渲染任何东西（或者渲染 null），逻辑 && 运算符会非常方便。在 JavaScript 中，true && expression 的结果是 expression，而 false && expression 的结果是 false。

解释： 在 Mailbox 组件中，只有当 unreadMessages.length 大于 0 时，<h2> 元素才会被渲染。

注意： 如果 && 左侧的表达式返回 0，React 会将其渲染出来。因此，请确保你的条件是一个布尔值或者可以安全地被渲染为 null 的值。例如，0 && <p>消息</p> 会在页面上显示 0，这可能不是你想要的。

3. 使用三元运算符 (在 JSX 内部)

三元运算符 condition ? expression1 : expression2 允许你在条件为 true 时渲染 expression1，在条件为 false 时渲染 expression2。这对于简单的二选一条件渲染非常有用，并且可以直接在 JSX 内部使用。

解释： 在 LoginControl 组件中，我们使用 useState 来管理 isLoggedIn 状态。根据这个状态，三元运算符会渲染不同的按钮和文本。点击按钮可以切换登录状态，从而动态更新UI。

4. 阻止组件渲染 (返回 null)

在某些情况下，你可能希望组件完全隐藏自身，而不是渲染任何东西。你可以让组件在 render 方法（对于类组件）或函数组件的 return 语句中返回 null。返回 null 不会影响组件的生命周期方法（例如 useEffect 仍然会执行）。

解释： WarningBanner 组件根据 props.warn 的值来决定是否渲染。如果 warn 为 false，它直接返回 null，页面上就不会出现警告横幅。

最佳实践和注意事项

• 保持条件逻辑简单： 尽量避免在 JSX 中编写过于复杂的条件逻辑。如果条件变得复杂，可以将其提取到单独的变量、函数，或在 return 语句之前使用 if/else 语句进行处理。
• 使用合适的工具： if/else 适用于在 JSX 外部决定渲染整个不同组件或大段内容的场景；&& 适用于“有则显示，无则不显示”的场景；三元运算符适用于“二选一”的场景。
• 避免在 && 左侧使用 0： 如前所述，0 && <Element /> 会渲染 0。如果你需要检查一个数字是否大于 0 才渲染，最好写成 someNumber > 0 && <Element /> 而不是 someNumber && <Element />。
• 可读性： 始终优先考虑代码的可读性。使用括号来清晰地分隔 JSX 片段，尤其是在三元运算符中。

总结

条件渲染是构建交互式和动态React应用的关键技术。通过本节，你学会了:

• 在组件函数内部使用 if/else 语句来返回不同的 JSX。
• 在 JSX 内部使用逻辑 && 运算符来根据条件选择性地渲染元素。
• 在 JSX 内部使用三元运算符来根据条件在两个元素之间进行选择。
• 让组件返回 null 来完全阻止其渲染。

掌握这些条件渲染技术，你将能够创建更加灵活和响应用户交互的React界面。