什么是生命周期
所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数
生命周期有哪些
1. 更新阶段
static getDerivedStateFromProps(props, state)
该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state
static getDerivedStateFromProps(props
, state
){
console
.log("sonApp.js第一步父组件的值更新了")
return state
}
shouldComponentUpdate(nextProps, nextState)
发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否执行 render，首次渲染不会调用该函数
shouldComponentUpdate(nextProps
,nextState
){
console
.log("sonApp.js第二步：这里判断是否要更新数据")
console
.log(nextProps
)
console
.log(nextState
)
return true
}
render
组件生命周期渲染阶段执行的函数
render(){
console
.log("sonApp.js第三步：数据渲染render")
return (
<div
>
{this.props
.value
}
</div
>
)
}
getSnapshotBeforeUpdate(prevProps, prevState)
该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作为参数传递给下个生命周期函数componentDidUpdate该函数并不常用。
getSnapshotBeforeUpdate(prevProps
, prevState
){
console
.log("sonApp.js第四步：完成渲染即将被挂载在DOM中");
return 11;
}
componentDidUpdate()
该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作
componentDidUpdate(){
console
.log("sonApp.js第五步：组件更新完成")
}
整体代码组成更新阶段
import React
,{Component
} from "react";
import SonApp
from './sonApp'
class App extends Component{
state
={
hobby
:'爱吃很多好吃的'
}
shouldComponentUpdate(nextProps
,nextState
){
console
.log("app.js第一步：这里判断是否要更新数据")
console
.log(nextProps
)
console
.log(nextState
)
return true
}
componentDidUpdate(){
console
.log("app.js第四步：组件更新完成")
}
getSnapshotBeforeUpdate(){
console
.log("app.js第四步：完成渲染即将被挂载在DOM中")
return 11
}
setData = ()=>{
this.setState({hobby
:"你是猪吗？？？"})
}
render(){
console
.log("app.js第三步：数据渲染render")
return (
<div
>
{this.state
.hobby
}
<button onClick
={this.setData
}>点击更新数据
</button
>
<SonApp value
={this.state
.hobby
}></SonApp
>
</div
>
)
};
}
export default App
;
浏览器反馈
2. 挂载阶段
constructor(props)
类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作
初始化 state处理事件绑定函数的 this(之前有过一篇React踩坑系列，其中的this指向就有用的这里去处理)
constructor(props
){
super(props
)
console
.log("第一步：构造函数")
}
render
组件生命周期渲染阶段执行的函数
render(){
console
.log("第三步：渲染render")
return (
<div
>
我喜欢吃各种口味的广式月饼，除了水果味的！！！
</div
>
)
};
static getDerivedStateFromProps(props, state)
该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state
static getDerivedStateFromProps(props
, state
){
console
.log(props
);
console
.log(state
);
console
.log("第二步：组件将要挂载");
return state
;
}
componentDidMount()
在组件挂载后调用
componentDidMount(){
console
.log("第四步：组件挂载完成")
}
整体代码组成组件加载阶段
import React
,{Component
} from "react";
class App extends Component{
constructor(props
){
super(props
)
console
.log("第一步：构造函数")
}
state
={
hobby
:'爱吃很多好吃的'
}
static getDerivedStateFromProps(props
, state
){
console
.log(props
);
console
.log(state
);
console
.log("第二步：组件将要挂载");
return state
;
}
componentDidMount(){
console
.log("第四步：组件挂载完成")
}
render(){
console
.log("第三步：渲染render")
return (
<div
>
我喜欢吃各种口味的广式月饼，除了水果味的！！！
</div
>
)
};
}
export default App
;
浏览器反馈
3. 销毁阶段
componentWillUnmount()
该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等
componentWillUnmount(){
console
.log("sonApp.js组件被销毁")
}
完整版销毁组件代码
父组件
import React
,{Component
} from "react";
import SonApp
from './sonApp'
class App extends Component{
state
={
hobby
:true
}
setData = ()=>{
this.setState({hobby
:!this.state
.hobby
})
}
render(){
return (
<div
>
<button onClick
={this.setData
}>点击挂载或销毁组件
</button
>
{
this.state
.hobby
? <SonApp
></SonApp
> : null
}
</div
>
)
};
}
export default App
;
子组件
import React
,{Component
} from "react";
export default class SonApp extends Component {
componentWillUnmount(){
console
.log("sonApp.js组件被销毁")
}
render(){
return (
<div
>
我是一条酸菜鱼
</div
>
)
}
}
浏览器反馈
