在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部分：课程项目课34.组件生命周期方法，第1部分
→
原创开发React应用程序的功能之一是事实，我们编写了相当简单的JavaScript代码来驱动React的内部机制，从而为我们提供了开发应用程序接口和处理数据的巨大机会。 同时，我们在生命周期中使用的组件会经历某些阶段。 通常，将应用程序中某个组件发生的事情与一个人的生活进行比较。 人们出生，生活，生活中都会发生一些重大事件，然后死亡。 React中的组件与人相似，因为它们也是“出生”，“活着”和“死亡”的。 使用组件，由于它们的生命周期方法在其“生命”的特殊时刻被调用，我们可以对它们发生的事情做出反应。
最近，React开发团队已经淘汰了三种组件生命周期方法。 但是，我们将考虑这些方法，因为它们仍然可以使用，并且可以在现有代码中找到它们。 另外，React中增加了两个新的组件生命周期方法，我们将在下一课中进行讨论。
我们将只考虑与刚开始学习React的人最相关的最重要方法。 当您继续掌握该库时，将可以尝试其他方法。
这是一些关于React组件生命周期方法的好材料，这些方法在React 16.3之前是相关的。
在这里 ，可以从React开发人员官方博客的出版物中找到有关React 16.3中发生的更改的信息。
现在，让我们开始讨论您最常遇到的React组件的生命周期方法。
我们将一如既往在这里使用演示项目。 在这种情况下，我们从
App.js文件中的使用create-react-app创建的标准项目开始，该文件包含以下代码：
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = {} } render() { return ( <div> Code goes here </div> ) } } export default App
首先，让我们看一下已经用于基于类的组件的方法。 这是
render()方法。
通常，在谈到组件生命周期方法时不会提到他。 我认为，将这种方法与一个人进行比较时，可以与外出之前的穿戴进行比较。 此方法的目的是确定屏幕上将显示的内容，即组件的外观。 在组件的生命周期中，可以多次调用
render()方法。 因此，当React确定与组件相关的某些事物已经改变时，例如状态或属性，即可能影响组件外观的事物，React可以调用此方法。 如果我们继续与人进行类比，则可以进行比较，以便一个人可以决定换衣服。 例如，为了在工作日后准备某种假日活动。
现在，让我们看看另一个组件生命周期方法
componentDidMount() 。 与其他任何基于类的组件方法一样，在组件类的主体中声明此方法：
componentDidMount() { }
该方法在组件的生命周期中被调用，可以与该组件的“出生”进行比较。 在将组件安装（插入）到DOM树中之后，将触发此方法。 同时，例如，如果在更改了一些会影响组件外观的数据后，将再次呈现该数据，则不会调用
componentDidMount()方法。 发生这种情况的原因是，在执行此类操作时，并未从DOM树中删除该组件，然后将该组件再次包含在该树中。
如果开发人员需要来自外部源的数据，则
componentDidMount()方法通常用于对某些API进行调用。 假设我们在这里考虑的组件实际上称为
TodoList并且是在Todo应用程序中形成待办事项列表的组件。 这种
componentDidMount()方法可以从服务器数据库加载正确显示存储在服务器上的待办事项列表所需的资料。 结果，在完成组件的安装之后，我们可以在
componentDidMount()方法中加载组件正确显示在页面上所需的数据。 我们还将讨论如何加载组件所需的数据，但是现在您可以记住，这是
componentDidMount()最常见的用例。
我们讨论的下一个组件生命周期方法称为
componentWillReceiveProps() 。 可以将此方法与某人收到某人的礼物时发生的情况进行比较。 因此，组件可以从父组件接收属性。 每次组件获取属性时，都会调用此方法。 同时，每次父组件将属性传递给子组件时（不仅是第一次发生这种情况时），都会调用此方法。 例如，如果父组件决定更改传递给子组件的属性，则例如，在
componentWillReceiveProps()方法中，我们可以检查新属性是否与已经传递给组件的属性不同。 事实是，如果新属性与旧属性没有不同，这意味着它们的收据不会发生任何变化，这意味着在找出之后，我们将无能为力。 如果新属性与旧属性不同，我们可以执行某些操作。 通常，此方法在组件类的主体中声明如下：
componentWillReceiveProps(nextProps) { }
在这里，通常将它用作参数名称
nextProps ，但是您可以根据需要命名该参数。 为了比较已经转移到组件的某些特定属性与之前已经传递给它的属性，并决定进一步的操作，可以使用以下构造：
componentWillReceiveProps(nextProps) { if (nextProps.whatever !== this.props.whatever) {
通常以这种方式使用此方法。
但是，正如已经提到的，在React 16.3发行之后，组件生命周期中的某些方法已被弃用，
componentWillReceiveProps()是其中一种方法。
在React 17之前，这些传统方法仍然可以使用，尽管最好不要使用。 如果您无法使用所讨论的方法，则需要将其称为
UNSAFE_componentWillReceiveProps() 。 在React 17之后，
componentWillReceiveProps()方法的名称将没有任何特殊含义。
知道此方法很有用，以便能够理解过时的代码，但不会在现代React应用程序的开发中使用。
另一个有趣的组件生命周期方法称为
shouldComponentUpdate() 。 如果我们继续与某人进行比较，他会回忆起某人正在考虑是否需要换衣服的那一刻。 在正常情况下，如果React无法完全确定是否重新渲染组件，它将以防万一。 不管是否必要，根据应用程序逻辑是否如此。
即使没有与组件相关的更改，这也会导致React重新渲染组件。 这可能会使应用程序变慢，因为按照这种原理，React会处理组成应用程序的所有组件。
shouldComponentUpdate()方法允许开发人员优化应用程序。 在这里，您可以实现一些逻辑，以帮助您确定需要更新组件。 此方法通常这样声明：
shouldComponentUpdate(nextProps, nextState) {
而且，从该方法开始，如果组件需要重新渲染，并且考虑到新的属性和状态，则需要返回
true 。 否则，必须从中返回
false 。 实际上，从此方法返回
false会导致以下事实：未更新组件，并且应用程序运行得更快，但是通过这样做，您需要确保该组件确实不需要重新渲染。 如果需要更新组件，并且此方法返回
false ，则将导致错误，这些错误将很难处理。
我们将讨论的另一个组件生命周期方法称为
componentWillUnmount() 。 此方法标记了组件的“寿命”的结束-从DOM树中将其删除并从屏幕上消失的那一刻。
此方法主要用于释放组件占用的资源，并在删除组件之前对其进行排序。 例如，如果
componentDidMount()方法配置了类似事件侦听器的功能，则当用户滚动页面时，将执行某些代码，因此可以在
componentWillUnmount()删除此类事件侦听器。 实际上，此方法具有许多应用程序，旨在从应用程序中删除在组件消失后原来不需要的所有内容。
这是我们
App组件的完整代码，其中添加了生命周期方法：
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = {} } componentDidMount() {
这节课到此结束，尽管应该注意，React组件的生命周期方法不仅限于我们今天回顾的方法。
课程35.组件生命周期方法，第2部分
→
原创正如上一课中已经提到的那样，当React 16.3发布时，据报道这三种组件生命周期方法已经过时了。 这些方法是
componentWillMount() ，
componentWillReceiveProps()和
componentWillUpdate() 。 还报告了两种新方法。 这是静态的
getDerivedStateFromProps()方法和
getSnapshotBeforeUpdate()方法。 不能说这些方法将在本课程的未来课程中发挥重要作用，但是尽管如此，我们仍将在这里了解它们。
我们将在上次使用的同一项目中进行实验。
以下是
getDerivedStateFromProps()方法的声明：
static getDerivedStateFromProps(props, state) { }
注意方法名称前的
static 。 根据他接受的属性，他必须返回更新的状态。 当某些组件必须接受其从父组件接收的传入属性并根据这些属性配置其状态时，将使用此方法。 有关此方法的详细信息，请参见
此处 。 在React博客上发布的这份材料说，在似乎有用的所有情况下，使用这种方法远非合理。 不当使用它会导致各种错误，并降低应用程序性能，因此请谨慎使用。 您不应该尝试使用它的帮助来解决问题，而这并不是它想要的解决方案。
这是此方法
的文档。
现在让我们谈谈
getSnapshotBeforeUpdate()方法。 这是他在班级正文中的声明：
getSnapshotBeforeUpdate() { }
可以将其视为生命周期方法，它允许您在更新组件之前创建类似组件中内容的备份。 它类似于应用程序状态的快照。 应该注意的是，React的开发者说这种方法的范围是有限的。
这是它
的文档。
总结
今天，我们讨论了组件生命周期方法。 当您进一步开发React应用程序时，它们肯定会派上用场。 在本课程的其他课程中，我们将介绍这些方法，尤其是
componentDidMount() 。 下次我们将讨论条件渲染。
亲爱的读者们！ 如果您是专业开发React应用程序，请告诉我们您如何使用组件生命周期方法。
