【React Native】関数Componentを作ろう！

はじめに

---

React NativeのComponentには２つの種類があります。

過去の記事でも触れたclass（クラス）とfunction（関数）です。

過去の記事でクラスのComponentを紹介しましたので、今回は関数のComponentについて説明していきます。

React Nativeのコードを書いたことが無い方はまず、クラスのComponentについて書いたこの記事を参考にしてみてください。

【React Native】Componentとは？

関数のComponentの書き方

---

■ Componentについて

関数でComponentを作った場合、以下のようになります。

例として、以下のような関数を用いたHello Worldのシンプルなアプリがあるとします。

Componentの詳細については「Componentとは？」を参考してください。

■Propsを使う場合

Propsを使う場合、Component関数の引数はpropsのオブジェクトです。その引数のプロパティが使えます。

Propsの詳細については「Propsとは？」を参考してください。

■Stateの使い方

ComponentとPropsはクラスと関数で書き方が似ていますが、Stateは異なります。Stateの定義はこのような書き方です。

const [value, setValue] = React.useState(initialValue);

valueはStateの値です。setValueはその値をセットするための関数です。initialValueは初期値です。valueを直接取得しますが、更新する時にsetValueを使います。

setValue(newValue); 

下記コードはStateを使って<TextInput>に入力することを表示するアプリです。

Stateの詳細については「Stateとは？」を参考してください。

クラスと関数の書き方比較

---

■図

■クラスと関数の違い

クラスと関数の違いはなんでしょうか？

上記は書き方の違いですが、他に違いがあるでしょうか？

以前はクラスでは出来て、関数では出来ない機能があることでした。

現在は関数に機能が追加されたため、その答えは古くなりました。速さもあまり変わりません（速さの結果は不明です）。微妙な違いについてはこちらの記事を参考にしてください。

結論

---

Reactについて調べた時、クラスと関数両方のコンポーネントの情報がヒットします。そのため、両方勉強しておくことで調べた情報をより理解しやすくなります。

どちらも使えますが、最近は関数コンポーネントの方がより主流になっています。

参考

---

• 関数Componentとクラスの違いは？
• ドキュメンテーション：ComponentとProps
• React Interview Question：ブラウザでレンダリングされるのはコンポーネントか要素か？

---

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

---

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

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

是非公式ホームページもご覧ください