【Learning Diary44】クラスコンポーネントと関数コンポーネントのちがい

Reactコンポーネントには、クラスコンポーネントと関数コンポーネントという2つの主要な種類があります。

これらのコンポーネントは、コンポーネントの定義やライフサイクルメソッド、状態管理のアプローチなどにおいて異なる特徴を持っています。

クラスコンポーネント

クラスベース: クラス構文を使用してコンポーネントを定義します。

ライフサイクルメソッド: componentDidMount、componentDidUpdate、componentWillUnmount など、ライフサイクルメソッドを使用できます。

状態管理: this.stateおよびthis.setStateメソッドを使用して状態を管理します。

クラスメンバ: コンポーネントのメソッドはクラスのメンバであるため、thisキーワードを使用してアクセスします。

import React, { Component } from 'react';

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

  componentDidMount() {
    // コンポーネントがマウントされた後の処理
  }

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

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

関数コンポーネント

関数ベース: 関数構文を使用してコンポーネントを定義します。

フック: useState、useEffectなどのフックを使用して、ライフサイクルや状態管理などの機能を実現します。

状態管理: useStateフックを使用して状態を管理します。

クラスメンバではない: コンポーネントの関数はクラスメンバではないため、thisキーワードを使用せずにアクセスします。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // コンポーネントがマウントされた後の処理
  }, []);

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

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

近年のReactでは、関数コンポーネントが強力であり、フックの導入によりクラスコンポーネントに似た機能を関数コンポーネントで利用できるようになっています。

関数コンポーネントが推奨されており、新しいコンポーネントの作成には関数コンポーネントとフックを使用することが一般的になっています。