「React」のコンポーネント(エレメント)

「React」のコンポーネント(エレメント)

■Reactコンポーネント

コンポーネントとは「UIを独立した再利用可能な部分に分割したもの」と捉えることができます。分割することで各部分について個別に考えることができます。

Reactアプリケーションでは、「ボタン」「フォーム」「ダイアログ」「画面」などのすべての項目について、コンポーネントとして表現されます。

概念的には、コンポーネントは「JavaScript関数のようなもの」で、任意の入力を受け入れ、何が画面に表示されるべきかを記述するReactエレメントを返します。

コンポーネントは、出力において他のコンポーネントを参照できます。これにより、どのレベルであっても同じコンポーネント抽象化を使用できます。

■Reactエレメント

「エレメント」とは「コンポーネントをインスタンス化したもの」を表し、Reactアプリケーションの最小ビルディングブロックとなります。

■ステートレスコンポーネント指向

Reactでは、コンポーネントを組み合わせてUIを構築していきます。

Reactには「コンポーネントを極力ステートレス(状態不保持)にすることで、コンポーネントを管理しやすくする」「ステート(状態)を保持するコンポーネントを最小限にして、ステートレスコンポーネントを組み上げていく」という特徴があります。

各コンポーネントは親コンポーネントからデータを渡され、それを元にViewを構築します。コンポーネント自身はステート(状態)を持たずに、入力されたデータによって一意な表示を出力します。

このステートレスコンポーネント指向により、「高メンテナンス性」「高い再利用性」を持つコンポーネント群を構築できます。

■ステートフルコンポーネント

Reactは、ステートフルコンポーネントの構築も可能です。

状態管理ロジックをJavaScriptで記述して、独自の状態を管理するカプセル化されたコンポーネントを構築することで、複雑なUI群の状態管理を行えます。