TOP

BLOG

技術研究ブログ

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

【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つの用途しかありません。これ以外の使い方がある時は、用途を確認してください。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

他の記事へ