reactjs代码示例：React生命周期的不同阶段和钩子函数的使用代码演示

川长思鸟来 2024-02-17 13:17 8阅读 0赞

如下代码展示了React生命周期的不同阶段和钩子函数的使用。

*  在组件的初始化阶段，会触发constructor、componentWillMount、render和componentDidMount；
 *  在更新阶段，会触发shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate；
 *  在卸载组件时，会触发componentWillUnmount。

通过这些钩子函数，可以进行一些操作，比如发送网络请求、订阅消息、关闭定时器等。同时，还展示了如何使用setState更新组件的状态、使用this.forceUpdate()强制更新组件以及传递props给子组件等功能。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>2_react生命周期(旧)</title>
    </head>
    <body>
    	
    	<div id="test"></div>
    	
    	
    	<script type="text/javascript" src="../js/react.development.js"></script>
    	
    	<script type="text/javascript" src="../js/react-dom.development.js"></script>
    	
    	<script type="text/javascript" src="../js/babel.min.js"></script>
    
    	<script type="text/babel">
    		/* 
    				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
    									1.	constructor()
    									2.	componentWillMount()
    									3.	render()
    									4.	componentDidMount() =====> 常用
    													一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
    				2. 更新阶段: 由组件内部this.setSate()或父组件render触发
    									1.	shouldComponentUpdate()
    									2.	componentWillUpdate()
    									3.	render() =====> 必须使用的一个
    									4.	componentDidUpdate()
    				3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    									1.	componentWillUnmount()  =====> 常用
    													一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
    		*/
    		//创建组件
    		class Count extends React.Component{
          
    
    			//构造器
    			constructor(props){
          
    				console.log('Count---constructor');
    				super(props)
    				//初始化状态
    				this.state = {
          count:0}
    			}
    
    			//加1按钮的回调
    			add = ()=>{
          
    				//获取原状态
    				const {
          count} = this.state
    				//更新状态
    				this.setState({
          count:count+1})
    			}
    
    			//卸载组件按钮的回调
    			death = ()=>{
          
    				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    			}
    
    			//强制更新按钮的回调
    			force = ()=>{
          
    				this.forceUpdate()
    			}
    
    			//组件将要挂载的钩子
    			componentWillMount(){
          
    				console.log('Count---componentWillMount');
    			}
    
    			//组件挂载完毕的钩子
    			componentDidMount(){
          
    				console.log('Count---componentDidMount');
    			}
    
    			//组件将要卸载的钩子
    			componentWillUnmount(){
          
    				console.log('Count---componentWillUnmount');
    			}
    
    			//控制组件更新的“阀门”
    			shouldComponentUpdate(){
          
    				console.log('Count---shouldComponentUpdate');
    				return true
    			}
    
    			//组件将要更新的钩子
    			componentWillUpdate(){
          
    				console.log('Count---componentWillUpdate');
    			}
    
    			//组件更新完毕的钩子
    			componentDidUpdate(){
          
    				console.log('Count---componentDidUpdate');
    			}
    
    			render(){
          
    				console.log('Count---render');
    				const {
          count} = this.state
    				return(
    					<div>
    						<h2>当前求和为：{
          count}</h2>
    						<button onClick={
          this.add}>点我+1</button>
    						<button onClick={
          this.death}>卸载组件</button>
    						<button onClick={
          this.force}>不更改任何状态中的数据，强制更新一下</button>
    					</div>
    				)
    			}
    		}
    		
    		//父组件A
    		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>
    				)
    			}
    		}
    		
    		//子组件B
    		class B extends React.Component{
          
    			//组件将要接收新的props的钩子
    			componentWillReceiveProps(props){
          
    				console.log('B---componentWillReceiveProps',props);
    			}
    
    			//控制组件更新的“阀门”
    			shouldComponentUpdate(){
          
    				console.log('B---shouldComponentUpdate');
    				return true
    			}
    			//组件将要更新的钩子
    			componentWillUpdate(){
          
    				console.log('B---componentWillUpdate');
    			}
    
    			//组件更新完毕的钩子
    			componentDidUpdate(){
          
    				console.log('B---componentDidUpdate');
    			}
    
    			render(){
          
    				console.log('B---render');
    				return(
    					<div>我是B组件，接收到的车是:{
          this.props.carName}</div>
    				)
    			}
    		}
    		
    		//渲染组件
    		ReactDOM.render(<Count/>,document.getElementById('test'))
    	</script>
    </body>
    </html>