BLOG

【React Native】ライフサイクルメソッドの使い方

2020-06-19

ライフサイクルとは?

React NativeとReactJSでコンポーネントの作成、更新、削除は自動で行われます。これを「ライフサイクル」と呼び、またコンポーネントの作成は「マウント」コンポーネントの削除は「マウント解除」と呼びます。

ライフサイクルの中で実行される関数については、ライフサイクルメソッドと呼びます。通常、関数コンポーネントでライフサイクルメソッドを使う場合はuseEffect()というメソッドを使いますが、今回はクラスコンポーネントのライフサイクルメソッドについて紹介します。

ライフサイクルメソッドのイメージは下記リンクの図に参考してください。

React Lifecycle Methods diagram
Fully interactive and accessible React Lifecycle Methods diagram.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/


一般的な5つのライフサイクルメソッドを勉強しながらアプリを作りましょう!今回は、色が定期的に変わっていて、スピードが変更できるアプリを作ります。初めてReact Nativeを使う方は下記記事に参考してください。

ライフサイクルメソッド

render()

表示されるReact要素をリターンします。なにも表示しない時にはnullをリターンします。コンポーネントがマウントされる前の時とpropsかstateが変わった時にも実行されます。 ※render()は必須です。他のメソッドについては、任意です。

constructor()

一般的にコンポーネントのconstructor()は2つの用途しかありません。これ以外の使い方がある時は、用途を確認してください。
  • stateの初期化
  • イベントハンドラをバインドする
constructor()はコンポーネントの一番最初に実行されるコードです。render()の前に実行されます。constructor()はstateを使っても任意な関数です。stateの他の初期化できる方法はこちらに参考してください。

下記コードはconstructor()とrender()を使っているアプリです。入力ボックスに数字を入れて「更新」を押すと表示されているBPMが変わります。


下記コードはイベントハンドラをバインドしているコードです。
this.onPress = this.onPress.bind(this);
this.onPressのthisはAppコンポーネントになります。バインドしなかったらthis.onPressの中でthisが使えません。

次は他のライフサイクルメソッドを追加して色が変わるように作りましょう。

componentDidMount()

componentDidMount()はコンポーネントがマウントされた後ですぐに実行される関数です。この関数はライフサイクルの中で一度だけ実行されます。上記の3つの関数が全てあれば実行の順番は下記になります。

  1. constructor()
  2. render()
  3. componentDidMount()
プログラムの最初に必要な処理がある時にcomponentDidMount()を使うことが多いです。HTTPリクエストの送信やsetInterval()の実行などの処理はcomponentDidMount()で扱います。

今回のアプリにcomponentDidMount()を追加しましょう。setInterval()を使ったら、一秒に一回stateを更新することができます。下記の関数でcolor1はtrueだったらfalseになって、falseの場合はtrueになります。
function nextState (previousState) {
  return {color1: !previousState.color1}
}
このように一秒に一回色が変わります。

componentDidUpdate()

コンポーネントのpropsかstateが変わる時にcomponentDidUpdate()が実行されます。実行タイミングは、毎回更新時のrender()実行後になります。componentDidUpdate()は更新前のprops (prevProps)と更新前のstate (prevState)の引数があります。一般的な使い方はHTTPリクエストの送信などのpropsかstate変更時の為に使用されます。 今回は色が変わるスピードを変更するためにcomponentDidUpdate()でclearInterval()とsetInterval()を使います。こうしたら色が変わるスピードが変更できるアプリが完成しました!


componentDidUpdate()は関係ないstateが変わっても動作するので気を付けてください。if文を使い制御する事が多いです。今回のif文でbpmが変わる時だけにスピードを変更しています。
if (prevState.bpm !== this.state.bpm)

componentWillUnmount()

コンポーネントのマウント解除の時にcomponentWillUnmount()が実行されます。この関数で必要な解除します。今回はAppコンポーネントがマウント解除の時はないですが、完成するためにcomponentWillUnmount()でclearInterval()を使いましょう。

結論

React NativeでHTTPリクエストやsetInterval()を使いたい時にライフサイクルメソッドで必要な処理が管理できます。クラスコンポーネントでアプリ開発をしたらcomponentDidMount()などが必要になると思います。関数コンポーネントの場合はコードがかなり違うので次回は説明します!

参考

コンポーネントライフサイクル(公式ドキュメンテーション)

ライフサイクル図

Understanding React Native Component Lifecycle Api



これからエンジニア転職を考えている方へ

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます!

教室は生のIT企業!
◆ 実際の開発プロジェクトを通して経験できる!
◆ 現役エンジニアが直接指導!
◆ 20代の転職成功率100%!


是非公式ホームページもご覧ください
未経験からITエンジニアをめざすならロックシステムアカデミー
大阪市福島駅すぐの現役SE直接指導のプログラミングスクール開校
https://rocksystem.co.jp/academy/

株式会社ロックシステム

「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。