More than 1 year has passed since last update.

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

Posted at 2022-01-06

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

コンポーネントとは、UIの一部となる見た目（View）と機能（Controller）を合わせたものです。
コンポーネントを組み合わせることで一つのページを作ります。

コンポーネント単位とすることで以下の利点があります。

　　
このコンポーネントの定義の仕方には以下の2種類があります。

クラスコンポーネントは以下のように記述します。

.js

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

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

クラスコンポーネントは、以下のような特徴があります。

最後の「ライフサイクルやstateを持つ」については、現在はHooksが登場し、後述する関数コンポーネントに記述することができるようになったため、現在はあまりクラスコンポーネントを使わないようです。

関数コンポーネントは以下のように記述します。

.js

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

関数コンポーネントには、以下のような特徴があります。

前述の通り、ライフサイクルやstateについては、Hooksの登場により、関数コンポーネントも持てるようになりました。
そのため、現在では、こちらの関数コンポーネントがメインで使われているようです。