什么是生命周期
所谓的生命周期就是指某个事物从开始到结束
的各个阶段,当然在 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
,首次渲染不会调用该函数
// 是否要更新数据,这里返回true才会更新数据
shouldComponentUpdate(nextProps,nextState){
console.log("sonApp.js第二步:这里判断是否要更新数据")
console.log(nextProps) // 父组件传给子组件的值,这里没有会显示空
console.log(nextState) // 数据更新后的值
return true // 返回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:'爱吃很多好吃的'
}
// 是否要更新数据,这里返回true才会更新数据
shouldComponentUpdate(nextProps,nextState){
console.log("app.js第一步:这里判断是否要更新数据")
console.log(nextProps) // 父组件传给子组件的值,这里没有会显示空
console.log(nextState) // 数据更新后的值
return true // 返回true,确认更新
}
// 更新数据时触发的生命周期函数
componentDidUpdate(){
console.log("app.js第四步:组件更新完成")
}
// 完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了,不过还有修改文档,你可以在这里去获取更新之前的文档
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); // 接收到父组件传递过来的新的props
console.log(state); // 组件当前的数据
console.log("第二步:组件将要挂载");
return state; // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.
}
componentDidMount()
在组件挂载后调用
componentDidMount(){
console.log("第四步:组件挂载完成")
}
整体代码组成组件加载阶段
import React,{Component} from "react";
class App extends Component{
constructor(props){
super(props)
console.log("第一步:构造函数")
}
state={
hobby:'爱吃很多好吃的'
}
/**
* 每次组件渲染前被调用,该方法会在 render 方法之前调用,无论是挂载阶段还是更新阶段,
* 它的存在只有一个目的:让组件在 props 变化时更新 state
* */
static getDerivedStateFromProps(props, state){
console.log(props); // 接收到父组件传递过来的新的props
console.log(state); // 组件当前的数据
console.log("第二步:组件将要挂载");
return state; // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.
}
// 组件挂在完成时触发的生命周期函数
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>
)
}
}
浏览器反馈