Reactコンポーネント作成をもっと便利に！HOC、Render Props、Custom Hooks

ES6クラスベースコンポーネントと関数型ES6 Reactコンポーネントの使い分け

ES6クラスベースコンポーネント

従来のReactコンポーネントの書き方です。クラスベースコンポーネントは以下のような特徴があります。

• 状態管理: this.state を使ってコンポーネントの状態を管理できます。
• ライフサイクルメソッド: componentDidMount や componentWillUnmount などのライフサイクルメソッドを使って、コンポーネントの挙動を制御できます。
• 複雑なロジック: 状態管理やライフサイクルメソッドなど、複雑なロジックを扱うコンポーネントに適しています。

関数型ES6 Reactコンポーネント

ES6で導入された新しいコンポーネントの書き方です。関数型コンポーネントは以下のような特徴があります。

• シンプル: クラスベースコンポーネントよりもシンプルで分かりやすいコードになります。
• 軽量: クラスベースコンポーネントよりも軽量でパフォーマンスが向上します。
• 再利用性: 状態やライフサイクルメソッドを持たないため、再利用しやすいコードになります。

使い分け

どちらのコンポーネントを使うべきかは、コンポーネントの複雑さや役割によって異なります。

• 複雑なロジックや状態管理が必要なコンポーネント: クラスベースコンポーネント
• シンプルなコンポーネント: 関数型コンポーネント

以下は、それぞれのコンポーネントが適している具体的な例です。

クラスベースコンポーネント

• ログインフォーム
• コメント欄
• 商品詳細ページ

関数型コンポーネント

• ボタン
• カード
• リスト

近年は、React公式ドキュメントでも関数型コンポーネントの使用が推奨されています。これは、関数型コンポーネントの方がシンプルで軽量であり、パフォーマンスが向上するためです。

• 上記はあくまで一般的なガイドラインであり、状況によって例外もあります。
• どちらのコンポーネントを使うべきか迷った場合は、関数型コンポーネントを試してみることをおすすめします。
• 関数型コンポーネントを使いこなすためには、React Hooks の理解が必要になります。

• 上記以外にも、コンポーネントの使い分けに関する情報は、React公式ドキュメントやチュートリアルなどで確認できます。
• 実際にコードを書いて試してみることで、それぞれのコンポーネントの特徴や使い勝手を理解することができます。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log('MyComponent がマウントされました');
  }

  componentWillUnmount() {
    console.log('MyComponent がアンマウントされました');
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <h1>カウント: {count}</h1>
        <button onClick={() => this.setState({ count: count + 1 })}>
          カウントを増やす
        </button>
      </div>
    );
  }
}

export default MyComponent;

import React from 'react';

const MyComponent = ({ count, onCountUp }) => {
  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={onCountUp}>カウントを増やす</button>
    </div>
  );
};

export default MyComponent;

解説

• クラスベースコンポーネントでは、this.state を使って状態を管理しています。
• 関数型コンポーネントでは、useState Hook を使って状態を管理しています。
• クラスベースコンポーネントでは、componentDidMount や componentWillUnmount などのライフサイクルメソッドを使っています。
• 関数型コンポーネントでは、useEffect Hook を使ってライフサイクルイベントを処理しています。
• どちらのコンポーネントでも、ボタンをクリックするとカウントが1増えます。

他の方法

Higher-Order Components (HOC)

HOCは、コンポーネントに再利用可能な機能を追加するためのパターンです。HOCを使うことで、コンポーネントのコードを重複させずに、共通の機能を追加することができます。

Render Props

Render Propsは、コンポーネント間のデータやロジックを渡すためのパターンです。Render Propsを使うことで、コンポーネントをより小さく、再利用しやすいコードにすることができます。

Custom Hooks

Custom Hooksは、状態管理やライフサイクルイベント処理などのロジックをカプセル化する関数です。Custom Hooksを使うことで、コンポーネントのコードをよりシンプルで分かりやすくすることができます。

これらの方法は、より複雑なコンポーネントを作成する場合に役立ちます。

Reactコンポーネントを作成するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあり、状況によって使い分けることが重要です。

• シンプルなコンポーネントには、関数型コンポーネントがおすすめです。
• 複雑なコンポーネントには、クラスベースコンポーネントやHOC、Render Props、Custom Hooksなどの方法が役立ちます。