Chapter 05

ライフサイクルメソッド

前回のチャプターでは、

  • Stateを更新するとrender関数が呼ばれ、再レンダー(再描画)が行われる

ということを学習しました。

そして、render関数が『ライフサイクルメソッド』であるという説明をしました。

このチャプターでは、

  • 『ライフサイクルメソッド』とは?
  • 『ライフサイクルメソッド』の使い方

を学習しましょう。

掴みたい全体像

  • あるタイミングで行いたい処理を『ライフサイクルメソッド』内で行う

ライフサイクルメソッドとは?

Reactコンポーネントには、決まったタイミングで呼ばれる関数があらかじめ設定されています。

例えば、renderはStateが変更されたタイミングで自動的に呼ばれます。

このようなあるタイミングで勝手に呼ばれる関数が『ライフサイクルメソッド』です。

ポイント: コンポーネントには、あるタイミングで勝手に呼ばれる関数がある

componentDidMount

renderの他にも数種類のライフサイクルメソッドが存在しますが、ここでは最も使用頻度の高いcomponentDidMountを例に、使い方を学習しましょう。

componentDidMountメソッドは、その名の通りコンポーネントがマウントした直後に呼ばれる関数です。

『コンポーネントがマウントする』 と言われてもピンと来なくても大丈夫です。実際のコードを見たほうがイメージしやすいと思いますので、まずは動きを確認していきましょう。

class Welcome extends React.Component {
  state = {
    title: 'へろー、りあくと!'
  };
  //追加
  componentDidMount = () => {
    this.setState({ title: 'マウントしました。' });
  }

  handleClick = () => {
    this.setState({ title: 'クリックされました。' });
  };

  render() {
    ...省略

名前の通りの関数を書くだけ

ライフサイクルメソッドの実装は簡単です。名前の通りの関数を書くだけです。
自分で関数を呼び出す必要はなく、Reactコンポーネントが勝手に呼び出してくれます。

このコンポーネントを実行すると...

何もしていないのに、いきなりマウントしました。と表示されました!

マウントしたタイミングとは?

componentDidMountメソッドは、その名の通りコンポーネントがマウントした直後に呼ばれる関数です。

『マウント』とは、簡単にいうと初回レンダーの後です。

画面の描画直後に、呼び出されたcomponentDidMountによってStateが変更されたので、へろー、りあくと!ではなく、マウントしました。が表示されたというわけです。

class Welcome extends React.Component {
  // 1. Stateの初期値
  state = {
    title: 'へろー、りあくと!'
  };

  // 3. 初回描画の直後、Stateを書き換える処理
  componentDidMount = () => {
    this.setState({ title: 'マウントしました。' });
  }

  // 2. Stateを元に初回画面描画される
  // → 3.の後、再度レンダーされる
  render() {
    return (
      <div>
        <h1>{this.state.title}</h1>
        <button onClick={this.handleClick}>ボタン</button>
      </div>
    );
  }
}

難しく考えなくてOK!

少しややこしかったでしょうか?ここで一度、簡単にまとめておきたいと思います。

『初回画面描画直後のタイミングで行いたい処理はcomponentDidMountで行う』

ライフサイクルメソッドはあるタイミングで勝手に呼ばれる関数のことでした。

componentDidMountが担当するタイミングは、もちろん『マウントしたとき』ですが、もっとわかりやすく表現すると 初回render(初回画面描画)直後』 です。

例えばAPIの呼び出しなど、真っ先に行いたい処理をするのがこのタイミングです。

その他のライフサイクル

ここで紹介したrendercomponentDidMountの他にもいくつかのライフサイクルが存在します。
例えば、

  • Stateが変更されたタイミング
  • アンマウントされるタイミング
  • 再描画がかかったタイミング
  • ...など

ここで全てを紹介することはしませんが、基本的な考え方はここで示した通りです。

任意のタイミングで処理が行えるよう、便利な機能がReactには搭載されているということでした!

ポイント: 任意のタイミングで処理が行いたいとき、ライフサイクルメソッドが活用できる