TOP

BLOG

技術研究ブログ

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

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

2020-04-28

はじめに


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

過去の記事でも触れた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について調べた時、クラスと関数両方のコンポーネントの情報がヒットします。そのため、両方勉強しておくことで調べた情報をより理解しやすくなります。

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

参考


他の記事へ