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 の基本原則は三つあります：

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

コンポーネントに引数を入力すると、最終的に React Element を返します。React Element はページ上に表示される内容であり、DOM ノードに相当します。

React の大きなコアは－－万物皆可组件

ユーザーインターフェースはコンポーネントです
コンポーネントはネストして複雑な機能を構成できます
コンポーネントは副作用を実現するために使用できます

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

ある意味でクラスとオブジェクトの概念に似ています

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

** 無状態コンポーネント：** 無状態コンポーネント（Stateless Component）は最も基本的なコンポーネント形式であり、状態の影響がないため、純粋に静的な表示の役割を果たします。基本的な構成は属性（props）とレンダリング関数（render）です。状態の更新が関与しないため、この種のコンポーネントは再利用性が最も高いです。例えば、各 UI ライブラリで開発されたボタン、入力ボックス、アイコンなどです。
** 有状態コンポーネント：** コンポーネント内部に状態（state）が含まれ、状態がイベントや外部のメッセージによって変化する場合、これが有状態コンポーネント（Stateful Component）を構成します。有状態コンポーネントは通常、ライフサイクル（lifecycle）を持ち、異なるタイミングで状態の更新をトリガーします。ビジネスロジックを書く際によく使用され、異なるシーンで使用される状態とライフサイクルも異なります。
** コンテナコンポーネント：** コンポーネントの責任をより単一にし、結合度をさらに低下させるために、コンテナコンポーネント（Container Component）の概念が導入されました。重要な役割はデータの取得と処理のロジックを担当します。以下の設計パターンでも言及されます。
高階コンポーネント：「高階コンポーネント（HoC）」も一種のコンポーネント設計パターンです。高階コンポーネントとして、元のコンポーネントに新しい機能や動作を追加できます。ログを印刷したり、データを取得したり、データを検証したりするなど、表示に関係のないロジックを抽象化して高階コンポーネントを作成し、基本のコンポーネントにこれらの機能を追加して共通のコードを減らします。
** レンダリングコールバックコンポーネント：** コンポーネントモードは、コンポーネント内でレンダリングコールバックの方法を使用し、コンポーネント内のレンダリングロジックをその子コンポーネントに委任します。これはコンポーネントロジックの再利用の一種であり、render props モードとも呼ばれます。

三、設計原則#

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

つまり、設計原則は：

インターフェースは小さく、props の数は少ない；
コンポーネントを分割し、組み合わせ（composition）を十分に活用する；
state を上位コンポーネントに抽出し、下位コンポーネントは純粋な関数として実装するだけで済む。

まるで積み木を組み立てるように、複雑なアプリケーションやコンポーネントは単純なインターフェースとコンポーネントから構成されています。コンポーネントの分割には絶対的な方法はなく、現在のシーンに適した方法で分割し、組み合わせを十分に活用すれば良いのです。実際にコードを書くことも段階的に進化するプロセスであり、次のことを目指して努力します：

機能が正常であること；
コードが整然としていること；
高性能であること。