react 组件生命周期函数

最新推荐文章于 2024-05-25 17:32:33 发布

神奇大叔

最新推荐文章于 2024-05-25 17:32:33 发布

阅读量272

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104266828

版权

React 专栏收录该内容

44 篇文章 4 订阅

订阅专栏

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的第三个参数
		
	}

组件生命图:
在这里插入图片描述 16.4版生命周期图:

代码示例:

<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>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 组件生命周期函数

React组件的生命周期 componentWillMount: 组件生命周期函数,在组件渲染之前执行(即组件内的render之间),不需要主动调用 componentDidMount: 组件生命周期函数,在组件渲染之后执行 componentWillUnmount: 组件生命周期函数,组件死亡之前 shouldComponentUpdate: 组件生命周期函数,状态改变前...
复制链接

扫一扫