一、图示
二、编写电子时钟
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;
三、查看效果