BETA

【Reactを0から学ぶ】Stateful / Stateless な Component を組み合わせる

投稿日:2018-11-05
最終更新:2018-11-05
※この記事は外部サイト(https://mittsu-blog.com/learn-react-on-0ba...)からのクロス投稿です

React は Facebook 謹製の JavaScript ライブラリです

React で作られたアプリケーションは動作が素早く、小さなモジュールを作ることで保守管理性・再利用性を高められる、とされています。

また、Vue や Angular などと並んで人気が高いライブラリです。

前回は、React Component を利用する上で欠かせない概念である props と state について学びました。

https://mittsu-blog.com/learn-react-on-0base-props-state

今回は、その props と state をうまく組み合わせて React Component をつくる方法について学びます。

Stateful な Component ってなんだ?

Stateful の定義

Stateful とは、そのものズバリ、Stateがないということですが、具体的には React Component が state を持っているとき、そのコンポーネントを指して「Stateful なコンポーネント」という風に使います。

Stateful なコンポーネントの例

実際に stateful なコードを見てみましょう。

import React from 'react';
import ReactDOM from 'react-dom';
import { StatelessChange } from './StatelessChange';
import { StatelessDisplay } from './StatelessDisplay';

class Stateful extends React.Component {
  constructor(props) {
    super(props);

    this.state = { profile: '私は stateful です。' };
    this.changeProfile = this.changeProfile.bind(this);
  }

  changeProfile(newProfile) {
    this.setState({
      profile: newProfile
    });
  }

  render() {
    return (
      <div>
        <StatelessChange onChange={this.changeProfile} />
        <StatelessDisplay name={this.state.profile} />
      </div>
    );
  }
});

ReactDOM.render(
  <Stateful />,
  document.getElementById('app')
);

Stateless な Component ってなんだ?

Stateless の定義

Stateless とは、そのものズバリ、Stateがないということですが、具体的には React Component が state を持っていないとき、そのコンポーネントを指して「Stateless なコンポーネント」という風に使います。

Stateless なコンポーネントの例

実際に stateless なコードを見てみましょう。(ふたつあります。)


import React from 'react';

export class StatelessChange extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const profile = e.target.value;
    this.props.onChange(name);
  }

  render() {
    return (
      <div>
        <select
          id="profiles"
          onChange={this.handleChange}>

          <option value="私はstatelessな国から来ました">私はstatelessな国から来ました</option>
          <option value="寒い">寒い</option>
          <option value="暑い">寒い</option>
        </select>
      </div>
    );
  }
}

ーーーーー

import React from 'react';

export class StatelessDisplay extends React.Component {
  render() {
    return (
      <div>
        <h1>私はどこから来たのでしょうか</h1>
        <p>{this.props.profile}</p>
      </div>
    );
  }
}

使われ方の簡単な解説

基本的な思想

いきなり話が大きくなってしまい恐縮ですが、Ruby や Python やその他の言語で オブジェクト指向言語と呼ばれるようなものがあります。

オブジェクト指向とはなんぞや?ということを語り出すと完全に別記事なのでここでは簡単に私の理解することを一文で表現しますが、要するにお片付けについての指針です。

やみくもにコードを書き続けるとどこにどんな機能のコードを書いたのかわからなくなるので整理したいのですが、片付けるときにこんな風に整理すると後でわかりやすいよ、という指針の一つがオブジェクト指向というものです。

そしてこの Stateful なコンポーネントと Stateless なコンポーネントに分けるというのも片付けの一つの方針だと思っています。

Stateful なコンポーネントでしたいこと

情報をまとめること

Stateful なコンポーネントですから、コンストラクターを書いてその中に state を作って情報をまとめておくことがその役割です。

情報を伝えること

情報をまとめるだけではしょうがないので、ほかのコンポーネント(Stateless なコンポーネント)に情報を props として渡すのも役割です。

情報を加工すること

情報を持っている人が情報を加工できます。ということでこのコンポーネントが setState というメソッドを使って情報を加工して保存します。

Stateless なコンポーネントでしたいこと

情報を表示すること

Stateless なコンポーネントですから、情報を props でもらってそれを表示することは基本的な役割です。

情報を加工してほしいよと伝えること

Stateful なコンポーネントから伝わってくるのは表示する情報とは限りません。メソッドが渡された時にはそれを実行することを Stateful なコンポーネントに伝えることもその役割です。

以上のようなことを達成するために、例のようなコードを書いて React アプリケーションを作ります。

まとめ

stateful なコンポーネントで情報を保持し加工し stateless なコンポーネントに伝達する

stateless なコンポーネントで伝えられた情報を表示したり、加工依頼したりする

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@edihasamの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!