React －－すべてがコンポーネントになる

一、React コンポーネントとは何ですか？#

コンポーネントは、概念的には JavaScript の関数に似ており、任意の引数（props）を受け取り、React 要素に適用されるページの表示コンテンツを返します。

コンポーネントを使用すると、UI を独立して再利用可能なコード片に分割し、各片を個別に考えることができます。

1. コンポーネントの作成#

// 関数コンポーネント
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// クラスコンポーネント
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2. コンポーネントのレンダリング#

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

3. コンポーネント#

React の基本原則は次の 3 つです：

React のインターフェースは完全にデータによって駆動されます。
React ではすべてがコンポーネントです。
props は React コンポーネント間の基本的な通信手段です。

コンポーネントにパラメーターを入力し、最終的に React 要素を返します。React 要素は、ページに表示されるコンテンツであり、DOM ノードのようなものです。

React の大きな核心は、すべてがコンポーネントであることです。

ユーザーインターフェースはコンポーネントです。
コンポーネントは、複雑な機能を実装するためにネストしてパッケージ化することができます。
コンポーネントは副作用を実現するために使用できます。

複雑なインターフェースは、多くの単純なコンポーネントに分割することができます。そして、各単純なコンポーネントはさらに多くの小さなコンポーネントに分割することができます。

クラスとオブジェクトの概念に似ているものもあります。

二、コンポーネントの分類#

ステートレスコンポーネント： ステートレスコンポーネント（Stateless Component）は、最も基本的なコンポーネント形式であり、状態の影響を受けないため、純粋に静的な表示の役割を果たします。基本的な構造は、プロパティ（props）に加えてレンダリング関数（render）です。状態の更新に関与しないため、この種のコンポーネントは再利用性が最も高いです。例えば、ボタン、入力フィールド、アイコンなど、さまざまな UI ライブラリで開発されたものです。
ステートフルコンポーネント： コンポーネント内部に状態（state）を含み、イベントや外部メッセージによって状態が変化する場合、それはステートフルコンポーネント（Stateful Component）を構成します。ステートフルコンポーネントには通常、ライフサイクル（lifecycle）が付属しており、さまざまな時点で状態の更新をトリガーします。ビジネスロジックを記述する際によく使用され、異なるシナリオでは使用する状態とライフサイクルも異なります。
コンテナコンポーネント： コンポーネントの責任をより単一にするために、耦合度をさらに低くするために、コンテナコンポーネント（Container Component）の概念が導入されました。データの取得および処理のロジックに重点を置いています。後述するデザインパターンでも触れます。
ハイオーダーコンポーネント： "ハイオーダーコンポーネント（HoC）" も一種のコンポーネントデザインパターンです。ハイオーダーコンポーネントとして、既存のコンポーネントに新しい機能や動作を追加することができます。ログの出力、データの取得、データの検証など、表示に関係のないロジックが必要な場合、ハイオーダーコンポーネントを抽象化して、基本コンポーネントにこれらの機能を追加し、共通のコードを減らすことができます。
レンダーコールバックコンポーネント： コンポーネントパターンは、コンポーネント内でレンダーコールバックを使用して、レンダリングロジックを子コンポーネントに委任する方法です。再利用可能なコンポーネントロジックの一種であり、レンダープロップスパターンとも呼ばれます。

三、設計原則#

React のコンポーネントは、実際にはソフトウェア設計のモジュールです。その設計原則も一般的なコンポーネント設計の原則に従う必要があります。要するに、コンポーネント間の結合を減らし、コンポーネントをシンプルにする必要があります。これにより、システム全体が理解しやすく、メンテナンスしやすくなります。

つまり、設計原則は次のとおりです：

インターフェースを小さくし、プロップスの数を少なくする。
コンポーネントを分割し、組み合わせ（composition）を最大限に活用する。
ステートを上位のコンポーネントに抽出し、下位のコンポーネントは純粋な関数として実装する。

まるでブロックを組み立てるように、複雑なアプリケーションやコンポーネントは、単純なインターフェースとコンポーネントで構成されています。コンポーネントの分割には絶対的な方法はありません。現在のシナリオに適した方法を選択し、組み合わせを最大限に活用してください。実際のコードの記述も段階的に改善されるプロセスです。以下を目指してください：

機能が正常であること。
コードが整理されていること。
パフォーマンスが高いこと。