【组件】生命周期

最新推荐文章于 2023-12-31 21:16:34 发布
最新推荐文章于 2023-12-31 21:16:34 发布
阅读量70 收藏
点赞数
分类专栏： React相关 文章标签： react 生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35350265/article/details/111246781
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 【-->
		<div id="example1"></div>
		
		<script type="text/babel">
		    //1.定义组件
			class Life extends React.Component{
				constructor(props) {
					super(props)
					//初始化状态
					this.state = {
						opacity:'1'
					}
					this.distroyComponent = this.distroyComponent.bind(this)
				}
				
				distroyComponent(){
					//销毁节点中的组件
					ReactDOM.unmountComponentAtNode(document.getElementById('example1'))
				}
				
				componentDidMount(){
					//启动循环定时器
					this.intervalId=setInterval(function () {
						console.log('定时器执行...')
						let{opacity} = this.state
						opacity -= 0.1
						if(opacity<=0) {
							opacity = 1
						}
						this.setState({opacity})
					}.bind(this),200)
				}
				
				componentWillUnmount(){
					//清理定时器
					clearInterval(this.intervalId)
				}
				
				render() {
					const {opacity} = this.state
					return (
					    <div>
						    <h2 style={{opacity: opacity}}>{this.props.msg}</h2>
							<button onClick={this.distroyComponent}>生命周期</button>
						</div>
					)
				}
		    }
			//2.渲染组件标签
			ReactDOM.render(<Life msg="React测试" />,document.getElementById('example1'))
		</script>
		
		<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
		<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
		<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
	</body>
</html>

多喝热水　
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
生命周期
Joker_L_y的博客
12-29 286
生命周期 介绍 目标： 知道什么是生命周期 辅助参考： https://segmentfault.com/a/1190000011381906 什么是： 生命周期是指vue实例(或者组件)从诞生到消亡所经历的各个阶段的总和 生命周期分为3个阶段，分别是创建、运行、销毁 创建阶段：由空白期、data/methods初始化、模板挂载、模板渲染等组成 运行阶段：分为 更新前 和 更新后 两部分 销...
React 组件生命周期
似水流年QC的博客
12-18 1505
componentDidMount（组件挂载）------ 一般在这个钩子中做一些初始化的工作，比如：开启定时器，发送网络请求，订阅消息。componentWillUnmount（组件销毁） ------ 一般在这个钩子中做一些收尾的工作，比如：关闭定时器，取消订阅消息。3. Unmounting（卸载阶段）------ 销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理。当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期。
ArkTS - 组件生命周期
记录点滴
12-31 2212
ArkTS - 组件生命周期
Vue 组件生命周期
weixin_42754922的博客
04-18 1501
每个 Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 组件的生命周期分为四个阶段：create（创建）、mount（挂载）、update（更新）、destroy（销毁） 。每个阶段有"之前"、"之后"两个，总共有 8 个生命周期钩子函数。 Vue 官网对生命周期的详细示意图： ...
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue父组件监听子组件生命周期
10-14
总结来说，Vue 父组件监听子组件生命周期是通过自定义事件和`@hook`修饰符实现的，这为开发者提供了更精细的控制，以确保组件之间的交互按预期进行。了解并熟练掌握这些机制，能够帮助开发者构建更复杂、响应更快的...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
[毕设]酒店管理系统PPT与源码展示.zip
07-27
[毕设]酒店管理系统PPT与源码展示
企业数字化运营管理总体规划方案
最新发布
07-27
本资料围绕总体信息化规划方案、智慧运营系统建设规划方案、阶段性建设方案等方面阐述企业数字化运营管理总体规划方案。
MATLAB hough变换答题卡识别（GUI，配论文）.zip
07-27
MATLAB hough变换答题卡识别（GUI，配论文）.zip
uniapp 子组件生命周期
04-16
在UniApp中，子组件的生命周期与Vue组件的生命周期类似。以下是UniApp子组件的生命周期介绍： ...需要注意的是，UniApp中的子组件生命周期与Vue组件的生命周期略有不同，具体可以参考UniApp官方文档进行了解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值