Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。 まずはとにかく自由を目指すエンジニアのブログです。

哲学とプログラミングとブログがメインになるかと。
React Native

【React Native】propsとstateについて

どうも、とがみんです。

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

この記事では、この記事では、React Nativeでアプリの開発をするにあたって重要な概念である、PropsStateについて説明していきます。

PropsとStateとは

PropsStateとは一体なんなのかについて説明します。使用例も載せているので、そちらも参考にしてください。

Propsについて

Propsとは、コンポーネントと外部のインターフェースです。外部から何か値を受け取りたい場合に使用します。

「親」にあたる、外部コンポーネントから渡されてきた値、プロパティが、このPropsに格納されます。

Stateについて

Stateは、コンポーネント内で扱う変数を格納する役割があります。

このStateの値は、this.setState()をコンポーネント内で呼び出すことによって更新され、既存のStateを新しいStateで置き換えます。

そして、コンポーネントのrender()メソッドが実行され、再描画されます。

わかりにくいと思うので、実際の使用例についてです。

PropsとStateの使用例

App.jsファイル内の、<TextInput title = ‘とがみんブログ’/>の値は、別のファイルに書かれているTextInputコンポーネントが書かれたファイルTextInput.jsに渡されます。

渡された値はpropsに格納され、TextInput.jsファイルで呼び出すことができます。

また、この灰色のテキスト入力欄に、文字を入力できるようになっていますが、ここにはStateが利用されています。

それぞれについて説明していきます。

Propの使用例

App.jsファイルのコードの一部と、TextInput.jsファイルのコードの一部です。

App.js

TextInput.js

TextInput.jsの、{this.props.title}は、このTextInputSampleクラスに渡され、propsに格納されたtitleに対応する値が入ります。

上記の例では、App.js<TextInputSample title = ‘とがみんブログ’/>で「とがみんブログ」という値が渡されています。

渡す値を変更すれば、TextInputSampleクラスのTextで表示される値も変わります。

Stateの使用例

TextInput.jsファイルのコードの一部です。

TextInputタグの中のvalueは、テキスト入力欄の中の値です。

onChangeTextは、テキスト入力欄の入力が変更されるたびに呼ばれます。

変更されると、changeTextメソッドが呼ばれ、stateの中のtextFieldの値が更新され、テキストフィールど上にその変更が反映されます。

このように、stateは、コンポーネント内で扱う変数の役割を果たします。

GitHub

サンプルコードはGitHubにあげているので、参考にしてください。

>https://github.com/togamin/ReactTextInputSample.git

まとめ

React-Nativでアプリを開発するにあたって重要なPropsstateについて説明しました。

何か不明点等あればご指摘いただけると嬉しいです。

参考文献

>React超入門。propsとstateの動きを理解するコード

>Component Best Practices