React.js では関数がクラスよりも優れている理由

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「React.js では関数がクラスよりも優れている理由」についてお伝えしていきます。

React.js の関数とクラス

クラス

React のクラスは、「クラスコンポーネント」と呼ばれることがよくあります。

これらは、コンポーネントを定義し、その状態とライフサイクルを管理するために使用されてきました。

クラスコンポーネントは React.Component クラスを拡張するため、より多くの定型コードが必要になります。

関数

一方、関数コンポーネントは、React コンポーネントを定義するためのより簡潔で現代的な方法です。

関数コンポーネントは基本的に、JSX 要素を返す JavaScript 関数です。

関数を使用するメリット

シンプルさと読みやすさ

関数コンポーネントを好む主な理由の 1 つは、シンプルさです。

関数コンポーネントは、クラスコンポーネントに比べて簡潔で読みやすいです。

クラスコンポーネント:

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

関数コンポーネント:

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

関数コンポーネントは必要なコード行が減り、読みやすくなり、エラーが発生しにくくなります。

パフォーマンスの向上

関数コンポーネントは、クラスコンポーネントよりも良いパフォーマンスを提供します。

この改善は、関数コンポーネントが状態と副作用を効率的に管理できるようにする React Hooks の導入によるものです。

useState や useEffect などのフックにより、状態管理とライフサイクル操作が簡素化されます。

再利用性

関数コンポーネントにより再利用性が向上します。

より小さな再利用可能なコンポーネントに抽出するのが簡単で、コードベースがよりモジュール化され、保守しやすくなります。

この再利用性は、スケーラブルなアプリケーションを構築するために不可欠です。

フックと状態管理

フックを使用すると、クラスベースのコンポーネントを必要とせずに、コンポーネントの状態とライフサイクルイベントを管理できます。

これにより、定型コードが削減されるだけでなく、コードの明瞭さも向上します。

例と使用例

例: カウンタコンポーネントの作成

クラスコンポーネントと関数コンポーネントの違いを示すために、単純なカウンタコンポーネントを作成してみましょう。

クラスコンポーネント:

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

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

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

フックを使用した関数コンポーネント:

import React, { useState } from 'react';

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

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

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