【React】Class Component と Functional Component - iOSエンジニアのつぶやき

React勉強中なので、簡単にClass ComponentとFunctional Componentの違いをメモしておきます👷‍♀️

Class Component

Class ComponentはStateやライフサイクルを持つことができます。実装クラスはReact.Componentを継承する必要があります。

class Summary extends React.Component {
}

ライフサイクルメソッドを使って、コンポーネントの再レンダリングをするかどうかをハンドリングしたい場合は、shouldComponentUpdateというメソッドをクラスに実装します。詳しい他のライフサイクルメソッドについては、下記の記事がわかりやすかったので、載せておきます。

qiita.com

Functional Component

Functional Componentはその名の通り関数なので、Class Componentとは異なりStateやライフサイクルを持ちません。ただ、その分コンポーネントの記述を簡潔にすることができます。

const Hoge: React.FC<Props> = props => {
}

今までは、Functional Componentよりも高機能なClass Componentを使うことが主流だったようですが、React Hooksが導入されたことにより、Functional Componentでもクラスと同じようにState（状態）が持てるようになり、現在はFunctional Componentが主流になっているそうです。

ja.reactjs.org

React Hooksは、Functional Componentに対して、状態を保存するための変数領域を提供することで状態を保つことを実現しているようです。公式ドキュメントに載っているコードをお借りして、見てみます。const [count, setCount] = useState(0); で定義しているcountは値(State)を、setCountは値を更新するための関数をそれぞれ定義しています。ちなみにサンプルコードではuseStateを使って初期値を0に設定しています。という感じでReact Hooksは、Functional ComponentでシンプルにStateの読み書きをできるようにしたもののようですね👀

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

てな感じで本日も以上となります🍺

参考

その他の記事

yamato8010.hatenablog.com