State 和生命周期(上)（Day5）

在讲到生命周期之前要确认理解前面做过的两件事：

1. setInterval 去更新画面的例子
2. 记得有 class component 跟 function component

以下之前 setInterval 的 example

function tick() {
  const element = (
    <div>      <h1>Hello, world!</h1>      <h2>It is {new Date().toLocaleTimeString()}.</h2>    </div>
}

  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );

setInterval(tick, 1000);

目前这个写法因为 setInterval 是写在最外层，可能造成两个问题

1. 什麽时候 clearInterval
2. tick component 怎麽复用

为解决这两个问题，可以做下面三件事：

1. 理解 ES6 Class
2. 理解生命周期
3. 试着把 setInterval 放进 component 里

ES6 Class 整理

1. Extend：可以用来建立子类别，并继承父类别的功能
2. constructor：随着 class 一同建立并初始化物件
3. super ：用来提供一个类别呼叫其父类别的函数
4. methods：Class 里可以用来执行的 function

生命周期整理

componentDidMount: 在一个 component 被加入 DOM tree 後，会呼叫执行这个方法
componentDidUpdate: 会在更新後马上被呼叫。这个方法并不会在初次 render 时被呼叫，但要小心更新的资讯应该在限制在某些范围内，例如：子层 update 直接更新父层 props 的来源资料，props 更新又会触动 update , 就产生了程序内回圈。
componentWillUnmount： 会在 component 被 unmount 和 destroy 後马上被呼叫，例如页面移除 component 时。
更多生命周期的细节

把 setInterval 放进 component 里

1. 加入 local state , date 储存时间的变数，timeID 储存 setInterval ID 的变数
2. 写更新 date 的函式(method) tick
3. 加入 componentDidMount, componentWillUnmount 控制启动跟清除状态

以下为结果

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      timeID: null
    };
  }


  componentDidMount() {
    this.timeID = setInterval(()=> this.tick(), 1000);
  }
  componentDidUpdate() {
    console.log(this.state.date)
  }
  componentWillUnmount() {
    clearInterval(this.state.timerID);
  }

  tick() {
    this.setState({date: new Date()})
  }  

  render() {
    return (
      <div>
         <h1>Hello, world!</h1>
         <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  
}}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

（下篇会试着改写 Hook 的写法）
注：Hook 是 React 16.8 中增加的新功能。它让你不必写 class 就能使用 state 以及其他 React 的功能。

参考资料：
https://zh-hant.reactjs.org/docs/components-and-props.html
Class Extend 概念