【React Native】propsとstateについて

どうも、とがみんです。

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

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

Contents

PropsとStateとは
- Propsについて
- Stateについて
PropsとStateの使用例
- Propの使用例
- Stateの使用例
GitHub
まとめ
参考文献

PropsとStateとは

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

Propsについて

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

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

Stateについて

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

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

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

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

PropsとStateの使用例

pic.twitter.com/ecOMIVQ01p
— とがみん@ブロガー(セブ留学→東京) (@togaminnnn) 2019年2月15日

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

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

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

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

Propの使用例

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

App.js

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInputSample title = 'とがみんブログ'/>
      </View>
    );
  }
}

export default class App extends React.Component {

render() {

return (

</View>

);

}

TextInput.js

class TextInputSample extends React.Component{
  render(){
    return(
      <View style={styles.container}>
        <Text>{this.props.title}</Text>
      </View>
    );
  }
}

class TextInputSample extends React.Component{

render(){

return(

<Text>{this.props.title}</Text>

</View>

);

}

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

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

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

Stateの使用例

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

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

class TextInputSample extends React.Component{
  state = {
    textField:'',
  }
  changeText(text){
    this.setState({textField:text});
  }
  render(){
    return(
      <View style={styles.container}>
        <Text>{this.props.title}</Text>
        <TextInput
          style={styles.textinput}
          value={this.state.text}
          onChangeText={this.changeText.bind(this)}
        />
      </View>
    );
  }
}