propsとstateは反応のすべてと言っても過言ではない殷国宝の言葉が急に浮かび上がった.stateが変わったらマウントされますが、マウントされたら必ずstateを確認し、
だから、PropsとStateの概念を改めて捉えたい.

コンポーネントとは

コンポーネントは、コンピュータソフトウェアにおいて汎用性のために開発されたソフトウェアコンポーネントである.
反応器では素子はclass型とfunction型に分けられる.概念的に、コンポーネントはJavaScript関数に似ています.「props」の任意の入力を受信すると、画面に表示されるコンテンツを記述するreact要素が返されます.
構成部品の再利用性と汎用性を向上させるには、関心のある問題に応じて、1つのアクティビティのみを行うことをお勧めします.(オブジェクト向け:単一責任原則)応答素子は、簡単にはpropsを受信してDOMレンダリングを行うJSXを返す関数である.同じ道具を手に入れた場合,同じJSXリターンは純関数で実現しなければならない.

//class형

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

//function 형

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

コンポーネントレンダリング

function User(props){
  return <h1> Welcome ! {props.user} </h1> 
}
const element= <User user="eunsu" />
const rootElement = document.getElementById("root");
ReactDOM.render(

   element
,
  rootElement
);

<User user="eunsu" />エージェント文書.render()呼び出し

propsコールを使用した転送ユーザ機能

ユーザ関数としての戻り値<h1>Welcome! eunsu</h1>戻り

React.DOMインデックスがロードされます.htmlに出力

コンポーネントの合成

合成とは?
複数の異なるオブジェクトを貼り付けることで、新しい機能またはオブジェクトを構成します.
通常、合成するクラスを変数に割り当てた後に使用される構造.
このように合成すると,継承とは異なり,クラス間で有機的に互いのクラスを合成することができる.
反応の中で継承と合成は何を選ぶべきですか?

子が必要な場所で親が使用可能であれば継承として作成

クラスが他のクラスのサービスのみを利用する場合、合成作成

新設計のクラスが既存のクラスと類似している場合は継承製作

出典:https://blog.sonim1.com/186[Kendrick's Blog]

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

場合によっては、どのサブエレメントが入るか予測できない場合があります.そうなると道具childrenを使用してchildrenの内容を処理できます.

function Children1() {
    return (
      <div className="children1">
        <div>2</div>
      </div>
    );
  }
  function Children2() {
    return (
      <div>
        <div>3</div>
      </div>
    );
  }
  function Children3() {
    return (
      <div>
        <div>4</div>
      </div>
    );
  }
function Parents(children){
	return(
    <div>
      <div>1</div>
      {children}
      <div>5</div>
     </div>
    )
}
exports default function App(){
	return(
    	<Parents>
      		<p>3</p>
      	<Parents>
    )
}

これを理解するのに時間がかかったようですが、ハハハ、でも理解しました.コンポーネントにJSXまたはcomponentが含まれているかどうか分からない場合があります.うん.明示的に定義を展開する場合、構成部品は{children}として定義され、JSXまたは構成部品を作成できます.
だから.
コンポーネントを参照して何かを処理しようとすると、それを使用することができます.
もう一つ例を挙げる.

*Box.jsx
import BoxItems from "./BoxItems";
export default function Box() {
  const user = [
    {
      name: "Judy",
      age: 15,
      gender: "female"
    },
    {
      name: "Holy",
      age: 23,
      gender: "male"
    }
  ];
  return (
    <>
      <BoxItems>
        {user.map((item) => (
          <>
            <p>Name: {item.name} </p>
            <p> Age: {item.age} </p>
          </>
        ))}
      </BoxItems>
    </>
  );
}

*BoxItems.jsx
const BoxItems= ({children}) => {
  return (
    <div>
      <h1>Welcome to World!</h1>
      {children}
    </div>
  )
}
export default BoxItems;

サブアセンブリBoxItems.jsxで処理するトランザクションを親コンポーネントBoxとします.jsxで処理すればいいです.しかし、これは継承ではなく、合成です.
これはpropsを渡すのではなく、親コンポーネントが処理するからです.(これは私の考えです…)わかってくれて嬉しいわ
ランデリンはどうやって起きるの?
Relanderingは!stateが変化するとpropsに渡されたときに発生します.私が作成したコードはstateを使用してデータをロードしていないので、再ロードは行われません.他のコードでは、stateをpropsに渡さない限り、再ロードは発生しません.これは合成と呼ばれ、継承されません.