React propsとstateについて 入門

前回Reactの超入門ということで、プロジェクトの作成からReactでのブラウザ表示までを学びました。

今回は、Reactでも重要な要素であるprops・stateについて学習しようと思います。

初期プロジェクト作成に関しては、以下を参照ください。

スポンサーリンク

propsについて

「プロパティ」を意味していて、オブジェクトを引数として受け取り、React 要素を返すために利用します。

言葉だけだとちょっとわかりづらいかもしれませんので、実際にサンプルコード見てみましょう。

propsを使ってみよう

propsを使って、「こんにちは！React!!」を表示するようなコード例となります。

React.Componetを継承して、Greetクラスを作成・表示にはthis.props.nameを指定。

class Greet extends React.Component {
  render() {
    return <h1>{this.props.name}</h1>;
  }
}

Greetのnameプロパティにこんにちは！React!!を入力値として渡します。

<Greet name="こんにちは！React!!" />

今回は、初期プロジェクトで作成されるApp.jsにコードを書いて表示しています。

// ビルドして確認
$ yarn start

propsの値が表示できることが確認できました。

また、複数Greetクラスを使って表示する際は、nameに与える入力値を変えるだけです。

<Greet name="おはよう！React!!" />
<Greet name="こんにちは！React!!" />
<Greet name="こんばんは！React!!" /

次にstateに関して、学んでいきましょう。

stateについて

コンポーネント内部で扱う変数を格納するのに利用されます。

stateの更新に関しては、this.setState()を利用します。

propsと何が違うのか？という疑問が出ると思いますが、以下のユースケースがあるようです。

ケースpropsstate
親コンポーネントから初期値を取得できるかはいはい
親コンポーネントによって変更できるかはいいいえ
コンポーネント内にデフォルト値を設定できるかはいはい
コンポーネント内で変更ができるかいいえはい
子コンポーネントの初期値を設定できるかはいはい
子コンポーネントで変更できるかはいいいえ

stateを使ってみよう

App.jsを修正して、一定時間単位でカウントアップしていくサンプルコードでstateについて見ていきましょう。

サンプルコード全体

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  componentDidMount() {
    setInterval(
      () => this.countup(),
      1000
    );
  }
  countup() {
    this.setState({
      count: this.state.count + 1
    });
  }
  render() {
    return (
      <div>
        <h1>カウンター： {this.state.count}</h1>
      </div>
    );
  }
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter/>
      </header>
    </div>
  );
}

ここから少しコードを分解して見ていきましょう！

Counterクラスのコンポーネントを呼び出す。

<Counter/>

constructorは、唯一stateに初期値を設定するため利用するものです。

通常stateの更新は、「this.setState()」を使います。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

stateに値を設定する場合は、{ count: 0 }オブジェクトとして設定する点に注意ください。

countup関数では、this.setStateでstate.countプロパティを+1しています。

countup() {
  this.setState({
    count: this.state.count + 1
  });
}

順番前後してしまいましたが、countup関数を呼び出すのにcomponentDidMount()を定義しています。

このcomponentDidMount()は、出力がDOMにレンダーされた後に実行されるものです。

今回のように一定時間でcountをインクリメントしていくような時などに利用します。

componentDidMount() {
  setInterval(
    () => this.countup(),
    1000
  );
}

最後にrenderでstateのcountを表示するだけです。

render() {
  return (
    <div>
      <h1>カウンター： {this.state.count}</h1>
    </div>
  );
}
$ yarn start

0から定期的に+1されるカウンターができました！

今回利用しなかったのですが、componentWillUnmount()というComponentがDOMから削除される時に呼ばれれる関数も用意されています。

まとめ

propsとstateに関して、サンプルコードを動かしならが学んでみました。

自分も実務では、Reactを利用した経験がなかったので、使い勝手を曖昧に認識していた部分とかありましたが、以前に比べて理解することができました。

react, フロントエンドreact

Posted by westworker