React生命周期函数

ゝ一世哀愁。 2023-01-07 11:25 169阅读 0赞

## 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 组件将要被卸载

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]  
**第三条线的代码案例**

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() 卸载前(常用)  
>     – 一般做一些收尾的事情,例如关闭定时器,取消订阅消息

#### 新版生命周期 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 1]

> 在新版本中三个勾子前面要加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` 卸载之前

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221119/d1c888edf835470e8b55364b031f6da9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 1]: /images/20221119/1ed87380b81748438fc3214066fe8eae.png