React常用的钩子函数
constructor
这个函数我们太常见了,在初始化类的state的时候,或者初始化类的props的时候都会用到,就是一个类的构造函数。对后端人员来说很熟悉
js
constructor() {
super();
this.state = {
age: 18
}
}
getDerivedStateFromProps
getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。这个生命周期的意思就是从props中获取state,这个生命周期的功能实际上就是将传入的props映射到state上面。这个函数有两个参数, 第一个参数为即将更新的 props, 第二个参数为上一个状态的 state , 可以比较props 和 state来加一些限制条件,防止无用的state更新。这个函数将替代componentWillReceiveProps
js
static getDerivedStateFromProps(nextProps,prevState){
return nextProps
}
render
render是渲染视图的,当所有组件完成初始化,render会调用一次,渲染dom;当state发生变化的时候,render会重新渲染视图,再次被调用。注意render必须有返回值,可以是null。
js
render() {
return (
<button>点击我</button>
)
}
componentDidMount
当所有组件挂载到页面上,在render执行前,会执行一次,状态更新不会触发。
js
componentDidMount() {//挂载完毕出发
console.log("组件挂载完毕了",this.state.age)
}
我们写一个定时器,定时更次年state的状态,看看会不会触发componentDidMount
js
class Hello extends React.Component {
b1 = createRef()
state = {
age: 18
}
componentDidMount() {//挂载完毕出发
console.log("组件挂载完毕了",this.state.age)
}
ageAdd=()=>{
setInterval(()=>{
this.setState({age:this.state.age+1})
},1000)
}
render() {
return (
<ul>
<li>age :{this.state.age}</li>
<button onClick={this.ageAdd}>自动+1</button>
</ul>
)
}
}
componentWillUnmount
既然开启了定时器,那么我们就得有让定时器停止的时机,比如componentWillUnmount,它是在组件将要被移出页面的时候触发,和上面的mount是相反的。主要用于消除计时器,ajax请求,取消监听,因为如果销毁后不删除的话,会继续占用内存。比如前面代码,我想让页面加载完毕后自动触发+1操作,删除加1按钮后停止+1操作。
js
import React, {createRef} from "react";
import {root} from "./index";
class Hello extends React.Component {
b1 = createRef()
state = {
age: 18,
timerId:0
}
componentDidMount() {//挂载完毕出发
this.ageAdd()
}
componentWillUnmount() {//卸载组件
console.log("组件被卸载了");
clearInterval(this.state.timerId)//停止定时器
}
delAdd=()=>{
root.unmount()
}
ageAdd=()=>{
let timerId= setInterval(()=>{
this.setState({age:this.state.age+1})
},1000)
this.setState({timerId:timerId})
}
render() {
return (
<ul>
<li>age :{this.state.age}</li>
<button>自动+1</button>
<button onClick={this.delAdd}>game over</button>
</ul>
)
}
}
shouldComponentUpdate
视图更新后执行的函数,比如还是刚才那个计时器,我们看看年龄+1后会不会触发,注意这个函数应该有一个返回值,返回true or false
js
shouldComponentUpdate(){
console.log("组件即将更新",this.state.age);
return true
}
getSnapshotBeforeUpdate
它的核心作用就是在render改变dom之前,记录更新前的dom信息传递给componentDidUpdate,在render之前调用。将替换componentWillUpdate,通常情况下,getSnapshotBeforeUpdate方法会返回一个值,这个值会作为第三个参数传递给componentDidUpdate方法。返回值snapshot会作为参数传递给componentDidUpdate
js
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("原来的props和state",prevProps,prevState);
return true
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("组件更新了",prevProps,prevState,snapshot);
}
componentDidUpdate
视图更新后调用,如果shouldComponentUpdate 返回了false,将不会被调用
js
componentDidUpdate() {
console.log("组件更新了");
}
调用顺序
接下来我们看看钩子函数
- 首次执行,肯定是先构造函数constructor,这个毋庸置疑。然后由render取创建虚拟dom,虚拟dom创建完毕后,唤起componentDidMount。
- 数据更新阶段,先执行shouldComponentUpdate函数,根据返回值false or true来判断是否执行render函数重新渲染视图,render更新视图之后调用componentDidUpdate