【一起进大厂】7天掌握react基础系列-组件周期（4）

学习目标

• 组件生命周期 ★ ★ ★ ★ ★

组件的生命周期

组件的创建到销毁整个过程称之为组件的生命周期。组件的生命周期不同时期让开发者可以做不同的事。例如：组件刚创建的时候可以请求接口数据渲染到页面上，组件不同的时候卸载，等等。
组件的生命周期分为3个部分：挂载阶段、更新阶段、卸载阶段。

挂载阶段

组件创建之前执行。

执行顺序： constructor => render => componentDidMount

钩子函数	触发时候	作用
constructor	组件创建之前，会调用它的构造函数	1. 初始化state 2. 创建Ref 3.绑定函数（bind）等等
render	组件每次渲染都执行	更新页面UI
componentDidMount	组件创建完成执行（DOM加载完成）	1.请求 ajax 2. 执行 DOM 操作。等等

更新阶段

执行顺序： render => componentDidUpdata

以下情况组件会更新：

1.当执行setState()
2.当执行foruceUpdata()
3.组件接收到props数据变化

钩子函数	触发时候	作用
render	组件每次渲染都执行	更新页面UI
componentDidUpdata：	组件更新（完成DOM渲染）后	获取组件更新后数据或者状态

卸载阶段

组件卸载时候，例如：组件被删除

执行顺序： componentWillUnMount

钩子函数	触发时候	作用
componentWillUnMount	当前组件销毁	清除页面定时器、或者触发组件销毁相关业务等等

3个阶段例子

import React from 'react';
import ReactDOM from 'react-dom/client';
class Clock extends React.Component {
	constructor(props) {
	  super(props);
	  this.state = {
		  date: new Date()
		};
	}
   // 组件加载完成的时候
	componentDidMount() {
	  this.timerID = setInterval(
		() => this.tick(),
		1000
	  );
	}
   
	// 组件数据更新 （定时器定时刷新数据）
	componentDidUpdate() {
		console.log('更新啦')
	}
	
	// 组件卸载的时候，清除定时器
	componentWillUnmount() {
		// 组件卸载的时候，清除定时器
	  clearInterval(this.timerID);
	}
   
	tick() {
	  this.setState({
		date: new Date()
	  });
	}
   
	render() {
	  return (
		<div>
		  <h1>Hello, 程序员米粉!</h1>
		  <h2>现在时间是：{this.state.date.toLocaleTimeString()}.</h2>
		</div>
	  );
	}
  }
   
  ReactDOM.createRoot(document.getElementById('root')).render(<Clock />);

结语

希望看完这篇文章对你有帮助

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注，后续会输出更好的分享。

欢迎关注公众号：【程序员米粉】
公众号分享开发编程、职场晋升、大厂面试经验