专栏首页爱明依react 学习:react 生命周期

react 学习:react 生命周期

一、图示

二、编写电子时钟

1 新建DigitalClock.js

import React from 'react'

/**
 *
 */
class DigitalClock extends React.Component{


    constructor(props){
        super(props)
        this.state={
            date:new Date()
        }
    }

    componentDidMount(){
        this.timer=setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },3000)
    }
    componentDidUpdate(currentState){
        console.log(currentState)
    }
    componentWithUnmount(){
        clearInterval(this.timer)
    }

    render(){
        return (
            <div className="digital-clock-component jumbotron">
                <h1>{this.state.date.toLocaleString()}</h1>
            </div>
        )
    }



}

export default DigitalClock

二、在App.js 引入

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';
import LikesButton from './components/LikeButton';
import DigitalClock from './components/DigitalClock';
const tags=['男神']
class App extends Component {

  render() {
    return (
      <div className="App">
         <div className={"App-header"}>
             <img src={logo} className={"App-logo"} alt={"logo"}/>
             <h2>欢迎来到矿洞程序员</h2>
             {/*<NameCard name="chenxiaoyang" number={123456} isHuman tags={tags} />*/}
             {/*<LikesButton/>*/}
             <DigitalClock/>
         </div>
         </div>
    );
  }
  }

export default App;

三、查看效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react学习:React状态

    爱明依
  • react 学习:React属性 数组遍历、css引入

    爱明依
  • linux上部署tomcat

    爱明依
  • 黑客常用WinAPI函数整理

    黑客常用WinAPI函数整理 之前的博客写了很多关于Windows编程的内容,在Windows环境下的黑客必须熟练掌握底层API编程。为了使读者对黑客常用的Wi...

    Florian
  • 搭便车的边缘计算指南

    边缘计算是当前研究的热点。每一个分析师、记者和专家都在提供意见。每天,我的电子邮件“收件箱”里都充满了这些观点,足以让那些试图搞清楚边缘计算的基础知识以及所有炒...

    边缘计算
  • 初学java之触发响应事件举例子

    设置一个触发响应事件?   比如消息框..... 1 package hello; 2 import javax.swing.*; 3 import pr...

    Gxjun
  • 画图神器ggplot2之一:geom_point

    统计学家
  • .Net中Finalize()和Dispose()有什么区别?

    程序你好
  • 何谓“人工智能”?如何做到“强人工智能”?

    本文是工程师Narasimha Prasanna HN撰写的技术博文,主要介绍人工智能的概念,当前人工智能的水平,以及什么是强人工智能,当前实现强人工智能的方向...

    WZEARW
  • Ta 在假笑么?这个识别算法可以鉴定

    场景描述:假笑可能已经成为很多成年人日常生活与工作中必不可少的一个表情,也许是出于礼貌,或因为尴尬,或碍于面子,我们常常需要一个「假笑」来缓解气氛。英国布拉德福...

    HyperAI超神经

扫码关注云+社区

领取腾讯云代金券