ライフサイクルメソッドの流れ

Reactのライフサイクル？？って疑問に思われる方は私が以前に書いたReact基礎の記事に軽く載っていますのでそちらを確認下さい。

dev-k.hatenablog.com

Reactのチュートリアルを元に私なりにコード説明致します。

まずは先に

componentDidMount()

componentWillUnMount()

これらから、解説します。

チュートリアルではTimerの表示です
リアルタイムの時刻を秒数事に表示させます。

export default class App extends React. Component {
constructor(props) {
super(props);
this.state = {
   date: new Date()
  }
}

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

//初回のコンポーネント表示のメソッド

 componentDidMount() {
  this.TimerID = setInterval(() => this.Timer(), 1000);
}

//コンポーネントが破棄される直前のメソッド
 componentWillUnMount() {
 clearInterval(this.TimerID);
}

render() {
  return(
   <div>
   <h1>Timer</h1>
   <h2>{this.state.date.tolocaleTimeString()}</h2>
  <div>
    )
  }
}

setStateで更新

this.state内にはnew Date()を保管しときます
時刻を毎秒事に更新させなければいけないので
stateを更新しなければいけません、classなのでsetStateメソッドを使います。
このsetStateメソッド内でまたnew Date()としていますが、こうする事によってsetStateで更新をし、もう一度呼び出してる感じですかね
ここは理解するのに難しいかも知れません。
とりあえずこうするんだなと進みましょう！

ライフサイクルメソッドを使う

mount時であるcomponentDidMount()メソッドで
初回の表示をさせる前の準備をします
これはrender度に毎回、呼ばれる事になります。
TimerIDメソッドをsetIntervalで秒数を指定。

UnMount時であるcomponentWillUnMount()メソッドを使いますUnMount時はコンポーネントが破棄される直前なので、DidMountで設定したsetIntervalをここでキャンセル(停止)させます。
clearIntervalの引数にTimerIDをいれてあげるだけです。

return内のtolocaleTimeString()メソッド
Dateオブジェクトの[時刻]を表すメソッドです
元々reactにあるメソッドなのでこれを使いブラウザに表示させます。

表示DEMO

componentDidUpdate()

先程はtimerでしたが、こちらのメソッドでは
カウントアップで説明致します
ボタンクリックで数字がカウントアップされ
if文を使い途中で数字をゼロに戻しちゃいましょう！
classコンポーネントで実装していきます。

export default class App extends React. Component {
constructor(props) {
super(props);
this.state = {
   counter: 0   //初期値はゼロ
  }
}

componentDidUpdate() {
  if(this.state.counter >= 5) { // 5になったらゼロに
  this.setState({
   counter: 0
  })
}

}

render() {
  return(
   <div>
   <h1> componentDidUpdate</h1>
   <button onClick={() => this.setState({ counter: this.state.counter + 1})}>Count Up</button>
  <div>
    )
  }
}

説明致します!!
this.state内はcounterに対して初期値はゼロ
componentDidUpdate()メソッド、 Update時はユーザーに操作をされる時になります今回でしたらボタン操作になります。
if文で数字をゼロにするならsetStateによって変更できます、コード内では数字が5にCount UPされたタイミングで数字をゼロにキャンセルします。

return内は
ボタンタグ内に直接setStateメソッドを入れちゃいました、初期値がゼロのままなのでsetStateによってボタンをクリックすると＋1ずつCount Upされていきます。

表示DEMO