とがみんブログ
就活中、自己分析にハマり、心理学、脳科学の本を読み漁りつつ哲学チックなことをひたすら考えていました。このブログでは、そんなとがみんの考えや経験を綴っていきます。
React Native

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

どうも、アンドロイド用ブログ管理アプリ「Feedmin」を開発すべく、React Nativeについて勉強中のとがみんです。

調べたこと、勉強したことのアウトプットをこのブログでもしていきます。

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

ライフサイクルとは

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

今回紹介するのは、React Nativeでアプリを開発するに当たって重要な、ライフサイクルメソッドについてです。

React Nativeにおけるライフサイクルとは、コンポーネントが生成されてから削除されるまでの流れのことで、その中で呼び出される関数、ライフサイクルメソッドについて紹介していきます。

スポンサードリンク

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

Reactが用意しているライフサイクルメソッドに関して、とてもわかりやすい図があったので載せておきます。

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

上記の図に書かれているメソッドを簡単に説明していきます。

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 付き)