React的生命周期总结

于 2023-03-25 15:33:32 发布
阅读量570 收藏 1
点赞数 1
分类专栏： 总结 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YX0711/article/details/129767348
版权

简介

      React的生命周期从16.3版本开始，生命周期的钩子函数也进行了一些改变，我们了解生命周期有助于我们知道React的组件渲染的整个流程，同时对比新旧版本生命周期的变化也有助于我们了解一些生命周期的改变的原因和React的一个发展趋势。

新旧生命周期图对比

旧版
在这里插入图片描述
新版
在这里插入图片描述

旧版生命周期执行流程及案例

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() =====> 常用一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
案例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react生命周期(旧)</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		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>

新版生命周期执行流程及案例

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() =====> 常用一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
案例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react生命周期(新)</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
	<script type="text/babel">
		//创建组件
		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()
			}
			//若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>
</body>
</html>

新旧钩子对比

react新旧生命周期的区别：
  1. 新生命周期中去掉了三个will钩子，分别为componentWillMount、componentWillReceiveProps、componentWillUpdate；
  2. 新生命周期中新增了两个钩子，分别为getDerivedStateFromProps（从props中得到衍生的state）和getSnapshotBeforeUpdate。
BUG不加糖
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【react全家桶学习】react的 (新/旧) 生命周期（重点）
蜗牛~~
06-27 6260
相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、
React之新旧生命周期对比
wanggang182007的博客
04-24 295
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>新旧react生命周期对比</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --&gt...
React生命周期新旧对比
qq_42711864的博客
04-11 377
16之前 16版本后
React 新旧生命周期的区别
凯扣叮博客
12-27 399
在React v16.3中，迎来了新的生命周期改动。
React生命周期的理解.md
02-23
对于初学react的来说，首先是了解最初的html编译的效果，然后便是一步步深入了解。对于框架的深入无非是生命周期，路由，传参等等，现在我已总结生命周期
React+组件+生命周期和状态+理解
最新发布
02-26
总结来说，React组件是构建用户界面的模块，通过管理状态和利用生命周期方法实现动态行为。随着React的发展，函数式组件和Hooks提供了更加简洁和强大的编程模型，降低了对类组件和生命周期方法的依赖。而上下文API和...
react-使用简单的组件测量使用控件的React渲染生命周期
08-15
总结来说，通过监控和分析React组件的生命周期，开发者可以有效地控制组件的渲染过程，减少不必要的计算和DOM操作，提高应用性能。这不仅有助于优化用户体验，还能降低服务器负载，特别是在数据密集型或实时更新的...
react的学习总结
06-01
六、React生命周期方法 React组件有多个生命周期方法，如`componentDidMount()`, `componentDidUpdate()`, `componentWillUnmount()`等，这些方法在组件的不同阶段被调用，用于执行初始化、更新或清理任务。 七、...
react 新旧生命周期有什么区别？新增了哪些钩子？废弃了哪些钩子？为什么废弃？
行星飞行的博客
07-09 840
在日常面试中，若对于了解的同学而言，多多少少会被问到生命周期相关的问题，比如大致阐述生命周期的运作流程，以及每个钩子函数大致的作用，而我在两位出去面试的同事那里了解到，他们都遇到了这个高频问题。我在以往文章中介绍旧版生命周期钩子函数的作用，当时也有同学留言到我未提及新增的部分钩子的作用，那么本文正好对于旧版本生命周期做一次运转对比，补全新钩子的作用，同时站在面试题的角度梳理下我们该如何组织语言，那么本文开始。在版本前后存在两套生命周期，之前为旧版，之后则是新版，虽有新旧之分，但主体上大同小异。新版也只是废弃
React学习笔记之组件的生命周期
HJHAlone的博客
03-23 854
一、生命周期 1.生命周期的三个阶段 1）创建时 componentDidMount在render渲染完成之后就立即执行，可以执行DOM操作和发送网络请求 2）更新时 先执行render()再执行componentDidUpdate() 3）卸载时 开了定时器，要在componentWillUnMount清除；在组件消失时调用componentWillUnMount 二、render props 1.首先Mouse定义操作方法，rende...
React旧生命周期---主要知识点
weixin_48037671的博客
03-31 749
React旧生命周期 话不多说，先上图 画蓝色对号的是在react新生命周期中将要摒弃的； componentWillMount() componentWillReceiveProps() componentWillUpdate() 画红色框的是react生命周期中常用到的周期，也是以后工作后会常用到的生命周期； ...
React 新版生命周期和旧版对比
flytam的博客
05-19 1448
先mark两张图。以后便于查询 之前： 之后 参考连接这里写链接内容
React新旧生命周期
weixin_33862514的博客
03-12 251
React16.3.0开始，生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的生命周期相信大家已经很熟悉。16版本的react对组件的生命周期函数进行了一些修改,下面进行详细说明。 React16.3.0之前生命周期 创建期: construc...
React各个版本生命周期和作用
mouren_zheng的博客
08-02 975
React 生命周期 15版本 初始化阶段 getDefaultProps 作用 该阶段主要是定义初始化props 写法： getDefaultProps(){ return {age：18} } getInitState 作用 该阶段主要是初始化State 写法： getInitState(){ return { age :18 } } 小总结：这2个钩子也是15版本和16版本的区别之一 16版本 更新阶段 1.constructor 作用： 1.定义状态 2.给普通函数绑定this 3.通过super
react新旧版本生命周期函数详细介绍
qq_35629054的博客
06-10 1212
react生命周期主要分为三大类：挂载、更新、卸载 1.首先我们来看一下旧版本的react生命周期 <16.3版本 挂载 constructor、componentWillMount、componentDidMount 更新(更新可以分为两大类)： componentWillReceiveProp、shouldComponentUpdate、componentWillUpdate、componentDidUpdate props变化触发的更新: props变化 => com
react新旧版本生命周期函数讲解
诗渊的博客
02-29 1732
react在引入 Fiber 之后，其生命周期也有所变化，新增了一些生命周期函数，同时也建议使用者废弃一些生命周期函数，下面博主对比一下react v16.3之前的生命周期与react v16.4及之后的生命周期函数。 一、生命周期图整体对比 1.1 react v16.3之前版本 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() comp...
react生命周期详细介绍
热门推荐
luobo2345的博客
02-10 2万+
react生命周期详解，挂载渲染，卸载和错误捕获
react学习之旅十：生命周期函数
muAluo的博客
11-09 445
一、认识React生命周期函数 生命周期函数：在某一时刻组件会自动调用执行的函数。 React生命周期的四个阶段：初始化阶段、虚拟DOM挂载阶段、更新阶段、DOM卸载阶段。 初始化阶段： constructor：严格上来说属于ES6语法，并不是React独有的生命周期，但是可以当作React的初始阶段。 挂载阶段： componentWillMount：DOM挂载之前执行。 render：挂载时执行。状态state或属性props发生改变时就会重新渲染。 componentDidMoun
vue react生命周期
09-14
总结一下，Vue和React的生命周期函数在创建、更新和销毁的过程中有所不同，同时React还引入了一些新的生命周期函数。了解这些生命周期函数的执行顺序和用途可以帮助我们更好地管理和控制组件的行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值