[react]#10合成vs継承

Reactは強力な合成モデルを有し,素子間での再利用コードを継承するのではなく合成を用いることができる.

props

構成部品の階層化
:最大の特徴は、1つの要素が別の要素を含み、要素間で親子関係を形成できることです.

props(properties)
- system for passing data from a parent component to a child component
-親構成部品から子構成部品に渡されるデータ<Child name="joon">-複数のpropsで複数のデータを転送可能<Child name="joon" age=30 position="mentor">

//props는 객체 형태의 데이터
	props = {
      	  name: "joon",
    	  age: 30,
      	  position: "mentor"
    	}

最終的に、親コンポーネントがどのようにサブコンポーネント(UI)を生成するか、どのように動作するか、およびどのようにユーザーと対話するかは、ツールによって決定される.「ユーザーにカスタマイズされたコンテンツと一部のコンテンツを提示したり、ユーザーのインタラクションに応答したりすることを目的としています.」
「親要素で子要素のビューまたは機能をカスタマイズする」

React props system
1)親構成部品から子構成部品に情報を渡す
2)サブアセンブリによって伝達する情報を使用/反映する

.

構成部品に他の構成部品を含める

要素がどのサブアイテムを導入するかを事前に予測できない場合は、children propを使用してサブアイテムを出力に渡すことを推奨します.このようにして、他の要素にJSXをネストすることによって任意のサブアイテムを伝達することができる.
これは一般的ではありませんが、構成部品には複数の「空席」が必要になる場合があります.この場合、childrenではなく独自の方法を採用することができます.以下に示す第2の例に示すように、構成部品(オブジェクト)をpropsに渡すことによってレイアウトを整理することもできる.
👉🏻 エッジコンポーネントのprops。キッズアクティビティの追加
👉🏻 propsで左右の領域を区切る

コンポジット

構成部品の「特別な状況」を考慮する必要がある場合は、合成により、より「具体的な」構成部品が「一般的な」構成部品として表示され、propsによって内容が整理されます.次の例では、最も一般的なWelcomeDialog→Dialog→FancyBoorderの降順でデータをレンダリングします.
構成部品のシェイプとモーションをカスタマイズすると、元のタイプの値、反応セグメント、関数などの任意のアイテムが得られます.したがって、UI(すなわちビュー)のみを変更する場合は、props合成によって制御できます.複数のコンポーネントでUI以外の機能を再利用する場合は、個別のJavaScriptモジュールに分離することをお勧めします.分離されたモジュールは、コンポーネントから関数、オブジェクト、クラスをインポートすることによって使用できます.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

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

オブジェクトとしてのjsx構文の理解
JavaScript継承コンセプト