class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, Rails!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
State & 生命周期
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
推薦閱讀更多精彩內(nèi)容
- 到目前為止我們只學(xué)習(xí)了一種方法來更新UI。我們調(diào)用 ReactDOM.render()方法來改變輸出。這一節(jié),我們...
- 生命周期圖解 到目前為止我們只學(xué)習(xí)了一種方法來更新UI。我們調(diào)用ReactDOM.render()方法來改變輸出:...
- state state是指組件的當(dāng)前狀態(tài)。組件根據(jù)狀態(tài)state呈現(xiàn)不同的UI展示。 一旦狀態(tài)(數(shù)據(jù))更改,組件就...
- 如果使用PS,一定會(huì)遇到不知道如何做海報(bào)設(shè)計(jì)。其實(shí)方法非常簡(jiǎn)單,只需要簡(jiǎn)單幾句話就能說清楚。分以下幾點(diǎn): 1、 P...
- 像個(gè)多年未見老朋友一樣 聊聊今天吃了什么最近做了什么 再也沒有當(dāng)年的心動(dòng) 再也沒有當(dāng)年的沖動(dòng) 一個(gè)人久了身邊仿佛容...