【React Native】関数Componentを作ろう！ - マリーとジョーのIT研究ブログ（ロックシステム）

この記事の内容

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

setValue(newValue);

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

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

	クラス	関数
定義	class XXX extends Component{}	function XXX (props) {}
中身	render() { return XXX; }	return XXX;
Props	this.props.XXX	props.XXX
Stateの定義	state = {XXX: YYY}	const [XXX, setXXX] = React.useState(YYY);
Stateの更新	this.setState({ XXX: YYY });	setXXX( YYY );

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

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

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

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

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

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