React-计时器

77 阅读 0 评论 51 点赞

我是靠谱客的博主积极歌曲，最近开发中收集的这篇文章主要介绍React-计时器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果:
在这里插入图片描述
完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<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.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="root"></div>
<script type="text/babel">

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state={
            date:new Date()
        }
    }
    render(){
        return (
            <div>
            <h1>你好</h1>
            <h2>现在的时间是:{this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
    componentDidMount(){
       this.timeId= setInterval(()=>{
            this.tick()
        },1000)
    }
    tick(){
        this.setState({
            date:new Date()
        })
    }
    componentWillUnmount(){
        clearInterval(this.timeId)
    }
}
ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
)
</script>
</body>
</html>