切换主题
字数
183 字
阅读时间
1 分钟
![[Pasted image 20240109110526.png]]
eact生命周期在项目中的执行顺序
constructor() => componentWillMount() => render() => componentDidMount()
当更新执行直接执行以下：
componentWillReceiveProps (nextProps) => shouldComponentUpdate(nextProps,nextState) => componentWillUpdate (nextProps,nextState) => render() => componentDidUpdate(prevProps,prevState)
关闭页面组件最终都会销毁： componentWillUnmount ()
作者：hannie76327
链接：https://juejin.cn/post/6878514156870811662
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
https://www.imooc.com/video/17886 ![[Pasted image 20240109110544.png]] ![[Pasted image 20241010200324.png]]（图片来源：[https://juejin.cn/post/7285540804734468150?searchId=20241010195305710C301BFC23258E862A#heading-4]）
jsx
import React, { Component } from "react";
class DigitaclClock extends React.Component{
constructor(props){
super(props)
this.state = {
date : new Date()
}
}
componentDidMount(){
this.timer = setInterval(()=> {
this.setState({
date:new Date()
})
},3000)
}
componentDidUpdate(currentProps,currentState){
console.log(currentState)
}
componentWillUnmount(){
clearInterval(this.timer)
}
render(){
return(
<div className="digital-clock-component jumbotron">
<h1>{this.state.date.toLocaleTimeString()}</h1>
</div>
)
}
}
export default DigitaclClock;贡献者
sunchengzhi