九、【React基础】组件的生命周期

最新推荐文章于 2024-03-17 07:45:00 发布
最新推荐文章于 2024-03-17 07:45:00 发布
阅读量606 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30769437/article/details/128039775
版权

文章目录

访问官网 ReactDOM 了解更多DOM 的特定方法

1、旧生命周期

在这里插入图片描述

当前版本虽然依然全部可用，但是自16.x版本就开始说要删除其中的 componentWillMount、componentWillReceiveProps、componentWillUpdate；而且这三个钩子也基本万年不用一次，建议不要使用

1.1、单组件生命周期

1.1.1、生命周期

1.1.1.1、初始化阶段：由 ReactDOM.render() 触发—初次渲染

  1. constructor()

  2. componentWillMount()：组件挂载前置；组件将被挂载

  3. render() 必用

  4. componentDidMount()：组件挂载完毕 常用

    1. 可以接收2个参数 (prevProps, prevState)，既挂载前收到的props和初始化时创建的state
    2. 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
1.1.1.2、更新阶段：由组件内部 this.setSate() 或父组件重新render触发

  1. shouldComponentUpdate()：组件更新阀门，判断是否进行更新

    1. 可以接收2个参数 (nextProps, nextState)
    2. 可直接调forceUpdate()绕过阀门进行强制更新

  2. componentWillUpdate()：组件更新前置；组件将要更新

    1. 可以接收3个参数(prevProps, prevState, snapshot)

  3. render() 必用

  4. componentDidUpdate()：组件更新完毕

1.1.1.3、卸载组件：由 ReactDOM.unmountComponentAtNode() 触发
  1. componentWillUnmount()：组件卸载前置；组件将要被卸载，这里可以交代后事 常用
    1. 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

1.1.2、CODE

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_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 }
			}

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

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

			//控制组件更新的“阀门”
			shouldComponentUpdate() {
				console.log('Count--组件更新阀门--shouldComponentUpdate');
				return true // 必须返回boolean且只有返回true才会继续执行更新流程
			}

			//组件将要更新的钩子
			componentWillUpdate() {
				console.log('Count--组件更新前置--componentWillUpdate');
			}

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

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

			//加1按钮的回调
			add = () => {
				//获取原状态
				const { count } = this.state
				//更新状态
				this.setState({ count: count + 1 })
			}

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

			//强制更新按钮的回调
			force = () => {
				this.forceUpdate() // 绕过更新阀门直接强制更新
			}

			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 />, document.getElementById('test'))
	</script>
</body>
</html>

1.1.3、Result

在这里插入图片描述

1.2、嵌套组件生命周期

1.2.1、组件将要接收 props

  • componentWillReceiveProps(props)：组件接收 props 前置
    • 注意点：第一次传的不算（首次渲染不会调此钩子），如果更名为 componentWillReceiveNewProps 更好理解

1.2.2、CODE

//父组件A
class A extends React.Component {
    //初始化状态
    state = { carName: '奔驰' }

    changeCar = () => {
        this.setState({ carName: '奥拓' })
    }

    render() {
        return (
            <div>
                <div>我是A组件</div>
                <button onClick={this.changeCar}>换车</button>
        		<hr />
            	<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'))

1.2.3、Result

在这里插入图片描述

2、新生命周期

在这里插入图片描述

2.1、变化

2.1.1、即将废弃的 3 个老钩子

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

如果在新版本想继续使用这三个废弃的钩子，则必须在前面加上 “UNSAFE_” 前缀，这里的 “unsafe” 不是指安全性，而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug，尤其是在启用异步渲染之后。具体可参考官博 异步渲染之更新（为未来规划计）。

2.1.2、新增 2 个钩子（万年不用）

  • getDerivedStateFromProps：从Props获取派生状态。此方法适用于==罕见==的用例，即 state 的值在任何时候都取决于 props。派生状态会导致代码冗余，并使组件难以维护
    • 可以接收2个参数，没错就是 (props, state)
    • 必须声明为 static 静态方法
    • 必须返回一个 state 对象或者 null
  • getSnapshotBeforeUpdate：在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
    • 可以接收2个参数 (prevProps, prevState)
    • 必须返回 snapshot 的值或 null

2.2、新生命周期

新钩子已经红色标出，由于根本不用，所以未加粗突出，甚至完全可以忽略这俩小透明

2.2.1、初始化阶段：由 ReactDOM.render() 触发—初次渲染

  1. constructor()

  2. static getDerivedStateFromProps()

  3. render() 必用

  4. componentDidMount() 常用

2.2.2、更新阶段：由组件内部 this.setSate() 或父组件重新render触发

  1. static getDerivedStateFromProps()

  2. shouldComponentUpdate()

  3. render() 必用

  4. getSnapshotBeforeUpdate

  5. componentDidUpdate()

2.2.3、卸载组件：由 ReactDOM.unmountComponentAtNode() 触发

  1. componentWillUnmount() 常用

2.3、CODE for getSnapshotBeforeUpdate

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4_getSnapShotBeforeUpdate的使用场景</title>
	<style>
		.list{
			width: 200px;
			height: 150px;
			background-color: skyblue;
			overflow: auto;
		}
		.news{
			height: 30px;
		}
	</style>
</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 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>
</body>
</html>

2.4、Result

滑动到哪就可以让内容停在哪，不会随着数据增加而被压到底下

在这里插入图片描述

小白学习参考视频：尚硅谷React教程

中文官网：State & 生命周期

纯纯的小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react的生命周期
qq_1319620688的博客
02-22 429
react的生命周期
React生命周期详解
小陈的博客
01-11 1万+
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析
React挂载时使用到的生命周期
ImeiLau的博客
03-30 195
1.constructor() 在这个周期中可以做的事情： 1. 初始化状态 2. 绑定this 3. 创建ref 2.getDerivedStateFromProps(props,state) 在这个周期中可以做的事情： 当父组件更新的时候，会传一些的新的属性进来，当有的属性我有用到的时候，这里返回的对象就会去跟状态 this.state={}里的对应属性合并 3.render() 注意：render()中不能使用setState()方法，不然会引起无限更新 this.setState({ s
React 生命周期函数详解
月光晒了很凉快的博客
09-24 1949
生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法。、注意：函数组件无生命周期，生命周期只有类组件才拥有。
React学习（二）：编写 React 组件并成功挂载
你渴望力量吗？
06-09 956
编写React 组件并成功运行
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ReactNative中组件的生命周期
02-25
RN组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下...
React 组件生命周期
12-13
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： ...
React组件生命周期详解
12-03
这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合react.createClass直接创建的组件，使用ES6/ES7创建的这个方法不可使用，ES6/ES7可以使用下面方式： //es7 class Component { static ...
实例讲解React 组件生命周期
10-15
在React开发中，组件生命周期是理解其工作原理的关键部分。组件生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有特定的方法，开发者可以利用这些方法来执行...
前端React篇之React的生命周期有哪些？
最新发布
星辰迷上大海的博客
03-17 1703
React的生命周期包括几个重要阶段：首先是挂载阶段，包括constructor构造函数、render渲染方法和componentDidMount挂载完成方法；接着是更新阶段，涵盖shouldComponentUpdate、render和componentDidUpdate方法；最后是卸载阶段，包括componentWillUnmount方法。
React 生命周期详解
zzx262625的博客
01-27 591
React 组件的生命周期是组件在创建、更新和销毁过程中所经历的一系列阶段。每个阶段都会触发特定的生命周期方法，开发者可以在这些方法中执行特定的操作。React 的生命周期方法可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。在新的类组件中，建议使用新的生命周期方法，或者使用函数组件与 Hooks 替代类组件。需要注意的是，React 16.3 版本引入了新的生命周期方法，并将一些过时的方法（如。
【react全家桶学习】react的 (新/旧) 生命周期（重点）
蜗牛~~
06-27 5567
相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、
react简易实现（1） 组件的挂载
weixin_34015860的博客
02-21 749
react常见的元素类型分为3种：文本类型DOM类型自定义组件类型不同的类型，肯定有不同的渲染和更新逻辑文本类型对应ReactTextComponent类,DOM类型对应ReactDomComponent类自定义组件类型对应ReactCompositeComponent,类我之前看到过一篇非常通俗易懂的文章，关于这三种react元素类型的源码解析，代码如下。实现一个 hello React！的渲染...
react基础--生命周期：概述、挂载阶段、更新阶段、卸载阶段
小白小白从不日别的博客
06-13 1262
react生命周期
react组件中数据的挂载方式
YH_ang_eng的博客
06-13 1792
组件的数据挂载方式 React中数据分为两个部分 属性 状态 个人经验： 频繁变化的就写成状态 属性(props) props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是可以通过父组件主动重新渲染的方式来传入新的 props 属性是描述性质、特点的，组件自己不能随意更改。 两种设置方式： 1. 外部传入 2. 内部初始化设置 总的来说，在使用一个组...
react组件以及组件的数据挂载方式
yanwu9537的博客
06-17 1904
元素与组件 如果代码多了之后，不可能一直在render方法里写，所以就需要把里面的代码提出来，定义一个变量，像这样： import React from 'react' import ReactDOM from 'react-dom' // 这里感觉又不习惯了？这是在用JSX定义一下react元素 const app = '<h1>欢迎进入React的世界</h1>' Re...
React组件的数据挂载方式对比
AMD23的博客
03-21 455
1、属性(props) props正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。 通过箭头函数创建的函数式组件，需要通过函数的参数来接收props: 通过类创建的类组件，需要通过 this.props来接收属性 import React from 'react' const Header = (props) => { return ( <header> ...
React将组件渲染到指定DOM节点
热门推荐
neoveee的博客
02-26 2万+
React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构，如同一个简单的函数，就可以得到一个可以复用的react组件。但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden 的时候，问题就会出现了。例如就像下面的这样： 我们实际期待的效果是这样的： 幸运的是，虽然
react函数组件 生命周期
07-28
- *3* [关于React组件生命周期函数的详解](https://blog.csdn.net/p445098355/article/details/104667187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纯纯的小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值