react-当前的时：分：秒-每秒更新
Posted yi-miao-2333
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-当前的时：分：秒-每秒更新相关的知识，希望对你有一定的参考价值。
实现效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- Don‘t use this in production: --> <!--转码--> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> </body> </html> <script type="text/babel"> //创建一个ES6class,并且继承于React..Component class Clock extends React.Component{ //添加一个class构造函数 constructor(props){ super(props); this.state = {date:new Date()}; } //挂载 componentDidMount(){ this.timerID = setInterval( () =>this.tick(), 1000 ); } //卸载 componentWillUnmount(){ clearInterval(this.timerID); } //Clock每秒调用这个方法，更新setState tick(){ this.setState({ date: new Date() }); } //添加一个空的render()方法 render(){ //将函数移动到render()方法中，this.props替换props return( <div> <h2>当前时间：{this.state.date.toLocaleTimeString()}</h2> </div> ); } } //渲染 ReactDOM.render( <Clock />, document.getElementById(‘root‘) ); </script>
以上是关于react-当前的时：分：秒-每秒更新的主要内容，如果未能解决你的问题，请参考以下文章