react计时器

最新推荐文章于 2024-02-28 17:52:06 发布

原创最新推荐文章于 2024-02-28 17:52:06 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #计时器 #生命周期

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用React创建的实时更新显示当前时间的应用程序。该应用通过设置状态并在构造函数中初始化时间，利用setInterval每秒更新时间状态，确保显示的时间始终保持最新。此外，组件卸载时会清除定时器以避免内存泄漏。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./js/react.js"></script>
	<script src="./js/react-dom.js"></script>
	<script src="./js/babel.min.js"></script>
</head>
<script type="text/babel">
	class MyCom extends React.Component{
		constructor(props){
			super(props);
			this.state={
				time:(new Date()).toLocaleString()
			}
		}
		componentDidMount(){
			this.interId = setInterval(()=>{
				this.setState({
				time:(new Date()).toLocaleString()
			})
			},1000)
		}
		componentWillUnmount(){
			clearInterval(this.interId)
		}
		changeTime=()=>{
			
			this.setState({
				time:(new Date()).toLocaleString()
			})
			console.log(this.state.time)
		}
		render(){
			return <div>{this.state.time}<button onClick={this.changeTime}>改变时间</button></div>
		}
	}
	ReactDOM.render(<MyCom />,document.getElementById('main'))
	
</script>
<body>
	<div id="ma"></div>
	<div id="mu"></div>
	<div id="main"></div>
</body>
</html>