Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
プログラミング

【React Native】React Native ライフサイクルメソッドについて

どうも、とがみんです。

iOSアプリ、アンドロイドアプリの両方に対応したプログラムを書くことのできるReact Nativeについて、

この記事では、React Nativeに用意されているライフサイクルメソッドについて紹介してきます。

ライフサイクルとは

そもそも、ライフサイクルとは何かについてです。

ライフサイクルとは、生まれてから死ぬまでの一連の流れのようなものです。

React Nativeでアプリを開発におけるライフサイクルとは、コンポーネントが生成されてから削除されるまでの流れのことで、

その一連の中で呼び出される関数を「ライフサイクルメソッド」と言います。

次に、この「ライフサイクルメソッド」について紹介していきます。

Reactが用意しているライフサイクルメソッド

とてもわかりやすい図があったので載せておきます。

React componentのライフサイクルに関してです。

>引用:React component ライフサイクル図

上記の図にも書かれている、Reactに用意されているライフサイクルメソッドについて簡単に説明していきます。

componentWillmount()

componentWillmountメソッドは、コンポーネントが描画される直前に1回だけ呼ばれるメソッドです。

このメソッドが呼ばれた後に、render()でコンポーネントが描画されていくので、このメソッド内で、setstate()すると、render時にまとめて処理が行われます。

componentDidMount()

componentDidMount()は、コンポーネントが描画された直後に1回だけ呼ばれるメソッドです。

componentWillReceiveProps()

componentWillReceiveProps()新しいpropsを受け取ると呼び出されるメソッドです。

shouldComponentUpdate()

shouldComponentUpdate()はstateやpropsに更新があった際に、コンポーネントが再描画される前に呼び出されるメソッドです。

「true」を返すと、再描画が実行されますが、「false」を返すと描画されません。

無駄な処理をなくし、パフォーマンスをあげる目的で使われます。

componentWillUpdate()

componentWillUpdate()は、コンポーネントが更新される前に呼び出されるメソッドです。

componentDidUpdate()

componentDidUpdate()はコンポーネントの更新が描画された後に呼び出されるメソッドです。

componentWillUnmount()

componentWillUnmount()は、コンポーネントが削除される時に呼び出されるメソッドです。

まとめ

React に用意されているライフサイクルメソッドについて紹介しました。

参考文献

>React component ライフサイクル図

>Reactが用意しているライフサイクルメソッド7つ

>Reactのライフサイクルメソッドとその使いドコロのまとめ – ajax callをするのに最も適した場所は?

>React Component ライフサイクル ひとめぐり (CodeSandbox 付き)