REACT 之 生命周期

最新推荐文章于 2025-08-15 10:51:23 发布
最新推荐文章于 2025-08-15 10:51:23 发布
阅读量125 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react 文章标签： react.js 生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45776662/article/details/120372077

react生命周期

引言案例

<script type="text/babel">
	//创建组件
	//生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
	class Life extends React.Component{

		state={opacity:1}

		death = () => {
      // 卸载组件
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // 组件挂载完毕后
    componentDidMount(){
	    this.timer = setInterval(()=>{
		    let {opacity} = this.state
		    opacity -= 0.1
		    if (opacity <= 0) opacity = 1
		    // 更新状态
		    this.setState({opacity})
	    },200)
    }

    // 组件将要卸载
    componentWillUnmount(){
	    clearInterval(this.timer)
    }

    //render调用的时机: 初始化渲染、状态更新之后
		render(){
			// 只要改状态,就会调render
      // 每个200ms,调用一次render

			return(
				<div>
					<h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
					<button onClick={this.death}>不活了</button>
				</div>
			)
		}
	}
	//渲染组件
	ReactDOM.render(<Life/>,document.getElementById('test'))
</script>

生命流程周期图（旧版本）

在这里插入图片描述

组件挂载流程

  1. 初始化阶段: 由ReactDOM.render()触发—初次渲染 
    1.  constructor()
    2. componentWillMount()
  2. render()
  3. componentDidMount() =====> 常用
    一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

更新状态时

  1. 更新阶段: 由组件内部this.setSate()或父组件render触发
    componentWillReceiveProps :父组件更新时
    1. shouldComponentUpdate() :setState的起点
    2. componentWillUpdate() :forceUpdate的期起点
    3. render() =====> 必须使用的一个
    4. componentDidUpdate()
	<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(<A/>,document.getElementById('test'))
	</script>

生命周期流程图（新）

在这里插入图片描述

  1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
  2. constructor()
  3. getDerivedStateFromProps
  4. render()
  5. componentDidMount() =====> 常用
    一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
  6. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    1. getDerivedStateFromProps
    2. shouldComponentUpdate()
    3. render()
    4. getSnapshotBeforeUpdate
    5. componentDidUpdate()
  7. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
  8. componentWillUnmount() =====> 常用
    一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

具体用法如下代码

	<script type="text/babel">
		//创建组件
		class Count extends React.Component{
			/* 
				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
								1.	constructor()
								2.	getDerivedStateFromProps 
								3.	render()
								4.	componentDidMount() =====> 常用
											一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
				2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
								1.	getDerivedStateFromProps
								2.	shouldComponentUpdate()
								3.	render()
								4.	getSnapshotBeforeUpdate
								5.	componentDidUpdate()
				3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
								1.	componentWillUnmount()  =====> 常用
											一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
			*/
			//构造器
			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()
			}
			
			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

			//在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'atguigu'
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}

			//组件更新完毕的钩子
			componentDidUpdate(preProps,preState,snapshotValue){
				console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
			}
			
			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>
				)
			}
		}
		
		//渲染组件
		ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
	</script>
react之生命周期
旺旺旺小小苏的博客
03-13 1437
熟练使用react开发项目之后，最近在学习react的底层原理以及源码，顺便总结一下react的生命周期。 一、什么是react？ 在学习原理和源码之前我们必须先明白什么是react。官方文档对于react的定义是： A JavaScript library for building user interfaces 用于构建用户界面的 JavaScript 库 其实我们可以简单的理解为react主要做两件事：响应事件、渲染UI 二、react的生命周期 在学习react的生命周期函数之前我
React之生命周期-setState
wanggang182007的博客
04-22 592
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>2_react生命周期-setState</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心...
React18 生命周期
猫老板的豆
09-02 1617
文章目录生命周期顺序Mounting 挂载顺序Updation 更新顺序Unmounting 卸载注意生命周期1. constuctor2. componentWillMount（废弃）3. static getDerivedStateFromProps（新增）4. render5. componentDidMount版本迁移 在17版本中 废除的生命周期有：componentWillMount，componentwillReceiveProps，componentWillUpdate 新增的生命周期
React-生命周期
qq_44165941的博客
04-22 1071
React 组件的生命周期指的是组件从创建、更新到销毁的整个过程中，React 提供的特定方法（钩子函数）。理解生命周期有助于在合适的时机执行数据请求、DOM 操作或资源清理。React 生命周期分为。理解生命周期有助于编写高效、可维护的 React 代码，尤其在处理异步操作和性能优化时至关重要。的清理函数中取消未完成的请求/订阅。副作用（如数据请求）应在。（同上，挂载阶段已说明）（同上，挂载阶段已说明）（仅在挂载时执行）。（依赖变化时执行）。
React 生命周期详解与示例
热门推荐
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
04-07 8万+
了解并正确使用React的生命周期，对于构建稳定、可维护的React应用具有重要意义。在实际开发中，我们需要根据需求合理选择生命周期方法，并在合适的时机执行相应的操作。同时，我们还需要注意React版本的变化，因为不同版本的React可能会对生命周期方法进行一些调整。
【React】生命周期详解
qq_45677671的博客
04-27 3982
文章目录constructor(props) constructor(props) React组件的构造函数在挂载之前被调用。 在使用React.Component构造函数时： 需要先在添加其他内容前，调用super(props) 用来将父组件传来的props绑定到这个类中 使用this.props将会得到。 官方建议： 不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。 constructor中应当做些初始化的动作 如：初始化
react 18 生命周期
qq_66281352的博客
12-01 447
生命周期 生命周期（组件从诞生到销毁的全过程）本质上就是组件中的函数钩子。主要有三个hooks：挂载，更新，卸载。
初探React之生命周期
ppaii123的博客
05-25 559
初探React之生命周期目录初探React之生命周期 目录 一周期的分类 二组件的生命周期 组件的实例化 存在期state和props的变化 组件的清除 参照官网教程学习后的总结 一、周期的分类React的周期可分为三个阶段： 实例化 存在期 销毁&清理期 这三个阶段分别执行不同的任务。实例化是在React第一次生成真实的DOM时的周期，之后进入存在期。存在期Re
React生命周期钩子函数
越努力，越幸运！
01-28 8755
前言 所谓的生命周期就是指某个事物从开始到结束的各个阶段，就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程，React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是React 的生命周期，各个阶段有相对应的事件钩子，用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的，所以一般特定的钩子做特定的事。 一、React生命周期..
React 生命周期
嗯...
08-25 1613
在 React 中，组件的声明周期是指组件在被创建、更新和销毁的过程中所经历的一系列阶段。这些阶段允许你在不同的时间点执行特定的代码，以便管理组件的状态、数据和用户界面。在早期版本的 React 中，存在三个主要的声明周期阶段：Mounting（挂载）、Updating（更新）和Unmounting（卸载）。然而，随着 React 的发展，声明周期方法已经逐渐被推荐为不建议使用，取而代之的是使用 React Hooks。不过，了解声明周期方法仍然有助于理解 React 组件的工作原理。
老生常谈js-react组件生命周期
10-19
React组件生命周期是指React组件从创建、挂载到卸载的一个完整过程。在这个过程中，组件会经历不同的阶段，并且会调用一系列的方法，这些方法统称为生命周期方法。理解组件的生命周期对于构建高效、可维护的React...
前端React篇之React的生命周期有哪些？
星辰迷上大海的博客
03-17 3144
React的生命周期包括几个重要阶段：首先是挂载阶段，包括constructor构造函数、render渲染方法和componentDidMount挂载完成方法；接着是更新阶段，涵盖shouldComponentUpdate、render和componentDidUpdate方法；最后是卸载阶段，包括componentWillUnmount方法。
React18生命周期
zhangxueyou2223的博客
03-22 758
React 18 引入了一些新的组件生命周期函数，以提供更灵活和强大的控制。在新的生命周期中，我们可以更好地处理组件的渲染、更新和卸载过程。下面我们将深入了解这些新的生命周期函数。
【React】React 生命周期完全指南
鑫宝的博客
11-09 7209
React 组件的生命周期是指组件从创建、更新到销毁的整个过程。合理地使用生命周期方法可以让我们更好地控制组件的行为，优化性能，并处理副作用。React 生命周期方法为我们提供了在组件不同阶段执行代码的机会。优化组件性能正确处理副作用管理组件状态避免内存泄漏constructor：初始化componentDidMount：副作用处理componentDidUpdate：更新后的操作componentWillUnmount：清理工作。
React之生命周期-forceUpdate
wanggang182007的博客
04-22 1074
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>2_react生命周期-forceUpdate</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!--...
深入剖析 React 合成事件：透过 onClick 看本质
读心悦
08-12 111
React中的onClick事件背后是强大的合成事件(SyntheticEvent)机制。本文从表象用法入手，深入解析了其设计动因：统一浏览器差异、实现事件委托优化、协调框架更新周期。重点剖析了事件注册、触发流程和合成对象构造原理，并对比了React 17前后的事件系统差异。文章还总结了性能优化策略、常见陷阱及解决方案，帮助开发者理解React通过标准化事件对象、高效委托和批处理更新所构建的声明式事件模型。掌握这套机制能提升事件处理效率，编写更健壮的组件代码。
告别数据孤岛！React 路由 3 种传参方法全解析
m0_60941346的博客
08-12 1059
作为前端开发者，我们经常需要在不同的路由组件之间传递数据。就像现实生活中传递信件一样，React 路由也有多种 “邮寄” 数据的方式。今天咱们就来聊聊 React 路由组件传递参数的 3 种方法，保证让你看完就能上手！
react与vue的对比，来实现标签内部类似v-for循环，v-if等功能
浩星
08-13 360
在vue中我们提供了很多标签方法，比如用的比较多的v-for循环内容，v-if/v-show等判断，可以直接写在标签中，大大提高了我们的开发效率，那么在react中有没有类似的方法呢？我们这里来说一说。
CSS Houdini 与 React 19 调度器：打造极致流畅的网页体验
最新发布
chaosweet的博客
08-15 828
Hi，我是前端人类学！今天聊聊真东西：「用 CSS Houdini 和 React 19 新调度器提升网页性能」——这不是标题党，而是前沿技术。接下来 3 分钟，带你了解如何结合使用这两项技术，让你的网页如游戏般丝滑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值