Reactにおけるコンポーネントの種類

Reactにおけるコンポーネントの種類は、大きく分けて「関数コンポーネント」と「クラスコンポーネント」の2種類があります。

関数コンポーネントは、JavaScriptの関数として定義されるコンポーネントです。render()メソッド内にJSXを記述して、コンポーネントの出力を生成します。

JavaScript

function MyComponent() {
  return (
    <div>
      Hello, world!
    </div>
  );
}

クラスコンポーネントは、JavaScriptのクラスとして定義されるコンポーネントです。render()メソッド内にJSXを記述して、コンポーネントの出力を生成します。また、stateと呼ばれる内部状態を保持することもできます。

JavaScript

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        Hello, world!
        {this.state.name}
      </div>
    );
  }

  constructor(props) {
    super(props);
    this.state = {
      name: "John Doe",
    };
  }
}

関数コンポーネントとクラスコンポーネントの主な違いは、以下の通りです。

機能	関数コンポーネント	クラスコンポーネント
定義方法	JavaScriptの関数として定義	JavaScriptのクラスとして定義
出力生成	render()メソッド内にJSXを記述	render()メソッド内にJSXを記述
内部状態	保持できない	保持できる
ライフサイクルメソッド	持たない	持つ
おすすめの使用例	単純なコンポーネント	複雑なコンポーネント、状態を保持するコンポーネント

Reactの最新バージョンでは、関数コンポーネントが主流となっています。関数コンポーネントは、クラスコンポーネントに比べてシンプルで読みやすく、パフォーマンスも向上しています。