React Nativeの公式ドキュメントを和訳してみる 4 - State

注意

当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。

バージョン0.51のドキュメントに準拠します。

参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。

本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。

Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

コンポーネントをコントロールするデータには2種類あります。propsとstateです。propsはその親コンポーネントによって設定され、そのコンポーネントが続く限り固定された値です。変更を伴うデータには、stateを使わなければなりません。

一般的には、stateはconstructorで初期化すべきです。stateを変更したい場合はsetStateを呼びましょう。

例えば、テキストをずっと点滅させつづけたいとしましょう。テキスト自体は点滅コンポーネントが作成された時に一度だけ設定されるため、テキストはpropです。”テキストが今表示されているか否か”は時間とともに変化しますので、stateで持っておくべきでしょう。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // 一秒ごとにstateを切り替える
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

// Create React Native Appつかってたらとばす
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

実際のアプリでは、stateをタイマーで設定することはおそらくないでしょう。おそらくサーバから新しいデータが届いたり、ユーザーがデータを入力したりした際にstateを設定することでしょう。Reduxのようなstateコンテナーを使ってデータフローをコントロールすることもできます。その場合、直接setStateを呼び出すよりもReduxを使ってstateを変更することになるでしょう。

setStateが呼び出されると、BlinkAppはコンポーネントを再描画します。タイマー内でsetStateを呼び出すことで、時計の針が進むたびにコンポーネントが再描画されるようになります。

stateはReactと同じように動作しますので、stateの操作についての詳細はReact.Component APIを参照してください。ここまでくると、良い加減ずっと退屈なデフォルトの黒テキストにイライラしてきているんじゃないでしょうか。より美しくするために、styleについて学びましょう。