react生命周期解读

最新推荐文章于 2024-09-04 23:35:44 发布

风舞红枫

最新推荐文章于 2024-09-04 23:35:44 发布

阅读量147

点赞数 2

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

本文链接：https://blog.csdn.net/qq_42231248/article/details/113944616

版权

react 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./base/react.min.js"></script>
    <script src="./base/react-dom.min.js"></script>
    <script src="./base/browser.min.js"></script>
</head>
<body>
   <div id="app"></div>
   <script type='text/babel'>
		let Father = React.createClass({
			/*
			    getDefaultProps 
			    不能获取元素  
			    不能获取组件对象  
			    优先级低（传参的优先级高） 
			    只执行一次 不管组件实例化多少次props默认都是共享
			*/ 
			getDefaultProps(){
				return{
					value:0,
				}
			},
			/*
			    getInitialState
			    可以获取this.props
			    不能获取元素 
			    不能获取state的值 通过console.log 可以看到
			*/ 
			getInitialState(){
				console.log(this)
				return {
					value:this.props.value+1
				}
			},
			/*
			    componentWillMount
			    只会在装载之前调用一次
			    最后一次修改数据机会 在页面挂载之前
			    在这里修改状态值  触发的不是 运行中的生命周期
			    可以获取this 
			    不能获取元素
			    获取数据
			*/ 
			componentWillMount(){
				console.log('componentWillMountStart',this.props.value,this.state.value);
				this.props.value++;
				this.state.value++;
				console.log('componentWillMountEnd',this.props.value,this.state.value);
			},
			/*
			    componentDidMount
			    只会在装载之后调用一次
			    可以获取this 
			    可以获取元素
			    可以获取数据
			    在render之后调用
			*/ 
			componentDidMount(){
				console.log('componentDidMountStart',this.props.value,this.state.value);
				this.props.value++;
				this.state.value++;
				console.log('componentDidMountEnd',this.props.value,this.state.value);
				this.setState({});
			},
			/*
				见Son组件
			*/
			componentWillReceiveProps(){
				console.log("componentWillReceiveProps被调用了",this.props.value)
			},
			/*
				见Son组件
			*/
			shouldComponentUpdate(props,state){
				console.log("shouldComponentUpdate被调用了",this.props.value,props.value,this.state.value,state.value,"true----false")
				return true;
			},
			/*
				页面即将发生更新之前调用
			*/
			componentWillUpdate(){
				console.log("componentWillUpdate被调用了",this.props.value)
			},
			/*
				页面发生更新之后调用
			*/
			componentDidUpdate(){
				console.log("componentDidUpdate被调用了",this.props.value)
			},
			/*
				见Son组件
			*/
			componentWillUnmount(){
				console.log("即将销毁")
			},
			changeProps(){
				console.log("changeProps被调用了",this)
				this.props.value++
				this.setState({});
			},
			changeState(){
				console.log("changeProps被调用了",this)
				
				this.setState({
					value:++this.state.value
				});
			},
			destruction(){
				console.log("destruction被调用了",this,this.state.show)
				
				this.setState({
				show:!this.state.show
				});
			},
			render(){
				return(
					<div>
						this is props : {this.props.value}
						<br/>
						this is state : {this.state.value}
						<br/>
						<button onClick={this.changeProps}>增加props值</button>
						<button onClick={this.changeState}>增加state值</button>
						<hr/>
						<button onClick={this.destruction}>销毁Son</button>
						{this.state.show||<Son value={this.props.value} change={this.changeProps}></Son>}
					</div>
				)
			}
		})

		let Son = React.createClass({
			/*
			    componentWillReceiveProps
			   	当父级传递的值发生改变时才会触发，自生修改props不会触发
			*/ 
			componentWillReceiveProps(){
				console.log("Son-----componentWillReceiveProps被调用了",this.props.value)
			},
			/*
			    shouldComponentUpdate
			   	当修改父级的props时才会记录上一次值与即将改为的值,修改自身接收到props数据无法记录上一次值
			*/ 
			shouldComponentUpdate(props,state){
				console.log("Son-----shouldComponentUpdate被调用了",this.props.value,props.value,this.state,state,"true----false")
				return true;
			},
			/*
			    组件即将销毁时调用
			*/
			componentWillUnmount(){
				console.log("Son即将销毁")
			},
			changeProps(){
				this.props.change()
			},
			changeSonProps(){
				this.props.value++;
				this.setState({});
			},
			render(){
				return(
					<div>
						this is props : {this.props.value}
						<br/>
						<button onClick={this.changeProps}>增加父级props值</button>
						<button onClick={this.changeSonProps}>增加自身props值,假修改</button>
					</div>
				)
			}
		})
		
		ReactDOM.render(<Father/>,app);
   </script>
</body>
</html>