React 组件生命周期
在ReactJS中，每个组件创建过程都涉及各种生命周期方法。这些生命周期方法称为组件的生命周期。这些生命周期方法不是很复杂，在组件生命周期的各个阶段都需要调用。组件的生命周期分为四个阶段。他们是:
初始阶段
安装阶段
更新阶段
卸载阶段
每个阶段都包含一些特定于特定阶段的生命周期方法。让我们逐个讨论每个阶段。
1、初始阶段
它是ReactJS组件生命周期的出生阶段。在这里，组件开始了通往DOM的旅程。在此阶段，组件包含默认的Props和初始状态。这些默认属性在组件的构造函数中完成。初始阶段仅发生一次，并且由以下方法组成。
getDefaultProps()
用于指定this.props的默认值。在创建组件或将来自父组件的任何Props传递到组件之前，将调用它。
getInitialState()
用于指定this.state的默认值。在创建组件之前将调用它。
2、安装阶段
在此阶段，将创建组件实例并将其插入DOM。它由以下方法组成。
componentWillMount()
在组件呈现到DOM中之前立即调用此方法。在这种情况下，当您在此方法内调用 setState()时，组件将不会重新渲染。
componentDidMount()
在呈现组件并将其放置在DOM上后立即调用此方法。现在，您可以执行任何DOM查询操作。
render()
在每个组件中都定义了此方法。它负责返回单个根 HTML节点元素。如果您不想渲染任何内容，则可以返回 null 或 false 值。
3、更新阶段
这是React组件生命周期的下一个阶段。在这里，我们获得了新的Props并更改了状态。此阶段还允许处理用户交互并提供与组件层次结构的通信。此阶段的主要目的是确保组件显示其自身的最新版本。与出生或死亡阶段不同，此阶段一次又一次地重复。此阶段包含以下方法。
componentWillRecieveProps()
当组件收到新的Props时将调用它。如果要更新状态以响应Props更改，则应使用 this.setState()方法比较this.props和nextProps以执行状态转换。
shouldComponentUpdate()
当组件决定对DOM进行任何更改/更新时，将调用它。它允许您控制组件更新自身的行为。如果此方法返回true，则组件将更新。否则，该组件将跳过更新。
componentWillUpdate()
在组件更新发生之前被调用。在这里，您无法通过调用 this.setState()方法来更改组件状态。如果 shouldComponentUpdate()返回false，则不会调用它。
render()
被调用以检查 this.props 和 this.state 并返回以下类型之一: React元素，数组和片段，布尔值或null，字符串和数字。如果shouldComponentUpdate()返回false，则将再次调用render()内部的代码，以确保组件正确显示自身。
componentDidUpdate()
在组件更新发生后立即被调用。在此方法中，您可以在更新发生后将要执行的任何代码放入其中。初始渲染不会调用此方法。
4、卸载阶段
这是React组件生命周期的最后阶段。当组件实例从DOM中被销毁并卸载时调用。此阶段仅包含一种方法，如下所示。
componentWillUnmount()
在永久销毁和卸载组件之前，立即调用此方法。它执行任何与清除相关的必要任务，例如使计时器无效，事件侦听器，取消网络请求或清除DOM元素。如果卸载了组件实例，则无法再次安装它。
示例
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {hello: "lidihuo"};
this.changeState = this.changeState.bind(this)
}
render() {
return (
<div>
<h1>ReactJS component's Lifecycle</h1>
<h3>Hello {this.state.hello}</h3>
<button onClick = {this.changeState}>Click Here!</button>
</div>
);
}
componentWillMount() {
console.log('Component Will MOUNT!')
}
componentDidMount() {
console.log('Component Did MOUNT!')
}
changeState(){
this.setState({hello:"All!!-Its a great reactjs tutorial."});
}
componentWillReceiveProps(newProps) {
console.log('Component Will Recieve Props!')
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('Component Will UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component Did UPDATE!')
}
componentWillUnmount() {
console.log('Component Will UNMOUNT!')
}
}
export default App;
输出:
单击单击此处按钮时，将获得更新的结果，该结果显示在下面的屏幕中。
