クラスコンポーネントと機能コンポーネントの違いは何ですか?

クラスコンポーネントと関数コンポーネントは、React でコンポーネントを実装する 2 つの異なる方法です。

クラスコンポーネントとは、クラス形式で定義されたコンポーネントです。これは React.Component を継承し、コンポーネントがレンダリングする必要があるコンテンツを返す render() メソッドを含む必要があります。クラスコンポーネントには、コンポーネントのライフサイクル中に特定の操作を実行できる独自の状態メソッドとライフサイクルメソッドがあります。

例：

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

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}

機能コンポーネントは、機能形式で定義されたコンポーネントです。これは純粋な関数であり、それ自体の状態を持たず、パラメータとして props のみを受け取り、レンダリングする必要があるコンテンツを返します。機能コンポーネントは一般に、クラスコンポーネントよりも簡潔で理解しやすく、入力プロパティに基づいてコンテンツをレンダリングする必要があるだけのシナリオに適しています。

例：

function FunctionalComponent(props) {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

違い：

構文と実装は異なります。クラスコンポーネントは class キーワードを使用して定義され、機能コンポーネントは関数を使用して定義されます。
状態管理メソッドは異なります。クラスコンポーネントは this.setState() を使用して状態を管理し、機能コンポーネントは useState() フック関数を使用して状態を管理します。
さまざまなライフサイクル: クラスコンポーネントには、componentDidMount、componentDidUpdate、componentWillUnmount などのライフサイクルメソッドがあります。機能コンポーネントにはライフサイクルメソッドがありませんが、useEffect フック関数を使用して同様の機能を実現できます。
パフォーマンスの違い: クラスコンポーネントにはインスタンス化と状態維持の追加のオーバーヘッドがあるため、特に頻繁な更新が必要な場合は、一般に機能コンポーネントのパフォーマンスがクラスコンポーネントよりも優れています。
コードの再利用と合成は異なります。機能コンポーネントは純粋な関数であるため、合成や高次のコンポーネントを通じてコードを再利用する方が簡単です。

React Hooks の導入により、機能コンポーネントにも状態メソッドとライフサイクルメソッドを含めることができるようになり、開発者がクラスコンポーネントと機能コンポーネントの使用をより柔軟に選択できるようになったことに注意してください。

クラスコンポーネントと機能コンポーネントの違いは何ですか?

おすすめ