class Clock extends React.Component {
constructor () {
super()
this.state = {
date: new Date()
}
console.log('construct')
}
componentWillMount () {
this.timer = setInterval(() => {
this.setState({ date: new Date() })
}, 1000)
console.log('component will mount')
}
componentDidMount () {
console.log('component did mount')
}
componentWillUnmount () {
clearInterval(this.timer)
console.log('component will unmount')
}
render () {
console.log('render')
return (
现在的时间是
{this.state.date.toLocaleTimeString()}
)
}
}
class Index extends React.Component {
constructor () {
super()
this.state = { isShowClock: true }
}
handleShowOrHide () {
this.setState({
isShowClock: !this.state.isShowClock
})
}
render () {
return (
{this.state.isShowClock ?
显示或隐藏时钟
)
}
}
ReactDOM.render(
document.getElementById('root')
);
精彩链接
发表评论