React教程第20部分：第一个条件渲染课程

今天，在React教程的下一部分的翻译中，我们将讨论条件渲染。



→ 第1部分：课程概述，React，ReactDOM和JSX普及的原因
→ 第2部分：功能组件
→ 第3部分：组件文件，项目结构
→ 第4部分：父级和子级组件
→ 第5部分：TODO应用程序的开始工作，样式设计的基础
→ 第6部分：关于本课程的一些功能，JSX和JavaScript
→ 第7部分：内联样式
→ 第8部分：继续研究TODO应用程序，熟悉组件的属性
→ 第9部分：组件属性
→ 第10部分：有关使用组件特性和样式的讲习班
→ 第11部分：动态标记生成和映射数组方法
→ 第12部分：研讨会，TODO应用程序的第三阶段工作
→ 第13部分：基于类的组件
→ 第14部分：关于基于类的组件，组件状态的研讨会
→ 第15部分：组件健康研讨会
→ 第16部分：TODO应用程序的第四阶段工作，事件处理
→ 第17部分：TODO应用程序的第五阶段工作，修改组件的状态
→ 第18部分：TODO应用程序的第六阶段工作
→ 第19部分：组件生命周期方法
第20部分：条件渲染的第一课
→ 第21部分：关于条件渲染的第二课​​和研讨会
→ 第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据
→ 第23部分：关于使用表格的第一课
→ 第24部分：第二形式课
→ 第25部分：使用表单的研讨会
→ 第26部分：应用程序体系结构，容器/组件模式
→ 第27部分：课程项目

课36.条件渲染，第1部分

→ 原创

在需要根据特定条件将某些内容显示在页面上的情况下，可以使用条件渲染技术。 在本课程中，我们将讨论如何在应用程序准备工作，加载数据以及准备好后如何替换它时显示特殊消息（很可能由加载屏幕来表示）。此消息是其他信息。

今天，我们将尝试使用create-react-app工具创建的应用程序，该应用程序的App.js文件包含以下代码：

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

此外，在App.js文件所在的文件夹中，还有一个Conditional.js组件文件，其内容如下：

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

在此工作阶段，此应用程序尚无法使用，在分析材料的过程中，我们将对其进行修复。

React开发人员面临的挑战之一是他们必须学习许多可以多种方式使用的工具。 程序员不一定仅限于使用某种工具的一种方式。 这受以下事实的影响：React开发非常接近于使用纯JavaScript开发。

因此，我们有机会使用不同的方法来解决相同的问题，因此可以以不同的方式使用相同的工具。 条件渲染是React的领域，上述思想在该领域表现得特别强烈。 实际上，在开始之前，我想指出的是，尽管我们将分析几种应用该技术的方法，但是使用该技术的实际选择并不限于这些方法。

让我们讨论一下我们现在将要使用的代码。 在文件App.js ，我们有一个基于类的组件。 它的构造函数初始化了一个状态，该状态包含isLoading属性设置为true 。 这种设计通常用于以下情况：为了使组件进入工作状态，例如必须执行对某个API的请求，并且在组件等待数据到达并解析它的同时，需要在屏幕上显示一些内容。 完成API调用可能需要3-4秒，并且您不希望用户在屏幕上看到您的应用程序已崩溃。 结果，状态具有指示应用程序当前是否正在执行某些服务操作的属性。 条件渲染将用于显示一些内容，这些内容告诉用户应用程序当前正在后台加载某些内容。

App组件代码具有componentDidMount()方法，我们将在稍后讨论。 同时，让我们注意render()方法。 在这里，我们输出Condition组件，该组件被导入到App.js文件顶部的代码中。 组件isLoading传递到此组件，这是App组件状态中isLoading属性的当前值。 Conditional组件的代码不返回任何可以在屏幕上显示的内容，我们将在稍后处理该组件。 同时，让我们从App组件代码回到componentDidMount()方法。

回想一下， componentDidMount()方法允许我们在首次显示该组件（在我们的情况下为App组件）之后立即执行一些代码。 在此方法的代码中，我们模拟了对某个API的吸引力。 在这里，我们将计时器设置为一个半秒。 经过这段时间后，将启动传递给setTimeout()的函数的代码。 在此功能中，基于其调用象征着从API加载数据结束的假设，将执行状态更改。 即，其isLoading属性设置为false 。 这表明数据下载已完成，然后应用程序可以正常工作。 在以后的课程中，我们将讨论使用fetch()函数加载数据，因为现在我们将自己局限于上述过程的模拟。

顺便说一句，在这里再次提起组件生命周期方法的主题是合适的。 事实是，一旦isLoading状态属性从true变为false ， Conditional组件就会收到一个新的属性值。 首先，第一次显示组件时，它在isLoading属性中接收true ，然后在状态更改后，接收具有新值的相同属性。 实际上，当状态改变时，再次调用render()方法，结果， Conditional组件也将再次显示。 回想一下， Conditional是一个普通的功能组件，也就是说，它的重新呈现意味着重复调用它所呈现的功能。 但是，当我们重新渲染组件时，从此函数返回的内容可能与之前返回的内容不同。 发生这种变化的原因是我们传递给组件的内容发生了变化。

因此， Conditional组件接受isLoading属性。 在开始编写代码之前，我们将检查其中是否已经存在那些机制。 为此，我们将从组件返回一些标记，并在控制台中显示值props.isLoading 。 之后，组件代码将如下所示：

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

之后的应用程序页面将如下图所示。


浏览器中的应用程序页面

请注意，加载应用程序后立即在控制台中显示false ，在1.5秒后显示false 。 这是由于上述机制在App组件的componentDidMount()方法中的操作所致。

现在让我们谈谈条件渲染。 其实质在于，只有满足特定条件时，我们才会在屏幕上显示某些内容。 在这种情况下，我们可以在Conditional组件中检查props.isLoading的值，而不是在页面上显示字符串Temp ，如果为true ，则在页面上显示文本Loading... 如果该值为false ，则表示下载已结束，您可以从组件返回一些其他文本。 在代码中，它将如下所示：

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

尝试在家里运行这段代码，刷新页面，观察页面加载时如何显示一个文本，过一段时间后显示另一个文本。

有了JavaScript功能，我们可以像上面这样简化上面的代码：

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

如果在if块中检查的条件为true，则此块中的return将起作用，此后函数将完成。 如果条件为假，则不满足该块的return表达式，并且该函数从该函数返回第二个return指定的内容。

现在让我们讨论如何使用三元运算符解决条件渲染的问题。 这种构造在JavaScript中已经存在很长时间了。 它通常在React中用于解决条件渲染任务。 看起来是这样的：

  ? 1 : 2 

如果条件为true，则返回表达式1的值；如果条件为false，则返回表达式2的值。

在我们的例子中，使用三元运算符， Conditional组件的代码可以重写如下：

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

这种设计虽然有效，但看起来很不寻常。 事实是，通常组件会返回更复杂的设计。 因此，将其全部包装在<div>元素中：

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

这样的代码也可以使用，尽管不再有效。 <div&gtl; 。 为了解决这个问题，我们记得在组件返回的标记中使用的JS结构必须用大括号括起来，并相应地重写代码：

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

现在，一切都会恢复正常。

应该注意的是，在实际组件中，它们返回的标记看起来会更加复杂。 在此，例如，在组件显示内容的上部，可能会出现导航栏，在下部，可能会提供页面的“页脚”，依此类推。 它可能看起来像这样：

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

而且，由附加元素的组件返回的标记中的存在不干扰条件渲染的机制。 此外，当props.isLoading为true以及此属性为false时，这些元素都将显示。

可以对此代码进行的另一项改进基于以下事实：由于props.isLoading是一个布尔型属性，其值为true或false ，因此可以直接使用它，而无需使用带有true的严格比较运算符。 结果如下：

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

现在我们来看一个使用条件渲染技术的可行示例，但是可以通过多种方式获得相同的结果。 例如，通常在我们这样的组件中，不显示导航面板和页脚。 此类页面元素通常由App组件本身显示，或由App组件显示的特殊组件显示。

另外，应该注意，这里条件渲染的所有逻辑都位于功能组件的render()方法内部，这样做仅是为了演示在一个地方组装的紧凑代码。 但是，可能， App组件应该负责条件渲染，而类似于我们的Conditional组件的组件应仅显示传递给它的内容。 如果App组件负责确定某个时间点是否正在加载某些内容，并且该操作完成后，则很可能应该负责确定应在页面上显示的内容。 也就是说，在我们的情况下，可以通过检查App组件的render()方法中的isLoading属性并在未完成下载的情况下显示诸如Loading...类的文本来重新组织代码，或者在未完成下载的情况下显示类似于Conditional组件的组件。如果下载完成。 同时， Conditional组件很可能不接受来自App属性，仅显示在任何情况下应输出的内容。

这是根据以下注意事项转换后的App组件代码：

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

这是Conditional组件的更新代码，其中现在没有任何条件的验证：

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

但是，这里我们删除了导航栏和“地下室”，但这在这种情况下并不重要。

总结

在本课程中，您对条件渲染技术进行了首次介绍。 下次我们将继续处理它们。 特别是，您将在该主题的第二课上学习条件渲染和实际工作。

亲爱的读者们！ 如果您正在开发React应用程序，我们请您告诉我们如何执行条件渲染。