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')
);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 到目前为止我们只学习了一种方法来更新UI。我们调用 ReactDOM.render()方法来改变输出。这一节,我们...
    张延伟阅读 3,499评论 0 0
  • 生命周期图解 到目前为止我们只学习了一种方法来更新UI。我们调用ReactDOM.render()方法来改变输出:...
    Rising_life阅读 1,872评论 0 1
  • state state是指组件的当前状态。组件根据状态state呈现不同的UI展示。 一旦状态(数据)更改,组件就...
    Galette_LJ阅读 5,401评论 0 0
  • 如果使用PS,一定会遇到不知道如何做海报设计。其实方法非常简单,只需要简单几句话就能说清楚。分以下几点: 1、 P...
    f6d80fd1756e阅读 9,483评论 0 0
  • 像个多年未见老朋友一样 聊聊今天吃了什么最近做了什么 再也没有当年的心动 再也没有当年的冲动 一个人久了身边仿佛容...
    风中榆树阅读 1,462评论 0 0