react 组件生命周期函数

你的名字 2021-07-25 00:27 374阅读 0赞

React组件的生命周期
    
    	componentWillMount:  ！新版本将废弃
    	组件生命周期函数,在组件渲染之前执行(即组件内的render之间),不需要主动调用
    
    	componentDidMount:
    	组件生命周期函数,在组件渲染之后执行
    
    	componentWillUnmount:
    	组件生命周期函数,组件死亡之前
    	
    	componentWillReceiveProps(传递参数): ！新版本将废弃,替换成静态方法getDerivedStateFromProps
    	组件接收传递参数改变时调用,第一次就会调用,传入的props不变也会调用
    		static getDerivedStateFromProps(nextProps,prevState)
    		{
    				return {...将会和state的合并}
    				return null; 不影响state
    		}		
    		
    	shouldComponentUpdate(nextProps,nextState):
    	组件生命周期函数,状态改变前执行
    
    		其中:
    			(1)必须返回true或者false才能继续执行
    			(2)false回到状态改变前,即不能改变状态内的数据
    			(3)true才能改变状态,然后运行之后的生命周期函数
    
    	componentWillUpdate(preProps,preState): ！新版本将废弃,替换成getSnapshotBeforeUpdate,返回值将作为componentDidUpdate的第三个参数
    	组件生命周期函数,组件(state)更新前执行
    	getSnapshotBeforeUpdate(prevProps,prevState){
    		return 返回值将作为componentDidUpdate的第三个参数
    	}
    	
    	componentDidUpdate(preProps,preState,snapshot):
    	组件生命周期函数,组件(state)更新后执行
    	
    	componentDidCatch(error, errorInfo){	子组件渲染发生错误且页面更新之后
    		
    	}
    
    
    16.4版本替换的生命周期
    
    	 static getDerivedStateFromProps(props,state){
    	 
    		props当前的父组件传递的参数
    		state为当前组件的state值
    		return {返回的对象将更新当前组件的state相同属性值}
    		不更新state返回null;
    		
    	 }
    	 
    	 static getDerivedStateFromError(error){	子组件被渲染发生错误之后且也页面更新之前,一般用于错误边界组件
    			
    			return {
    				返回的值会和state合并
    			}
    	 }
    	
    	 getSnapshotBeforeUpdate(prevProps, prevState) {
    	 
    		prevProps数据改变之前的参数
    		prevState数据改变之前的状态
    		return 返回值会作为componentDidUpdate的第三个参数
    		
    	}

组件生命图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]16.4版生命周期图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

--------------------

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script src="js/libs/browser.min.js"></script>
    	<script src="js/libs/react.js"></script>
    	<script src="js/libs/react-dom.js"></script>
    	<script src="js/libs/jquery-3.4.1.js"></script>
    
    	<style>
    		.d1{ 
    			color:orange;
    		}
    	</style>
    	
    </head>
    <body>
      <div class="big">
    
      </div>
      <div class="big2">
    
      </div>
      <div class='big3'>
    
      </div>
    
    	<script type="text/babel">
    		
    		var arr=[1,2,3,4,5];
    		var arr1=[<p>p1</p>,<p>p2</p>,<p>p3</p>];
    		var obj=[{ name:'jeff',age:18},{ name:'mike',age:19}]
    	
    		var Comp=React.createClass({ 
    			
    			//初始化props
    			getDefaultProps:function(){ 
    
    			},
    			
    			//初始化state
    			getInitialState:function(){ 
    					
    				return { 
    					value:'jeff'
    				}
    			},
    
    			//渲染前生命周期函数
    			componentWillMount:function()
    			{ 
    					console.log('组件渲染之前')
    			},
    
    
    			//渲染函数
    			render:function(){ 
    
    				return (
    					<div>
    						<p>{ this.state.value}</p>
    						<button onClick={ this.change}>点我</button>
    					</div>
    				)
    			},
    			change:function()
    			{ 
    				this.setState({ 
    					value:'mike'		
    				})
    			},
    
    			//渲染后生命周期函数
    			componentDidMount:function()
    			{ 
    					console.log('组件渲染之后')
    			},
    
    			//组件死亡前生命周期函数
    			componentWillUnmount:function()
    			{ 
    					console.log('组件卸载');
    			},
    
    			//组件状态改变前生命周期函数
    			shouldComponentUpdate:function()
    			{ 
    					console.log('组件改变之前');
    					console.log(this.state.value)
    					return false;
    			},
    
    			//组件更新前生命周期函数
    			componentWillUpdate:function()
    			{ 
    				console.log('组件更新之前,即state')
    			},
    
    			//组件更新后生命周期函数
    			componentDidUpdate:function()
    			{ 
    				console.log('组件更新之后')
    			},
    			//props改变之后执行
    			componentWillReceiveProps:function()
    			{ 
    
    			}
    
    
    
    		})
    
    		ReactDOM.render(<Comp />,document.querySelector(".big"));
       		
    
    
    
    	</script>
    	
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/1f6edd35107144d888f83ceb6249753d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/6042688fa9c74728b4b40613f96b2377.png