zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    关于以追加模式写入文件时,为什么第一行是空行?
    使用正则表达式的技巧
    super关键字的三种用法
    Excel快捷键
    重载与重写的区别
    方法重名
    区分子类方法中重名的三种变量
    继承
    Chapter08【String类、static、Arrays类、Math类】
    Math类
  • 原文地址:https://www.cnblogs.com/yi-miao-2333/p/11869178.html
Copyright © 2011-2022 走看看