React Native State

React Native (State)

前回に続き、ReactNativeの説明を行います。 今回は、Stateに焦点を当てます。

Stateとは

component内で使用出来る値となります。 値が変更(setStateを用いる)されるとrenderが走り、該当のcomponentが 再描画されます。

コード

以下にコードを記述します。

class ChildrenState で 親コンポーネント(ParentState)に 対して、propsを渡しています。 class ParentState では、内部でカウンタを持ち、setStateで1秒ごとに props(コンポーネント内部の変数)を変更しています。 propsが変更された際、renderメソッドが呼び出され、コンポーネントの再描画をしています。

class ParentState extends React.Component {
  constructor(props){
    super(props);
    this.state = {isShowingText: true};

    setInterval(() => {
      this.setState(previousState => {
      return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }
  render(){
    let display = this.state.isShowingText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class ChildrenState extends React.Component {
  render(){
    return (
      <View style={{alignItems: 'center', marginTop: 200}}>
        <ParentState text='state1' />
        <ParentState text='state2' />
        <ParentState text='state3' />
        <ParentState text='state4' />
      </View>
    );
  }
}

参考

React Native勉強メモ 〜Componentの基礎編〜