render、componentDidMount、componentDidUpdate、componentWillUnmountなどの関数は、React.Componentクラスによって提供される.
すなわち、classを使用して構成部品を作成する際に使用される関数です.

例による理解

class Clock extends React.Component {

  constructor() {
    super();

    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, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

ReactDOM.render()の第1パラメータからクロックが転送されると、RECTはクロック素子のconstructorを実行する.

constructor内のsuper()は、extendedのReact.Componentメソッドを使用するために貼り付けなければならない.また、this.state = {}にクロックの初期状態(ここではnew Date)を設定してもよい.

次いで、render()メソッドが呼び出される.

render()メソッド内でリターンが実行される場合、componentDidMount()メソッドが呼び出される.

タイマーを追加し、component内のtick関数を毎秒実行できます.

ブラウザがtickメソッドを呼び出すたびに、this.state.dateの値が変化します.

このとき、componentDidUpdate()と宣言すると、ステータス変更時に呼び出されますが、rander()が定義されていないために再呼び出された部分が変更されます.

クロック素子がDOMから削除されると、componentWillUnmountが呼び出され、timerも共に停止する.