JS=>応答の核心はデータストリームです!

はんのうとくせい

Reactを開発する最大の特徴はページ単位ではありません.
素子単位で始まるのが最大の特徴です.
上の写真を簡単に見ると、
構成部品は、次の3つに分類されます.
「サーチ」(Search)ウィンドウ、「サーチ結果」(Search Results)ウィンドウ、および「カラー関連コンテンツ」(Color Association Content)ウィンドウで表示できます.
これらの機能をこれらの構成部品に追加して、最後のアセンブリとレンダリングを行います.
トップダウン(bottom-up)は、テストが容易で、拡張性が良いなどの利点があります.
また,素子は単一責任の原則として,一つのことのみを実行する.
レスポンスフィーチャーの概要
1.構成部品単位.
2.素子単位で構成されているため、テストが容易で、拡張性が良い.
3.構成部品は1つのことのみを実行します.

データ・ストリームはどうですか?

上の写真にはyoutubeというコンポーネントyoutubeがあります.
異なる機能を持つ検索ウィンドウ、検索結果ウィンドウ、関連検索結果ウィンドウコンポーネント.
リアクター内のデータストリームは、データを伝達する本体の親コンポーネントからサブコンポーネントへのトップダウンである.
データは一方向データストリームでありpropsを介して伝達される.
さらに,コンポーネントはpropsを介して伝達されるデータがどこから来たのか全く知らない.
一方的なデータストリームは反応の核心です!

ステータスはどこですか?

ステータスが1つの構成部品でのみ有効な場合は、構成部品に配置するだけです.これは難しくありませんが、1つのステータスに基づいて2つの構成部品が影響を受ける場合は、共通の構成部品を見つけてその位置に配置する必要があります.
すなわち、2つのサブエレメントが1つの状態に近づくには、2つのサブエレメントの共通の親エレメントに状態を配置する必要があります.
上図から見ると、検索結果コンポーネントと関連検索結果ウィンドウはいずれも検索結果リストに依存するため、ステータスはyoutubeコンポーネントにある必要があります.

逆データ・ストリーム?

反応器は一方向データストリームが核心だと言った.
子部品の動作が親部品の状態を変更した場合、どうすればいいですか?
このとき必要なのは「昇格状態」です.
ステータスを上げる方法は、ステータスを変更する関数をpropsでサブエレメントに渡し、サブエレメントにこの関数を実行させることで解決します.
ステータス昇格サンプルコード

function ParentComponent() {
  const [value, setValue] = useState("내 상태 바꿔줘ㅠ");
<br>
  const handleChangeValue = () => { // 상태변경 함수
    setValue("너의 상태를 바꿔줄게!");
  };
<br>
  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue}  /> // props로 하위컴포넌트에 전달
    </div>
  );
}