React中的生命周期--分为三大部分
<h3>1-实例化/挂载阶段</h3>
constructor() 进行构造初始化 接收props和context使用这两个参数必须在内部使用super()传入对应参数
UNSAFE_componentWillMount() 数据已经初始化完成,还没渲染到dom上
render() 渲染阶段,这里会通过jsx进行创建虚拟dom并返回,这里通常会访问到props和state并且决定该如何渲染到页面.另外这里是不应该调用setState()的.
componentDidMount() 数据已经渲染挂载完成,一般在这里发送请求
<h3>2-存在期/更新期</h3>
componentWillReceiveProps (nextProps) 接收一个参数nextProps,props传递给Component实例时，将调用此方法,通常用于对比新旧数据后进行this.state的处理
shouldComponentUpdate(nextProps, nextState) 可以查看当前和新的props＆state，并选择是否继续前进,从而防止不必要的渲染,相当于一个拦截,必须返回一个布尔值
componentWillUpdate(nextProps和nextState) 一旦确定需要在更新阶段重新渲染componentWillUpdate就会调用。相当于数据更新前执行的函数,是我们处理配置更改并为下一次渲染做准备的时机
render 再次进行数据的渲染 每次数据更新都会使用react的diff算法对比更新前后的dom树,并且重新渲染
componentDidUpdate(prevProps, prevState) 数据更新后,重新渲染完成后执行,prevProps, prevState就是更新前的props和state.componentDidUpdate在初始化render的时候不会执行, 这里需要谨慎的使用setState避免死循环
<h3>3-销毁期</h3>
componentWillUnmount () 在此处完成组件的卸载和数据的销毁。一般需要在这里销毁定时器,事件监听等
import React, { Component } from 'react'
import Apps3 from './apps3';
export default class apps2 extends Component {
constructor(p){
super(p)
this.state={
title:'原始的标题',
ChildTitle:'好日子'
}
console.log('1-构造初始化的函数');
}
changeTitle(){
this.setState({
ChildTitle:'无敌好日子'
})
}
change(){
this.setState({
title:'新的标题'
})
}
UNSAFE_componentWillMount(){
console.log('2-准备渲染')
}
componentDidMount(){
console.log('4-已经渲染完成')
}
render(){
console.log('3-渲染阶段 /2-3更新渲染');
return(
<div>
<h1>{this.state.title}</h1>
<button onClick={this.change.bind(this)}>按钮</button>
<button onClick={this.changeTitle.bind(this)}>改变子组件标题</button>
<Apps3 title={this.state.ChildTitle}></Apps3>
</div>
)
}
shouldComponentUpdate(nextProp,nextState){
console.log(nextState)
console.log(nextProp)
console.log('2-1更新阶段-询问可否更新')
return this.state.title !== nextState
}
UNSAFE_componentWillUpdate(){
console.log('2-2更新阶段-数据准备更新')
}
componentDidUpdate(){
console.log('2-4-更新阶段,数据已经更新并渲染完成')
}
}
