【译】在React中实现条件渲染的7种方法
原文地址：https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applicationsjavascript
借助React，咱们能够构建动态且高度交互的单页应用程序，充分利用这种交互性的一种方法是经过条件渲染。css
目录
条件渲染一词描述了根据某些条件渲染不一样UI标签的能力。在React文档中，这是一种根据条件渲染不一样元素或组件的方法。此概念一般被应用到以下状况中：html
- 从API渲染外部数据
- 显示/隐藏元素
- 切换应用程序功能
- 实现权限级别
- 认证与受权
在本文中，咱们将研究在React应用程序中实现条件渲染的7种方法。java
挑战
首先，根据在组件state中isLoggedIn的值，咱们但愿可以在用户未登入时显示Login按钮，在用户登入时显示Logout按钮。react
下图是咱们初始组件的截图：
git
代码以下：github
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 (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering in React.
</h1>
<button>Login</button>
<button>Logout</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
在线测试：CodeSandBox数组
解决方法
在代码段中，…表示某些与所解释要点没有直接联系的代码。app
1. 使用if…else语句
使用if…else语句容许咱们能够指出，若是条件为true，则执行特定的操做，不然将执行其余操做。使用示例，我将测试if…else一般用于在React中条件渲染的两种方法。dom
- 将条件渲染提取到函数中
在JSX中，咱们能够将JS代码和HTML标签放在一块儿，以确保程序内具备惊人的交互性。为此，咱们使用大括号{}并在其中编写咱们的JS。但在括号内能作事情也是有限的。例如，下面代码的结果并不能实现咱们想要的结果。
// index.js
...
render() {
let {isLoggedIn} = this.state;
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering in React.
</h1>
{
if(isLoggedIn){
return <button>Logout</button>
} else{
return <button>Login</button>
}
}
</div>
);
}
...
要了解更多相关信息，请访问此连接。
为了解决这个问题，咱们将条件逻辑提取到一个函数中，以下所示：
// index.js
...
render() {
let {isLoggedIn} = this.state;
const renderAuthButton = ()=>{
if(isLoggedIn){
return <button>Logout</button>
} else{
return <button>Login</button>
}
}
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering
in React.
</h1>
{renderAuthButton()}
</div>
);
}
...
注意，咱们将逻辑从JSX提取到函数renderAuthButton中。所以，咱们只须要在JSX大括号内执行函数便可。
- 多个返回语句
在使用此方法时，组件必须尽量的简单，以免兄弟或父组件的从新渲染。所以，咱们建立了一个名为AuthButton的新组件。
// AuthButton.js
import React from "react";
const AuthButton = props => {
let { isLoggedIn } = props;
if (isLoggedIn) {
return <button>Logout</button>;
} else {
return <button>Login</button>;
}
};
export default AuthButton;
AuthButton根据经过组件属性isLoggedIn传入的状态值，返回不一样的元素和组件。所以，咱们将其导入index.js并将状态值传入，以下所示：
// index.js
...
import AuthButton from "./AuthButton";
...
render() {
let { isLoggedIn } = this.state;
return (
<div className="App">
...
<AuthButton isLoggedIn={isLoggedIn} />
</div>
);
}
...
必定要避免下面的操做：
// index.js
...
render() {
let { isLoggedIn } = this.state;
if (isLoggedIn) {
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional
Rendering in React.
</h1>
<button>Logout</button>;
</div>
);
} else {
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional
Rendering in React.
</h1>
<button>Login</button>
</div>
);
}
}
...
虽然上述代码将实现相同的结果，但使得组件没必要要的臃肿，同时因为不断从新渲染一个不变的组件而致使性能问题。
2. 使用元素变量
元素变量是上述的将条件渲染提取到函数中的一个扩展。元素变量只是保存JSX元素的变量。所以，咱们能够在JSX外部根据条件将元素/组件赋值给这些变量，仅在JSX渲染变量便可。
// index.js
...
render() {
let { isLoggedIn } = this.state;
let AuthButton;
if (isLoggedIn) {
AuthButton = <button>Logout</button>;
} else {
AuthButton = <button>Login</button>;
}
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering in React.
</h1>
{AuthButton}
</div>
);
}
...
注意咱们如何有条件地将值（组件）分配给AuthButton，而后咱们只须要在JSX中渲染它便可。
3. 使用switch语句
如前所示，咱们可使用if…else语句根据设置的条件从组件返回不一样的标签。使用switch语句也能够达到相同的效果，在该语句中咱们能够为不一样的条件指定标签。看看以下代码：
// AuthButton.js
import React from "react";
const AuthButton = props => {
let { isLoggedIn } = props;
switch (isLoggedIn) {
case true:
return <button>Logout</button>;
break;
case false:
return <button>Login</button>;
break;
default:
return null;
}
};
export default AuthButton;
注意咱们如何根据isLoggedIn的值返回不一样的按钮。当存在两个以上可能的值或结果时，采用此方法更为合理。你也能够经过break语句取消，正如return语句自动终止执行同样。
注意：从组件返回null会使它隐藏自身/不显示任何内容。这是切换组件可见性的好方法。
4. 三元运算符
若是你熟悉三元运算符，那么你应该知道这是编写if语句的一种更简洁的方法。所以咱们也许会这样写：
// index.js
...
render() {
let { isLoggedIn } = this.state;
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering
in React.
</h1>
{isLoggedIn ? <button>Logout</button> : <button>Login</button>}
</div>
);
}
...
但在上例中，这种方法会使组件臃肿，笨重和难以理解，你能够将条件封装在纯函数组件中。以下所示：
// AuthButton.js
import React from "react";
const AuthButton = props => {
let { isLoggedIn } = props;
return isLoggedIn ? <button>Logout</button> : <button>Login</button>;
};
export default AuthButton;
5. 逻辑运算符&&
短路运算是一种用于确保在表达式运算过程当中没有反作用的技术。逻辑&&帮助咱们指定仅在一种状况下执行，不然将被彻底忽略。这对于仅在特定条件为真时才须要执行的状况下是颇有用的。
例如，若是是登陆状态，咱们只需显示Logout按钮，不然咱们什么也不作。以下：
// index.js
...
render() {
let { isLoggedIn } = this.state;
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering
in React.
</h1>
{isLoggedIn && <button>Logout</button>}
</div>
);
}
...
若是isLoggedIn为true，则将显示Logout按钮，不然将不显示任何内容。咱们用相同方法就能够实现最终结果，以下所示。
// index.js
...
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering
in React.
</h1>
{isLoggedIn && <button>Logout</button>}
{!isLoggedIn && <button>Login</button>}
</div>
);
...
这是基于isLoggedIn的值渲染正确的按钮。可是，不建议这样作，由于有更好、更清洁的方法能够达到相同的效果。并且，一旦组件稍大一些，这很容易使你代码看起来混乱和难以理解。
6. 使用当即调用函数表达式（IIFE）
还记的刚才说的JSX局限性吗，在其中没法执行全部JavaScript代码。嗯...这并不彻底正确的，由于有不少方法能够绕过这种行为。一种方法是使用IIFE。
(function () {
statements
})();
点击连接了解更多
经过这种技术，咱们可以直接在JSX内编写条件逻辑，但将其包装在匿名函数中，该匿名函数在运行该部分代码后当即被调用。请参见下面的示例：
//index.js
...
render() {
let { isLoggedIn } = this.state;
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering
in React.
</h1>
{(function() {
if (isLoggedIn) {
return <button>Logout</button>;
} else {
return <button>Login</button>;
}
})()}
</div>
);
}
...
也可使用箭头功能，经过更加简洁的方式编写该代码，以下所示：
// index.js
...
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering in React.
</h1>
{(()=> {
if (isLoggedIn) {
return <button>Logout</button>;
} else {
return <button>Login</button>;
}
})()}
</div>
);
...
7. 使用加强的JSX
某些库公开了扩展JSX的功能，所以能够直接用JSX实现条件渲染。此类库之一是JSX Control Statements。它是Babel插件，可在编译过程当中将相似组件的控制语句转换为JavaScript对应的语句。请参阅下面的示例以了解如何实现。
// index.js
...
return (
<div className="App">
<h1>
This is a Demo showing several ways to implement Conditional Rendering in React.
</h1>
<Choose>
<When condition={isLoggedIn}>
<button>Logout</button>;
</When>
<When condition={!isLoggedIn}>
<button>Login</button>;
</When>
</Choose>
</div>
);
...
可是，不建议使用这种方法，由于您编写的代码最终会转换为常规JavaScript条件。仅仅编写JavaScript可能总比对如此琐碎的事情增长额外的依赖要好。
性能问题
做为通用规则，最好确保在实现条件渲染时：
- 请勿随意更改组件的位置，以防止没必要要地卸卸和重载组件。
- 仅更改与条件渲染有关的标签，而不改变组件中没有变更的部分。
- 不要在render方法中使组件没必要要的臃肿，从而致使组件延迟渲染。
总结
咱们已经成功研究了在React中实现条件渲染的7种方法。每种方法都有其自身的优点，选择哪一种方法主要取决于实际状况。要考虑的事项包括：
- 条件渲染标签的大小
- 可能结果的数目
- 哪一个会更直观和可读
一般，我建议：
- 当只有一个预期的结果时，使用逻辑&&运算符很是方便。
- 对于布尔型状况或只有两个可能结果的用例，可使用if…else，Element变量，三元运算符和IIFE。
- 若是结果超过2个，则可使用Switch语句，提取成函数或提取成纯函数组件。
可是，这些仅是建议，最终仍是根据实际状况选择。
- 1. React 条件渲染最佳实践(7 种方法)
- 2. 【译】React的8种条件渲染方法
- 3. 【译】React条件渲染
- 4. React中的条件渲染
- 5. [译] React 实现条件渲染的多种方式和性能考量
- 6. react条件渲染
- 7. react 条件渲染
- 8. React 条件渲染方法大全
- 9. React的几种条件渲染
- 10. 精读《React 八种条件渲染》
- 更多相关文章...
- • 现实生活中的 XML - XML 教程
- • Spring实例化Bean的三种方法 - Spring教程
- • SpringBoot中properties文件不能自动提示解决方法
- • ☆基于Java Instrument的Agent实现
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
- 1. React 条件渲染最佳实践(7 种方法)
- 2. 【译】React的8种条件渲染方法
- 3. 【译】React条件渲染
- 4. React中的条件渲染
- 5. [译] React 实现条件渲染的多种方式和性能考量
- 6. react条件渲染
- 7. react 条件渲染
- 8. React 条件渲染方法大全
- 9. React的几种条件渲染
- 10. 精读《React 八种条件渲染》