【译】在React中实现条件渲染的7种方法
原文地址：https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications
借助React，我们可以构建动态且高度交互的单页应用程序，充分利用这种交互性的一种方法是通过条件渲染。
目录
挑战
解决方法
使用if…else语句
使用元素变量
使用switch语句
三元运算符
逻辑运算符&&
使用立即调用函数表达式（IIFE）
使用增强的JSX
性能问题
总结
条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在React文档中，这是一种根据条件渲染不同元素或组件的方法。此概念通常被应用到如下情况中：
从API渲染外部数据
显示/隐藏元素
切换应用程序功能
实现权限级别
认证与授权
在本文中，我们将研究在React应用程序中实现条件渲染的7种方法。
挑战
首先，根据在组件state中isLoggedIn的值，我们希望能够在用户未登入时显示Login按钮，在用户登入时显示Logout按钮。
下图是我们初始组件的截图：
代码如下：
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: true
};
}
render() {
return (
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(
;
;
);
...
但是，不建议使用这种方法，因为您编写的代码最终会转换为常规JavaScript条件。仅仅编写JavaScript可能总比对如此琐碎的事情增加额外的依赖要好。
性能问题
作为通用规则，最好确保在实现条件渲染时：
请勿随意更改组件的位置，以防止不必要地卸卸和重载组件。
仅更改与条件渲染有关的标签，而不改变组件中没有变动的部分。
不要在render方法中使组件不必要的臃肿，从而导致组件延迟渲染。
总结
我们已经成功研究了在React中实现条件渲染的7种方法。每种方法都有其自身的优势，选择哪种方法主要取决于实际情况。要考虑的事项包括：
条件渲染标签的大小
可能结果的数目
哪个会更直观和可读
通常，我建议：
当只有一个预期的结果时，使用逻辑&&运算符非常方便。
对于布尔型情况或只有两个可能结果的用例，可以使用if…else，Element变量，三元运算符和IIFE。
如果结果超过2个，则可以使用Switch语句，提取成函数或提取成纯函数组件。
但是，这些仅是建议，最终还是根据实际情况选择。https://www.cnblogs.com/hanksyao/p/12066412.html
This is a Demo showing several ways to implement Conditional Rendering in React.
This is a Demo showing several ways to implement Conditional Rendering in React.
{ if(isLoggedIn){ return } else{ return } }This is a Demo showing several ways to implement Conditional Rendering in React.
{renderAuthButton()}
...
);
}
...
一定要避免下面的操作：
// index.js
...
render() {
let { isLoggedIn } = this.state;
if (isLoggedIn) {
return (