什么是React Lifecycle方法？
反应生命周期方法可以被认为是从React组件的诞生到死亡的一系列事件。
反应中的每个组件都会经历事件的生命周期。可以认为这些事件经历了出生，生长和死亡的周期。
反应生命周期中的各个阶段
1) 安装- 组件的诞生
2) 更新- 组件的增长
3) 卸下- 组件死亡。
在生命周期的上述三个阶段中，可以监控和处理反应中的每个组件。
安装-
安装意味着将元素放入DOM。
在react中，安装组件时依次调用了四个内置方法。
这四种方法是：
1) 构造函数（）
2) getDerivedStateFromProps（）
3) 渲染（）
4) componentDidMount（）
渲染（）方法是必需的，将始终被调用，其他方法仅是可选的，并且仅在定义它们时才被调用。
建设者
当组件初始化时，constructor（）方法是我们调用的第一个方法，它是设置初始状态和其他初始值的自然场所。
用props作为参数调用constructor（）方法，并且要记住，务必始终先调用super（props）作为开始，这将启动父构造函数方法并允许组件继承方法。来自其父React.Component。
例如：这是每次您制作组件时由react调用的构造方法：
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
渲染（） {
返回 (
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
getDerivedStateFromProps：
在呈现DOM中存在的元素之前，将立即调用getDerivedStateFromProps（）方法。
这是根据初始道具设置状态对象的自然场所。
它以状态为参数，并返回对其状态进行了更改的对象。
下面的示例以收藏夹颜色为“红色”开始，但是getDerivedStateFromProps（）方法根据favcol属性更新收藏夹颜色。
例如：
调用getDerivedStateFromProps方法以在render方法之前使用。
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
静态的 getDerivedStateFromProps(道具, 州) {
返回 {最喜欢的颜色: 道具.favcol };
}
渲染（） {
返回 (
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
）;
}
}
反应DOM.渲染(<标头 favcol=”黄色“/>, 文件.getElementById(‘root’））;
渲染：
这是必需的方法，没有该方法，程序将无法运行。这也是将HTML输出到DOM的方法。
一个例子是：
一个带有简单render（）方法的简单组件：
类 标头 延伸 反应.零件 {
渲染（） {
返回 (
<h1>这是Header组件的内容</h1>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
componentDidMount
呈现组件后，将调用componentDidMount（）方法。
在这里运行需要将组件放置在DOM上的语句。
例如：
在第一个选项中，我们将我们喜欢的颜色设置为红色，但是在一秒钟之内，它改为黄色。
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
componentDidMount（） {
setTimeout（（） => {
这个.setState（{最喜欢的颜色: “yellow”}）
}， 1000)
}
渲染（） {
返回 (
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
更新中
生命周期的下一个阶段是组件更新的时间。
只要组件的状态或道具发生变化，组件就会更新。
当组件被更新时，React有五个内置方法被调用，按此顺序：
1) getDerivedStateFromProps（）
2) shouldComponentUpdate（）
3) 渲染（）
4) getSnapshotBeforeUpdate（）
5) componentDidUpdate（）
同样，render（）方法是必需的，将始终被调用，其他方法是可选的，仅当您定义它们时才被调用。
getDerivedStateFromProps-
在更新阶段，将调用getDerivedStateFromprops方法。这是组件更新时调用的第一个方法。
这是根据初始道具设置状态的理想场所。
下面的示例有一个按钮，可将喜欢的颜色更改为蓝色，但是由于 getDerivedStateFromProps（） 调用方法，该方法使用favcol属性中的颜色更新状态，最喜欢的颜色仍呈现为黄色：
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
静态的 getDerivedStateFromProps(道具, 州) {
返回 {最喜欢的颜色: 道具.favcol };
}
换颜色 = （） => {
这个.setState（{最喜欢的颜色: “blue”}）;
}
渲染（） {
返回 (
<div>
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
<纽扣 类型=”纽扣“ onClick= {这个.换颜色}>换颜色</纽扣>
</div>
）;
}
}
反应DOM.渲染(<标头 favcol=”黄色“/>, 文件.getElementById(‘root’））;
shouldComponentUpdate：
在此方法中，您可以返回一个布尔值，该值指定Reacy是否应继续进行渲染。
默认值是true。
下面给出的示例显示了shouldComponentUpdate（）方法返回false时的情况：
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
shouldComponentUpdate（） {
返回 假;
}
换颜色 = （） => {
这个.setState（{最喜欢的颜色: “blue”}）;
}
渲染（） {
返回 (
<div>
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
<纽扣 类型=”纽扣“ onClick= {这个.换颜色}>换颜色</纽扣>
</div>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
下一个示例显示了该方法返回true时发生的情况：
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
shouldComponentUpdate（） {
返回 真正;
}
换颜色 = （） => {
这个.setState（{最喜欢的颜色: “blue”}）;
}
渲染（） {
返回 (
<div>
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
<纽扣 类型=”纽扣“ onClick= {这个.换颜色}>换颜色</纽扣>
</div>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
渲染
当然，当组件更新时，将调用render（）方法，它必须使用新的更改将HTML重新呈现到DOM。
下面的示例有一个按钮，可将收藏夹颜色更改为蓝色：
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
换颜色 = （） => {
这个.setState（{最喜欢的颜色: “blue”}）;
}
渲染（） {
返回 (
<div>
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
<纽扣 类型=”纽扣“ onClick= {这个.换颜色}>换颜色</纽扣>
</div>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
getSnapshotBeforeUpdate
使用此方法时，您可以在更新之前访问属性和状态，这意味着即使在更新之后，也可以检查更新之前的值。
如果存在此方法，则还应该包括componentDidUpdate（）方法，否则，将出现错误。
请遵循以下示例：
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
componentDidMount（） {
setTimeout（（） => {
这个.setState（{最喜欢的颜色: “yellow”}）
}， 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById(“div1”）。 innerHTML =
“在更新之前，收藏夹是“ + prevState.最喜欢的颜色;
}
componentDidUpdate（） {
document.getElementById(“div2”）。 innerHTML =
“更新后的收藏夹是“ + 这个.州.最喜欢的颜色;
}
渲染（） {
返回 (
<div>
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
<div ID=”div1“></div>
<div ID=”div2“></div>
</div>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
componentDidUpdate：
在DOM中更新组件后，将调用componentDidUpdate方法。
请遵循以下示例：
类 标头 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {最喜欢的颜色: “red”};
}
componentDidMount（） {
setTimeout（（） => {
这个.setState（{最喜欢的颜色: “yellow”}）
}， 1000)
}
componentDidUpdate（） {
document.getElementById(“mydiv”）。 innerHTML =
“更新后的收藏夹是“ + 这个.州.最喜欢的颜色;
}
渲染（） {
返回 (
<div>
<h1>我最喜欢的颜色是 {这个.州.最喜欢的颜色}</h1>
<div ID=”Mydiv“></div>
</div>
）;
}
}
反应DOM.渲染(<标头 />, 文件.getElementById(‘root’））;
卸载：
下一个也是最后一个阶段是卸载，即从DOM中删除组件时。
当组件被卸载时，React只有一个内置方法会被调用：
– componentWillUnmount（）
componentWillUnmount-
在组件即将从DOM中删除之前，将立即调用componentWillUnmount方法。
根据例子：
类 容器 延伸 反应.零件 {
建设者(道具) {
超(道具）;
这个.州 = {节目: 真正};
}
delHeader = （） => {
这个.setState（{节目: 假}）;
}
渲染（） {
让 我的头;
如果 (这个.州.节目) {
myheader = <儿童 />;
};
返回 (
<div>
{我的头}
<纽扣 类型=”纽扣“ onClick= {这个.delHeader}>删除标题</纽扣>
</div>
）;
}
}
类 儿童 延伸 反应.零件 {
componentWillUnmount（） {
警报(“名为Header的组件即将被卸载。”）;
}
渲染（） {
返回 (
<h1>你好，世界！</h1>
）;
}
}
反应DOM.渲染(<容器 />, 文件.getElementById(‘root’））;
这样就完成了React Lifecycle的过程。
