【组件】生命周期-CSDN博客

本文链接：https://blog.csdn.net/qq_35350265/article/details/111246781

该博客演示了React组件的生命周期方法，包括`componentDidMount`用于启动定时器，`componentWillUnmount`用于清理定时器，以及自定义的`distroyComponent`方法来销毁组件。示例中，组件的状态`opacity`在定时器中逐渐减小，当达到一定阈值时重置。文章通过一个简单的例子展示了React组件如何渲染、更新和卸载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>