雨轩娇子
2020-05-30 14:43
import React from 'react'
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
time: new Date()
}
}
//生命周期函数 组件创建完成
componentDidMount(){
//创建定时器,间隔 1s
this.timer = setInterval(() => {
this.setState({
time: new Date()
})
}, 1000);
}
//生命周期函数 组件更新
componentDidUpdate(currentProps,currentState){
console.log(currentState);
}
//生命周期函数 组件即将销毁
componentWillUnmount(){
clearInterval(this.timer)
}
render(){
console.log('---render---'); //调用两次
return (
<div>
<h2 >电子时钟</h2>
<br></br>
<h1>{this.state.time.toLocaleTimeString()}</h1>
</div>
)
}
}
export default Clock;
每次state数据更新,都会重新走render方法重新渲染,然后通过diff算法只更新有数据更新的地方。
基于实例的 React16 傻瓜课程
22387 学习 · 106 问题
相似问题