【React.js】クラスコンポーネントと関数コンポーネントの書き方について

LiSMO techの小谷です。 

今回はReact.jsの書き方についてです！Reactの書き方は大きく分けて2種類になると思います。その二つについてみていきたいと思います。

Class Componet(クラスコンポーネント)

JavaScriptのClassを使用して作られるコンポーネントです。

ちなみに、htmlにつけるclass=”xxx”とは別物です。ややこしいから名前かえてほしいとか思いますよね。笑

書き方の例としては以下のようになります。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    );
  }
}

簡単に解説をすると次のようになります。

extends

クラスを引き継ぐことで、この場合ではReact.Componentを引き継ぎます。

React.Componentを引き継ぐことで、React的な動きするための関数(state更新の為のsetState関数など)を使えるようになります。

constructor

初期に呼ばれるもので、state・propsの定義やイベントのバインド(this.xxx = this.xxx.bind(this);)などをします。初期の定義が不要であれば省略可です。ちなみに、このthisのバインドの話はReactのClass Componetの嫌なところで少し複雑なので、説明は省略します。

this

このコンポーネントのことです。

state

コンポーネントの状態のことです。

super

継承(extends)元のconstructorを呼びます。

この場合だとReact.Componentのconstructorを呼んでこういうprops受け取りましたので、定義しておきましょうみたいな感じだと思います。その結果、このコンポーネント(this)でthis.propsが使えるようになると思います。

また、Class Componetの特徴としては、componentDidMount(コンポーネントがマウントされた時)などのライフサイクルで関数を発火できることもあります。

Functional Componet(関数コンポーネント)

JavaScriptの関数(Function)を使って定義したコンポーネントです。比較的Class Componetよりシンプルに書くことができると思います。

書き方の例としては以下のようになります。

function Example() {
  const [value, setvalue] = useState('');
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

Class Componetのものと比較すると、stateはどこいったとか思うかもしれませんが、

const [value, setvalue] = useState('');

のvalueがstateになっています。それぞれの値については以下のようなになってます。

const [state名, state更新時の関数] = useState(初期値);

ちなみに、今でてきたuseStateやuseEffectなどをReact hoocks(Reactの割と新しめの機能)と呼ばれています。

使い分け

どちらの書き方もしても共存も出来ますので、正直どっちをどう使ってもよいと思います！！

ですが、Functional Componentが割とよく使われている気もします。

参考程度に個人的な意見を言うと、

部品はFunctional Componentで、ページや親となるものではClass Componentとか共存する使い方でもよいと思ってます。

理由としては、まず、ページでClass Componentを使うとライフサイクルがわかりやすいです。ライフサイクルでコンポーネントがマウント(描画)前などあるので、そこでAPIでデータ取得するなど。

また、stateがコードで書いた時に一覧性があって比較的見やすいのもあるかもしれません。

this.state = {
      value: '',
      count: 0
};

みたいな感じですね。

あとは、部品にFunctional Componentを使うとシンプルに書けます。部品は基本的には使いまわしまくりたいので、シンプルであってほしいという考えにマッチしますので。使いまわしたいものが複雑だったら嫌ですよね。

まとめ

React.jsの書き方について2種類をあげて紹介しました。

どうやって書いていけばよいのか迷った時に参考にしていただければと思います。