React入門（4）classコンポーネントの作成

Reactコンポーネントの作成には、関数型とclassを使う方法の2つがあります。
関数型コンポーネントについてはReact入門（3）関数型コンポーネントの作成を参考にしてください。

ここではclass型コンポーネントについて学習していきます。
＊ここで紹介するカウントアプリのソースはGitHubのページを参考にしてください。

Class型コンポーネントはES6から使われている「class」 宣言から始まります。
また重要なポイントとして 「extends React.Component」とすることで、 「React.Component」を継承する必要があリます。これによって単なるクラスではなく、React Component に必要な諸性質を受け継いだクラスを作成することができます。

次にClass型コンポーネントは 「constructor」 を持つことができます。 「constructor」 は 「props」 を引数にとり、内部で「super(props)」 を実行する決まりがあります。
「super(props)」 により 「extends」 した元のクラスの性質を受け継ぎつつ、「props」 も受け取ることができる仕掛けです。

Class型コンポーネントは「state」を持つことができます。そして「state」は「constructor」の中で宣言します。

そして、もう一つのポイントとして必ず 「render」 メソッドを定義する決まりになっています。このメソッドが、コンポーネントが呼び出された際に「render」する内容となります。

カウントするアプリのコンポーネントの例
＊詳細なサンプルはGitHubのclassブランチを参考にしてください。

import React from 'react';
import ReactDOM from 'react-dom';

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

  render(){
    return(
      <div>
        <h1>カウンター</h1>
        <div className="wrap">
        <div className="num">{this.state.number}</div>
        <div className="button-area">
          <button className="plus" onClick={this.onPlusClick}>+</button>
          <button className="minus" onClick={this.onMinusClick}>-</button>
          <button className="reset" onClick={this.onResetClick}>reset</button>
        </div>
        </div>
      </div>
      );
  }
  onPlusClick = () =>{
    this.setState({number:this.state.number + 1})
  }
  onMinusClick = () =>{
    this.setState({number:this.state.number - 1})
  }
  onResetClick = () =>{
    this.setState({number:0})
  }
}

ReactDOM.render(<Count />, document.getElementById("root"));

Stateを持った Component

関数型のコンポーネントは、「動的に変化」するものではありません。つまり、一旦コードを書いて実行したら、その内容は同じ状態になります。これはReactを使う恩恵があまりありません。せいぜいpropsを使う事でコンポーネントの使い回しができる事くらいの事でしょう。

Reactの恩恵が現れるのは、表示する内容やスタイルが「動的に変化するもの」Webアプリを作成する場合ではないでしょうか。
例えばニュースやリアルタイム情報を表示するアプリケーションなどです。それは刻々と変化する情報を受け取って、それに反応して表示する情報を更新する仕組みを「state」を使って実現することができます。
この「state」を使ったコンポーネントを作成したい場合はClass型のコンポーネントを作成することになります。

stateとは

stateとはコンポーネントに状態や値を持たせたい場合に使用するものです。
上のサンプルの例では、「this.state = {number: 0};」とすることで「number:0」というオブジェクトを保持しておいて、クリックイベントが起こると数値を加算する仕組みを作っています。
通常アプリを作成する場合、「state」は必須の機能となることでしょう。

記述方法としては、Classのconstructor関数の中で「state」というプロパティ(インスタンス変数)に何らかの値を持たせて使います。
state活用のポイントして、「state」の値を変更する場合はsetter関数の「this.setState()」メソッドで行います。
さらに、render()内で「this.setState()」を使うことはできません。

1. React入門（1）環境設定
2. React入門（2）render関数の使い方〜Hello worldの作成
3. React入門（3）関数型コンポーネントの作成
4. React入門（4）classコンポーネントの作成