组件代表了React的构建块。它们被用来定义用户界面的外观以及它的行为方式。然而，为了能够控制用户界面的行为，我们必须首先了解我们如何能够控制其组件的行为。
因此，在这篇文章中，我们将讨论组件行为的一个关键概念，特别是基于类的组件，即生命周期方法。
什么是组件的生命周期？
正如预期的那样，一个组件的生命周期是指它在我们的应用程序中的 "生命期"，从该组件第一次被渲染到屏幕上开始，直到我们从屏幕上删除该组件为止。
一个组件可能会被渲染到屏幕上，这被称为 "安装阶段"，它可能会在其 "生命周期 "中收到一些变化的数据，这被称为 "更新阶段"，而它最终可能会被从屏幕上删除，这被称为 "卸载阶段"。
在组件生命周期的每个阶段，我们都能与它的状态互动，并在此基础上触发某些副作用。
如果你想阅读关于生命周期过程的更详细的解释，有一篇文章对这个话题进行了更深入的探讨。
我们可用的生命周期方法有哪些？
现在我们已经对这个概念有了更好的了解，让我们深入了解一下有哪些具体的生命周期方法可以用来与我们的组件进行交互，它们何时被触发，以及在这个阶段我们能够访问哪些数据。
构造函数()
首先，也是最重要的，我们有实际组件的构造函数。
它是一个安装方法，用于初始化状态和绑定类组件内部的方法。它也是我们用props调用super的地方，以防我们也想为该组件初始化props（你可以在这里阅读更详细的解释）：
constructor(props) {
super(props)
this.state = {
portalName: 'Upmostly'
}
this.handleLogin = this.handleLogin.bind(this);
}
渲染()
渲染是基于类的组件的一个必要方法。Render应该是一个纯粹的方法，它决定了组件的返回值，或者说组件将以JSX的形式渲染到屏幕上的内容：
render() {
return <h1>Welcome to {this.state.portalName}</h1>
}
componentDidMount()
这个方法在组件第一次被加载到DOM时被调用。
它通常被用来从外部API获取数据，以及管理订阅或设置事件监听器。
从这个生命周期方法中更新状态将触发组件的重新渲染，允许用户看到反映在组件中的更新状态：
componentDidMount() {
axios.get(testEndpoint).then(resp => this.setState({ testData: resp }));
}
componentWillUnmount()
该方法通常用于我们称之为 "清理 "的东西。
你可以把它当作componentDidMount的反面，因为你应该在这里取消任何在组件挂载时可能已经初始化的任务**（订阅**、事件监听器、打开的连接、定时器等）。
shouldComponentUpdate(nextProps, nextState)
这个方法主要用于提高组件的性能。
它在组件通过更新其道具或状态而被重新渲染之前被调用。通过返回false，我们可以跳过render和componentDidUpdate方法的运行：
shouldComponentUpdate(nextProps) {
if (nextProps.portalName !== this.props.portalName) return true
return false
}
getSnapshotBeforeUpdate(prevProps, prevState)
这个方法在任何组件的输出被添加/渲染到真实DOM前不久被调用。它可以帮助我们捕获一些信息，这些信息在调用componentDidUpdate时可能会很有用。
componentDidUpdate(prevProps)
这个方法在组件重新渲染后立即被调用。
它通常用于DOM操作或对其他应用程序进行更有效的请求。这可以体现在使用vanilla JavaScript方法从DOM中查询元素，为元素添加类，等等。
prevProps 参数只有在组件也实现了getSnapshotBeforeUpdate方法时才会被传递。
componentDidMount(prevProps) {
if (this.props.ID !== prevProps.ID) {
axios.get(testEndpoint)
.then(resp => this.setState({ testData: resp }));
}
}
getDerivedStateFromProps(nextProps, prevState)
这个方法在每次组件要被重新渲染的时候被调用。
你应该从中返回一个对象，该对象将被用于更新状态。
总结
所以，这篇文章的内容就差不多了。
我们已经能够简要地介绍什么是组件的生命周期，列举类组件的生命周期方法，更重要的是，我们已经能够理解它何时发生，在这期间我们可以访问哪些数据，更重要的是，它应该被用来做什么。
我希望你喜欢这个阅读，你现在对每个方法的使用情况有了更好的理解。
在下一次会议上见。干杯!
