State & 生命周期

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')
);
?著作權(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ù)。

推薦閱讀更多精彩內(nèi)容

  • 到目前為止我們只學(xué)習(xí)了一種方法來更新UI。我們調(diào)用 ReactDOM.render()方法來改變輸出。這一節(jié),我們...
    張延偉閱讀 524評(píng)論 0 0
  • 生命周期圖解 到目前為止我們只學(xué)習(xí)了一種方法來更新UI。我們調(diào)用ReactDOM.render()方法來改變輸出:...
    Rising_life閱讀 280評(píng)論 0 1
  • state state是指組件的當(dāng)前狀態(tài)。組件根據(jù)狀態(tài)state呈現(xiàn)不同的UI展示。 一旦狀態(tài)(數(shù)據(jù))更改,組件就...
    Galette_LJ閱讀 1,521評(píng)論 0 0
  • 如果使用PS,一定會(huì)遇到不知道如何做海報(bào)設(shè)計(jì)。其實(shí)方法非常簡(jiǎn)單,只需要簡(jiǎn)單幾句話就能說清楚。分以下幾點(diǎn): 1、 P...
    f6d80fd1756e閱讀 4,078評(píng)論 0 0
  • 像個(gè)多年未見老朋友一樣 聊聊今天吃了什么最近做了什么 再也沒有當(dāng)年的心動(dòng) 再也沒有當(dāng)年的沖動(dòng) 一個(gè)人久了身邊仿佛容...
    風(fēng)中榆樹閱讀 222評(píng)論 0 0