【React】関数コンポーネントとクラスコンポーネント

JavaScript
2022.01.16

Reactはコンポーネントベースである

Reactを使って開発を行う際には、コンポーネントベースで設計や開発を行います。

コンポーネントというパーツを複数構築して、それを組み合わせることで1つのプロダクトを構築するのが基本です。

コンポーネントベースであることにより、以下のようなメリットを得ることができます。

  • バグや不具合の原因の究明がしやすい
  • ソースコードがシンプルでみやすい
  • コンポーネントの再利用が可能である
  • 入出力で問題なければ、他のコンポーネントに置換することができる

プログラミングの世界には「困難は分割せよ」という言葉がありますが、プロダクトをコンポーネントという単位に分割することで様々なメリットを得ているわけですね。

Reactでは、クラスコンポーネントと関数コンポーネントという2つのコンポーネントの構築方法があり、それぞれ書き方や特徴が異なります。

クラスコンポーネント

まずはクラスコンポーネントから見ていきましょう。

クラスコンポーネントは、React.Componentをextendsで拡張して構築していきます。

クラスコンポーネントの基本的な構文を見てみましょう。

import React from 'react';

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

  render(){
    return <div>I'm {this.props.name}</div>;
  }
}

クラスコンポーネントの特徴として、以下が挙げられます。

  • React.Componentをextends（継承）する
  • constructorでpropsを受け取る
  • render()メソッド内でJSXをreturnする
  • ライフサイクルやstateを持つ

クラスコンポーネントでは、React.Componentをextendsしたクラスのrender()メソッドでJSXをreturnすることで、コンポーネントを構築していきます。

関数コンポーネント

関数コンポーネントでは、クラスコンポーネントとは異なり関数の形でコードを記述しコンポーネントを構築していきます。

関数コンポーネントの基本的な構文を見てみましょう。

import React from 'react';

const App = (props) => {
  return <div>I'm {props.name}</div>;
}

関数コンポーネントの特徴として、以下が挙げられます。

  • 関数内でJSXをreturnする
  • 引数でpropsを受け取る
  • ライフサイクルやstateを持たない

しかし、2019年にReactが関数コンポーネントの新たな昨日としてReact Hooksをリリースしたことにより、関数コンポーネントでもクラスコンポーネントと同じ機能を実装できるようになりました。

文字通り関数のようにコンポーネントを作成することができるため、HTMLやJavaScriptが扱える人にとっては理解しやすいものとなっています。

React Hooks

React Hooks は2019年の React16.8 から新たに導入され、以前にはクラスコンポーネントにしかなかった State やライフサイクルなどの機能を関数コンポーネントでも扱えるようにしたものです。

React Hooks が導入されるまではクラスコンポーネントが主流でしたが、React Hooks のおかげで関数コンポーネントの勢いが上がってきているのが現状です。

React Hooksには、以下の特徴があります。

  • ただの関数である
  • 実行が容易である
  • クラスコンポーネントで同様の実装をするより軽い
  • 自作でカスタムHooksの作成が可能

代表的な React Hooks の代表的なものに useState（JSX内の変数を宣言する）や useEffect（サイトのライフルサイクル毎の動きを規定する）、 useRef（JSX内を参照できる）などがあります。

State

State とは React のための変数で、コンポーネント内で宣言され、そのコンポーネントのJSXの中で変数として機能します。

逆に、コンポーネントの外で宣言される変数は、通常のJavaScriptの変数としては利用可能ですが、JSX内では変数として機能しません。

ライフサイクル

Reactのコンポーネントには、ライフサイクルと呼ばれる時間の流れがあります。

このライフサイクルでは3つの状態（Mounting、Updating、Unmouting）を遷移します。

  • Mounting（配置する期間）
  • Updating（変更する期間）
  • Unmouting（破棄する期間）

それぞれの期間で必要な処理を行いたい場合には、その期間に応じたライフサイクルメソッドが必要になります。

現在の主流は関数コンポーネント

基本的に関数コンポーネントを使用した方が良いでしょう。

React Hooksの登場により、関数コンポーネントでもライフサイクルやstateが使用できるようになり、クラスコンポーネントと同じような機能を関数コンポーネントでも利用することが可能です。

また、関数コンポートはクラスコンポーネントに比べてコードを簡潔に書けるため、見通しの良いコードが書けます。

以上の理由より、現在では関数コンポーネントの方が広く使用されています。

コメント

タイトルとURLをコピーしました