前言
如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳,那么这只蚂蚁从绳头爬到绳尾,就会依次触动不同的卡片挂钩。在React每一个生命周期中,也有类似卡片挂钩的存在,我们把它称之为‘钩子函数’。那么在React的生命周期中,到底有哪些钩子函数?React的生命周期又是怎样的流程?最新版的react中又加了或者改了哪些钩子函数呢,今天我给大家来总结总结:
首先,如下图所示:
这张图可以分为3个大的阶段:初始化阶段,运行中和销毁阶段,在react不同的生命周期里,会依次触发不同的生命周期,也就是触发不同的钩子函数,下面具体介绍每一个钩子函数
一,初始化阶段
1.设置组件的默认属性和以及组件的初始化状态
static defaultProps = {
name : 'xiaoming',
age : 23
};
contructor() {
super();
this.state = {number : 0}
}
2.componentWillMount()
该组件是即将渲染到页面之前触发,此时还没有真正的dom,这个时候可以开启定时器,向服务器发送请求等操作
3.render()
组件渲染
4.componentDidMount()
组件已经被渲染到页面后触发,此时以及有了真正的dom元素,可以进行与dom相关的操作
二,运行中阶段
1.componentWIllReceiveProps()
该组件是接受属性时触发
2.shouleComponentUpdate()
首先这是一个性能优化点,该函数可以接受两个参数newProps,newState;
shouldComponentUpdate(newProps,newState){
if(newProps.number < 5 ) return true;
return false;
}
通过返回true/false来控制组件是否需要更新。
一个react项目需要更新一个小组件时,很可能需要夫组件更新自己的状态,而父组件的重新更新会造成它的所有子组件重新执行render()方法,从而形成新的虚拟dom再用diff算法对新旧虚拟dom进行结构和属性的比较,决定组件是否需要重新渲染。无疑这样的操作会造成很多的性能浪费,所以就有了shouldComponentUpdate()这个钩子函数,在其中加入条件判断,从而优化性能。
这里有必要提到的一点是,react中提供了一个pureComponent的类,当我们的组件继承它时,组件更新时就会默认比较新旧属性和状态,从而决定组件是否更新,但是值得注意的是,PureComponent(见我的上一遍文章,有详解)进行的只是浅比较,所以组件状态或者属性改变时,都需要返回一个新的对象或者数组
3.conponentWIllUpdate()
组件即将被更新时触发
4.componentDidUpdate()
组件被更新完成后触发,这个时候页面产生了新的dom元素,可以进行dom操作
三,销毁阶段
1.componentWillUnmount()
组件被销毁时触发。这里我们可以进行一些清理操作,例如清理定时器,取消Redux的订阅事件等等。
具体的流程可看下面代码;
import React from 'react'
import ReactDOM from 'react-dom';
class SubCounter extends React.Component {
componentWillReceiveProps() {
console.log('9、子组件将要接收到新属性');
}
shouldComponentUpdate(newProps, newState) {
console.log('10、子组件是否需要更新');
if (newProps.number < 5) return true;
return false
}
componentWillUpdate() {
console.log('11、子组件将要更新');
}
componentDidUpdate() {
console.log('13、子组件更新完成');
}
componentWillUnmount() {
console.log('14、子组件将卸载');
}
render() {
console.log('12、子组件挂载中');
return (
<p>{this.props.number}</p>
)
}
}
class Counter extends React.Component {
static defaultProps = {
//1、加载默认属性
name: 'sls',
age:23
};
constructor() {
super();
//2、加载默认状态
this.state = {number: 0}
}
componentWillMount() {
console.log('3、父组件挂载之前');
}
componentDidMount() {
console.log('5、父组件挂载完成');
}
shouldComponentUpdate(newProps, newState) {
console.log('6、父组件是否需要更新');
if (newState.number<15) return true;
return false
}
componentWillUpdate() {
console.log('7、父组件将要更新');
}
componentDidUpdate() {
console.log('8、父组件更新完成');
}
handleClick = () => {
this.setState({
number: this.state.number + 1
})
};
render() {
console.log('4、render(父组件挂载)');
return (
<div>
<p>{this.state.number}</p>
<button onClick={this.handleClick}>+</button>
{this.state.number<10?<SubCounter number={this.state.number}/>:null}
</div>
)
}
}
ReactDOM.render(<Counter/>, document.getElementById('root'));