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

【React Native】propsとstateについて

どうも、とがみんです。

ブログを管理するアプリFeedminを開発したのですが、

「Feedmin」はSwiftで開発したので、iOSにしか対応していません。

多くの人に使ってもらうために、アンドロイド版の「Feedmin」を作りたいので、React Nativeを勉強することにしました。

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

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

PropsとStateとは

Propについて

Propsとはコンポーネントと外部のインターフェースで、コンポーネントに必要な値を受け取ることができる。

親のコンポーネントから渡されてきたプロパティが格納されます。

Stateについて

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

Stateの値は、this.setState()をコンポーネント内で呼び出すことによって更新され、

既存のStateを新しいStateで置き換えます。そして、コンポーネントのrender()メソッドが実行され、再描画されます。

次にテキスト入力に関する例で説明していきます。

PropsとStateの使用例

作成したサンプルは以下のものです。

App.jsファイル内の、の値を変更することで、それが、結果に反映されます。

ここでは、Propを利用しています。

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

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

Propの使用例

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

App.js

TextInput.js

{this.props.title}は、このクラス(TextInputSample)に渡されたtitleの値が入ります。

App.jsので、その値が渡されています。渡す値を変更すれば、TextInputSampleクラスで表示される値も変わります。

Stateの使用例

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

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