Reactのコンポーネント
Reactを使ってウェブページを作る際、画面上の各部分（例えばボタンやテキストボックスなど）は「コンポーネント」という部品で表現されます。このコンポーネントを組み合わせて、複雑なページやアプリケーションを構築します。
1. クラスコンポーネント
特徴:
- クラスベース: JavaScriptのクラスを使って定義されます。
- ライフサイクルメソッド: 特定の時点で実行されるメソッドがあります。例えば、コンポーネントが画面に初めて表示されるときや、データが変わったときなどの動作を定義できます。
- 状態管理: this.stateで状態（データ）を持ち、this.setStateで状態を更新できます。
例:
class WelcomeClass extends React.Component {
// コンストラクタ: コンポーネントが作成されるときに一度だけ実行される
constructor(props) {
super(props);
this.state = { name: 'React' };
}
// レンダリング: どのように画面に表示されるかを定義
render() {
return <h1>Hello, {this.state.name}</h1>;
}
}
2. 関数コンポーネント
特徴:
- 関数ベース: 通常の関数や矢印関数で定義されます。
- Hooksの利用: 状態を持ったり、ライフサイクルのような動作を制御するための特別な関数（Hooks）が使えます。例: useState, useEffect
例:
import { useState } from 'react';
function WelcomeFunction() {
// useState Hook: コンポーネントの状態を管理する
const [name, setName] = useState('React');
return <h1>Hello, {name}</h1>;
}
まとめ:
- クラスコンポーネント: JavaScriptのクラスの特性を活かして、状態やライフサイクルを持つコンポーネントを作成する方法。
- 関数コンポーネント: よりシンプルで柔軟な方法でコンポーネントを作成。最近のReactでは、Hooksを使ってクラスコンポーネントと同じようなことを関数コンポーネントで実現できるようになりました。
関数コンポーネントは、その簡潔さとHooksの導入による強化のため、現在のReact開発の主流となっています。しかし、多くの既存のプロジェクトやライブラリではクラスコンポーネントが使用されているので、両方を理解することは重要です。