【react】生命周期

最新推荐文章于 2024-04-22 16:29:46 发布
最新推荐文章于 2024-04-22 16:29:46 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： react 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46613429/article/details/128339225
版权

组件从创建到死亡会经历一些特定的阶段
React组件中包含一系列勾子函数（生命周期回调函数）会在特定的时候调用
我们 在定义组件时，会在特定的生命周期回调函数中做特定的工作

一、旧版本的生命周期

在这里插入图片描述

1、初始化阶段
  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount()
    一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
<script type="text/babel">
	class Count extends React.Component{

		//构造器
		constructor(props){
			console.log('Count---constructor');
			super(props)
			//初始化状态
			this.state = {count:0}
		}

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

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

		render(){
			console.log('Count---render');
			const {count} = this.state
			return(
				<div>
					<h2>当前求和为：{count}</h2>
				</div>
			)
		}
	}
	ReactDOM.render(<Count/>,document.getElementById('test'))
</script>

执行的顺序如下：

在这里插入图片描述

2、更新阶段

更新阶段有三条路线如下：

（1）调用setState()更新状态----shouldComponentUpdate----componentWillUpdate----render----componentDidUpdate

shouldComponentUpdate组件是否应该被更新，控制组件更新的“阀门”。如果在组件中没有写shouldComponentUpdate勾子，默认返回的是true，如果写了就要返回一个布尔值，如果返回true则能往下走，false不能再往下走。

<script type="text/babel">
	class Count extends React.Component{

		//构造器
		constructor(props){
			super(props)
			//初始化状态
			this.state = {count:0}
		}
		
		//加1按钮的回调
		add = ()=>{
			//获取原状态
			const {count} = this.state
			//更新状态
			this.setState({count:count+1})
		}

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

		//组件更新完毕的钩子
		componentDidUpdate(){
			console.log('Count---componentDidUpdate');
		}

		render(){
			const {count} = this.state
			return(
				<div>
					<h2>当前求和为：{count}</h2>
					<button onClick={this.add}>点我+1</button>
				</div>
			)
		}
	}
	ReactDOM.render(<Count/>,document.getElementById('test'))
</script>

执行的顺序如下：

在这里插入图片描述

注意:每触发一次setState就会调用一次shouldComponentUpdate，如果在组件中写了shouldComponentUpdate没有返回布尔值就会报错。

在这里插入图片描述

（2）调用forceUpdate()强制更新----componentWillUpdate----render----componentDidUpdate

不对状态做出更改，组件也能更新，不受shouldComponentUpdate阀门的控制

<script type="text/babel">
	class Count extends React.Component{

		//构造器
		constructor(props){
			super(props)
			//初始化状态
			this.state = {count:0}
		}
		
		//强制更新按钮的回调
		force = ()=>{
			this.forceUpdate()
		}
		
		//组件将要更新的钩子
		componentWillUpdate(){
			console.log('Count---componentWillUpdate');
		}

		//组件更新完毕的钩子
		componentDidUpdate(){
			console.log('Count---componentDidUpdate');
		}

		render(){
			const {count} = this.state
			return(
				<div>
					<h2>当前求和为：{count}</h2>
					<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
				</div>
			)
		}
	}
	ReactDOM.render(<Count/>,document.getElementById('test'))
</script>

执行的顺序如下：

在这里插入图片描述

（3）父组件render----componentWillReceiveProps----shouldComponentUpdate----componentWillUpdate----render----componentDidUpdate

例：有A，B两个组件，A组件维护状态，但是A组件不展示，展示到B组件，形成父子关系

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

父组件render，子组件响应componentWillReceiveProps勾子（组件将要接收参数）

注意：父组件第一次render不会调用componentWillReceiveProps，要修改完状态后父组件重新render才会调用

执行的顺序如下：

在这里插入图片描述

3、卸载组件

componentWillUnmount
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

<script type="text/babel">
	class Count extends React.Component{

		//构造器
		constructor(props){
			super(props)
			//初始化状态
			this.state = {count:0}
		}

		//卸载组件按钮的回调
		death = ()=>{
			ReactDOM.unmountComponentAtNode(document.getElementById('test'))
		}

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

		render(){
			console.log('Count---render');
			const {count} = this.state
			return(
				<div>
					<h2>当前求和为：{count}</h2>
					<button onClick={this.death}>卸载组件</button>
				</div>
			)
		}
	}
	ReactDOM.render(<Count/>,document.getElementById('test'))
</script>

二、新版本的生命周期

新版本的生命周期和旧版本的相比，即将废弃三个勾子：componentWillMount、componentWillUpdate、componentWillReceiveProps
同时提出了两个新的勾子：getDerivedStateFromProps、getSnapshotBeforeUpdate，剩下的跟旧版本的相同。

注意：如果在新版本的react中使用即将废弃的旧版本中的三个生命周期勾子，目前能够正常显示但是会报警告，后期不排除不能用直接报错
如果实在要用，需要使用别名UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps

官网描述 https://react.docschina.org/blog/2018/03/27/update-on-async-rendering.html

在这里插入图片描述

1、初始化阶段
  1. constructor()
  2. getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
<script type="text/babel">
	class Count extends React.Component{

		//构造器
		constructor(props){
			super(props)
			//初始化状态
			this.state = {count:0}
		}

		//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
		static getDerivedStateFromProps(props,state){
			console.log('Count---getDerivedStateFromProps',props,state);
			return null
		}
		
		//组件挂载完毕的钩子
		componentDidMount(){
			console.log('Count---componentDidMount');
		}

		render(){
			console.log('Count---render');
			const {count} = this.state
			return(
				<div>
					<h2>当前求和为：{count}</h2>
					<button onClick={this.death}>卸载组件</button>
				</div>
			)
		}
	}
	ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>

组件挂载和更新都会触发getDerivedStateFromProps

执行的顺序如下：

在这里插入图片描述

注意： getDerivedStateFromProps()要放在类上而不是实例上，要加上static，否则会报错如下：

在这里插入图片描述

要有返回值，并且值为null或者一个对象，否则会报错如下：

在这里插入图片描述

如果返回的是null，则页面上展示的状态值是constructor中的，并且更改值的操作不会受影响；如果返回的是接到的props或者其他对象，则页面上展示的是props中的值或者自己写死的值，并且无法触发其他更改值的操作。

官网详细描述：https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops

2、更新阶段
  1. getDerivedStateFromProps
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate
  5. componentDidUpdate()
<script type="text/babel">
	class Count extends React.Component{

		//构造器
		constructor(props){
			super(props)
			//初始化状态
			this.state = {count:0}
		}
		
		//加1按钮的回调
		add = ()=>{
			//获取原状态
			const {count} = this.state
			//更新状态
			this.setState({count:count+1})
		}

		//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
		static getDerivedStateFromProps(props,state){
			console.log('Count---getDerivedStateFromProps',props,state);
			return null
		}

		//在更新之前获取快照
		getSnapshotBeforeUpdate(){
			console.log('Count---getSnapshotBeforeUpdate');
			return '888'
		}
		
		//控制组件更新的“阀门”
		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>
				</div>
			)
		}
	}
	ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>

执行的顺序如下：

在这里插入图片描述

如果组件执行完了componentDidUpdate意味着组件完成更新了，页面上已经出现了更新之后的效果，之前那些东西就获取不到了，利用getSnapshotBeforeUpdate快照就可以在更新之前获取信息。

官网详细描述：https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

例：getSnapShotBeforeUpdate的使用场景

<div id="test"></div>

.list{
	width: 200px;
	height: 150px;
	background-color: skyblue;
	overflow: auto;
}
.news{
	height: 30px;
}

<script type="text/babel">
	class NewsList extends React.Component{

		state = {newsArr:[]}

		componentDidMount(){
			setInterval(() => {
				//获取原状态
				const {newsArr} = this.state
				//模拟一条新闻
				const news = '新闻'+ (newsArr.length+1)
				//更新状态
				this.setState({newsArr:[news,...newsArr]})
			}, 1000);
		}

		getSnapshotBeforeUpdate(){
			return this.refs.list.scrollHeight
		}

		componentDidUpdate(preProps,preState,height){
			this.refs.list.scrollTop += this.refs.list.scrollHeight - height
		}

		render(){
			return(
				<div className="list" ref="list">
					{
						this.state.newsArr.map((n,index)=>{
							return <div key={index} className="news">{n}</div>
						})
					}
				</div>
			)
		}
	}
	ReactDOM.render(<NewsList/>,document.getElementById('test'))
</script>
3、卸载组件

1、componentWillUnmount()

由ReactDOM.unmountComponentAtNode()触发，与旧版本生命周期相同。

落雪小轩韩
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react function 组件 初始化两次_React源码分析与实现(一)：组件的初始化与渲染
weixin_31115195的博客
02-03 1281
由于微信外链限制，推荐阅读等链接无法点击，可点击阅读原文跳转至原文，查看外链。React源码分析与实现(一)：组件的初始化与渲染原文链接地址：https://github.com/Nealyang前言战战兢兢写下开篇…也感谢小蘑菇大神以及网上各路大神的博客资料参考~阅读源码的方式有很多种，广度优先法、调用栈调试法等等，此系列文章，采用基线法，顾名思义，就是以低版本为基线，逐渐了解源码的...
React15和React16生命周期对比，初识Fiber
why404
10-08 1167
React15和React16生命周期对比，初识Fiber
React 项目初始化步骤
M_wolf的博客
10-13 2862
npm install -g create-react-app create-react-app my-app cd my-app yarn start
react学习（一）之初始化一个react项目
最新发布
若末lan的博客
04-22 465
有很多搭载了其他js的创建，根据自己需要去创建即可。我用的cra创建，npm的时候报错了一堆不知道为啥。是一个用于构建用户界面（UI）的 JavaScript 库，用户界面由按钮、文本和图像等小单元内容构建而成。从 web 端网站到移动端应用，屏幕上的所有内容都可以被分解成组件，即，可由react构建。node版本要么是14，要么大于16.14，我是16.13，所以被提示了。运行起来，报错了，如下图，web-vitals没找着，那就install一下。好了，npm start 运行成功！
初始React – 组件化开发细节
weixin_45727472的博客
03-27 434
一、 组件化开发 1、整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件： 我们说过 ReactDOM.render 第一参数是一个HTML原生或者一个组件； 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数； 2、 在React中，如何封装一个组件呢？ 3、这里我们暂时使用类的方式封装组件： 定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component 实现当前组件的rend
彻底搞懂 React 生命周期
BLUEHEART
03-11 1737
1. React的生命周期有哪些？ React 通常将组件生命周期分为三个阶段： 装载阶段（Mount），组件第一次在DOM树中被渲染的过程； 更新过程（Update），组件状态发生变化，重新更新渲染的过程； 卸载过程（Unmount），组件从DOM树中被移除的过程； https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 1.1 组件挂载阶段 挂载阶段组件被创建，然后组件实例插入到 DOM 中，完成组件的第一次渲染，该过程只会发生
react 生命周期实例分析
10-15
React生命周期是指React组件在其创建、渲染、更新和销毁过程中经历的一系列方法调用。这些方法提供了在特定阶段插入自定义逻辑的机会，使得我们可以更好地控制组件的行为。本文将深入探讨React组件的生命周期，通过...
React生命周期原理与用法踩坑笔记
11-21
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考，具体如下： React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲 ...
react生命周期函数图解
10-09
React中重要的部分就是生命周期函数。与其他框架不同，React的生命周期函数不同阶段支持不同的状态和属性变化，从而进行重新渲染。不同周期执行不同的函数对于整个开发过程很重要。
react为组件初始化默认值，对值进行类型校验
weixin_43090018的博客
01-23 1070
在用vue的时候我们给组件传值是这样的，比如我们有一个item.vue的组件 在这个组件里面，我们在props里面接收传来的数据，在count里面的type和value中规定值的类型和默认值 <template> <div>{{count}}</div> </template> <script> export default { props: { count: { type: Number, value: 0 }
react function 组件 初始化两次_React高频面试题梳理，看看面试怎么答？（上）
weixin_33121737的博客
02-03 420
(给前端大全加星标，提升前端技能)作者：code秘密花园公号 / ConardLi前段时间准备面试，总结了很多，下面是我在准备React面试时，结合自己的实际面试经历，以及我以前源码分析的文章，总结出来的一些 React高频面试题目。以前我写的源码分析的文章，并没有很多人看，因为大部分情况下你不需要深入源码也能懂得其中原理，并解决实际问题，这也是我总结这些面试题的原因，让你在更短的时...
react map莫名其妙刷新初始化原因
JeffanChen的博客
03-31 440
今天写react时，用到 map， 但发现点击antd Table 想要选中一条数据时，map莫名其妙的刷新初始化了 给出大概结构 import React from 'react'; import useColumns from '...'; function myfunc(){ ... const inputmap = new Map(); ... return (<div> <Table dataSource={mydata} columns=
React基础11 React中初始化state的两种方法
热门推荐
多啦的博客
05-12 1万+
初始化state的两种方法 在React的组件中可以在两个位置来初始化state：（1）在组件的constructor中；（2）直接在class中利用属性赋值的方式 在constructor中 在constructor中初始化state如下所示： class App extends React.Component { constructor(props) { // 必须在这里通过sup...
初始化一个React项目
liukai6的博客
10-25 1578
初始化一个React项目 create-react-app是一个通过npm发布的安装包，在确认Node.js和npm安装好之后，输入下面命令创建。 npm install -g create-react-app 安装结束后，使用下面命令创建应用目录。 create-react-app react-app 打开目录 cd react-app 运行项目 npm start 经过...
从零开始React之环境的搭建与项目的初始化
Crcker的博客
06-27 6710
React 简介：React是Facebook开发的一款JS库，是一个声明式、组件化并且用于构建用户界面的 JavaScript 库，通俗来讲就是将界面分成可以复用的组件，在需要时引入，使界面解耦，互不影响而又相互联系，在界面更新时，只会更新需要更新的组件，使得效率和性能上大大提升。 1、环境搭建 安装node 大家可以去官网下载安装包：node官网 安装没有什么可以讲的，一路...
React 事件以及组件 ( 生命周期钩子函数 初始化,运行中,销毁,错误 )
lllllllwj的博客
05-13 2729
原生js — 事件 事件概念 构成 谁触发: DOM 事件触发的形式： on addEventListener 事件类型: click keyup keydown 事件处理程序 事件对象 事件传参 var box = doucment.querySelector( 'div' ) box.onclick = function(){ //事件处理程序 ...
react 初始化项目的两种方法
樊云飞
12-27 3124
第一种 安装脚手架 npm install -g create-react-app 创建项目 create-react-app reactdemo 启动项目 cd reactdemo npm start 运行项目 npm run build 生成项目 第二种 npx create-react-app reactdemo ...
React 初始化加载组件时渲染两次
菠萝萝的博客
07-25 2144
react初始化组件或加载地图类模块重复渲染
react生命周期钩子
09-14
React生命周期钩子是在组件的不同阶段执行特定的操作的函数。根据引用提供的信息，React组件的生命周期可以分为实例化、存在期和销毁期。在实例化阶段，以下方法会被调用（按顺序执行）：getDefaultProps、getInitialState、componentWillMount、render和componentDidMount。 在存在期阶段，组件会根据不同的情况执行不同的生命周期钩子。其中，引用提到的两个生命周期钩子getDerivedStateFromProps和getSnapshotBeforeUpdate属于存在期。 getDerivedStateFromProps是一个静态方法生命周期钩子（引用），它在组件接收新的props时被调用，并且它应该返回一个新的state对象或null值。这个钩子主要用于在props改变时更新组件的state。 getSnapshotBeforeUpdate是另一个存在期的生命周期钩子，它在组件更新之前被调用。它的返回值将作为componentDidUpdate方法的第三个参数传递。这个钩子通常用于在组件更新前保存一些信息，比如滚动位置，然后在组件更新后恢复滚动位置。 除了上述提到的钩子外，React还提供了其他的生命周期钩子函数，如componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate和componentDidUpdate等。这些钩子函数可以帮助我们在组件的不同阶段执行一些必要的操作，以便更好地控制和管理组件的行为。 综上所述，React生命周期钩子是在组件的不同阶段执行特定操作的函数，其中包括实例化阶段、存在期阶段和销毁期阶段。其中getDerivedStateFromProps和getSnapshotBeforeUpdate是在存在期阶段执行的两个重要钩子函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值