React生命周期函数

React生命周期函数

(旧)

class Count extends React.Component{
	//构造器
	constructor(props){
		console.log(props)
		super(props)
		//初始化状态
		this.state={count:0}
	}
	//加1按钮的回调
	add=()=>{
		//获取原状态
		const {count}=this.state
		//更新状态
		this.setState({count:count+1})
	}
	//卸载组件的回调
	death=()=>{
		//点击卸载test组件
		ReactDOM.unmountComponentAtNode(document.getElementById('test')	
	}
	//强制更新按钮的回调
	force= () => {
		this.forceUpdate()	
	}
	//组件将要卸载的勾子
	componentWillUnmount(){
		console.log('组件将要卸载')
	}
	//组件将要挂载的勾子
	componentWillMount(){
		console.log('组件将要挂载')
	}
	//组件挂载完毕
	componentDidMount(){
		console.log('组件挂载完毕')
	}
	//控制组件更新的阀门
	shouldComponentUpdate(){
		return false//因为返回false所以页面不会更新数据
	}
	//组件将要更新的勾子
	componentWillUpdate(){
		console.log('组件将要更新')
	}
	//组件更新`完毕`的钩子
	componentDidUpdate(preprops,prestate){
		console.log(preprops,prestate)//先前的props ,跟先前的state
	}
	render(){
		const {count} = this.state
		return (
			<div id='test'>
				<h2>当前求和为:{count}</h2>
				<button onClick={this.add}>点我+1</button>
				<button onClick={this.death}>点击卸载组件</button>
				<button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button>
			</div>
		)
	}
}

生命周期顺序(旧)
1.constructor 构造器
2.componentWillMount 组件将要挂载的勾子
3.componentDidMount 组件挂载完毕
注意中间走三条线

• 第一条线: 调用setState 正常更新（更改状态更新state）->
  就开始走这个勾子shouldComponentUpdate组件更新的阀门 (返回布尔值不写默认为true执行下面)->
  componentWillUpdate组件将要更新的钩子->
  reder->
  componentDidUpdate组件更新完毕
• 第二条线: forceUpdate强制更新 （不更改状态更新state）->
  少了shouldComponentUpdate直接执行componentWillUpdate组件将要更新这个勾子->
  render->
  componentDidUpdate组件更新完毕
• 第三条线: 父组件传数据传入过来更新->
  componentWillReceiveProps组件传入过来的数据"父传子",注意 第一次渲染并不会触发,必须是新传入的更新的数据->然后在去走第一条的线路
  三条线最后都会执行的钩子componentWillUnmount 组件将要被卸载

第三条线的代码案例

class A extends React.Component{
	//初始化状态
	state={carName:'奔驰'}
	changeCar=()=>{
		this.setState({carName:'奥拓'})
	}
	render(){
		return(
			<div>
				<div>我是A组件</div>
				<button onClick={this.changeCar}>换车</button>
				<B carName={this.state.carName} />
			</div>
		)
	}
}
class B extends React.Component{
	componentWillReceiveProps(){
		console.log("组件将要接收传入的参数数据")
		//注意这里有个坑第一次渲染传入的参数不算,必须是新传入的,也就是修改的第二次数据
	}
	render(){
		return(
			<div>我是B组件,接收到的车是:{this.props.carName}</div>
		)
	}
}

总结
初始化阶段:有ReactDOM.render()触发----初次渲染

• 1.constructor()
• 2.componentWillMount() 挂载前
• 3.render() 挂载到页面,也就是渲染
• 4.componentDidMount() 挂载后 (常用)
  – 一般在这个勾子里面做一些初始化的事,例如开启定时器,发送网络请求,订阅消息

更新阶段:有组件内部this.setState() 或父组件重新render触发

• 1.shouldComponentUpdate() 更新数据阀门 不写默认为true 如果为false 将不再进行下面渲染,除非使用this.forceUpdate() 强制更新
• 2.componentWillUpdate() 更新前
• 3.render() 渲染(必须使用)
• 4.componentDidUpdate() 更新后

卸载阶段:有ReactDOM.unmountComponentAtNode()触发

• 1.componentWillUnmount() 卸载前(常用)
  – 一般做一些收尾的事情,例如关闭定时器,取消订阅消息

新版生命周期

在新版本中三个勾子前面要加UNSAFE_ 分别是UNSAFE_componentWillUpdate,UNSAFE_componentWillMount,UNSAFE_componentWillReceiveProps这三个勾子,否则就会警告

新版本勾子执行顺序
初始化阶段

• constructor 构造器->
• getDerivedStateFromProps 使用它的时候必须使用static静态方法 并且还有返回值,返回值是state obj(状态对象)或者是null
static getDerivedStateFromProps(){return null} 注意用法比较特殊,如果状态对象的{key:value}跟初始化的key相同那么它将阻碍数据往下执行,并且以返回的状态对象位置永远改不了
• render
• componentDidMount 挂载完毕 使用场景开启监听,发送请求

更新阶段

• new props ,setState,forceUpdate 传入数据
• getDerivedStateFromProps(不常用)
• render
• getSnapshotBeforeUpdate 获取之前的快照数据,也就是修改之前的数据
  注意用法必须要有返回值或者null 传入参数state 获取的将是修改前的state数据,将其返回,作用就是获取更新前的一些信息
• componentDidUpdate 组件更新之后

卸载阶段

• componentWillUnmount 卸载之前