React入門(4)classコンポーネントの作成

JavaScript

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"));

Class型コンポーネントの記述ポイント

  • 「class」 宣言から始まり、class名の先頭文字は大文字
  • 「extends React.Component」で、継承する必要がある
  • 「constructor」 の内部で「super(props)」 を記述
  • 「state」は「constructor」の中で宣言
  • 「render」 メソッドを定義する
スポンサーリンク

Stateを持った Component

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

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

stateとは

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

stateのすごいところは、まずはstateを勝手に変えられない事。
もし、変更する場合には、setState()を使う。
ReactのsetState()は単なるセッター関数と違うよ!
setState()を使うと必ずコンポーネントの更新が行われて、そのコンポーネントだけ再レンダリングしてくれる。
ここが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コンポーネントの作成
タイトルとURLをコピーしました