Today Learn

React Props/state復習

応答データストリーム(一方向ストリーム)

について

回復状態向上

Side EffectおよびSide Effectの場合は、ReactでHookを使用して

を学習します.

バイナリツリーアルゴリズム解答(進行中...)

レスポンスデータストリーム

Reactのデータストリームは、上から下への一方向のデータストリームである.
->データを渡すボディは親コンポーネントで、サブコンポーネントはデータを受信して使用します.(propsにより属性のようにデータを受信できる)

一方向データストリームはReactの代表的な記述の1つであり、propsを介して情報を伝達するコンポーネントは、データをどこから受信するか分からない.

はんのうじょうたい

じょうたいぶんかつじょうけん
以下の条件を満たす場合はstateではありません.

は道具を通じて伝わりますか?確かにstateじゃない

時間過ぎても変わらないのでしょうか?確かにstateじゃない

素子内の他の状態や支柱で計算できますか?もしそうならstateではありません.

昇格ステータス

親要素の「状態を変更する関数」自体がpropsとしてサブ要素に渡され、その関数はサブ要素によって実行される.(コールバック関数と同様)

ステータス位置を指定すると、親構成部品のステータスも子構成部品によって変更されます.
下図を参照

上の図に示すように、ツイッターリスト全体がTwitterというコンポーネントによって管理されています.
新しく作成されたTwitterでは、NewTweetFormがステータスを管理しています.
この場合、Reactのデータフロー方式top-downに違反する可能性があります.
この状況を回避するには、ステータスドラッグ&ドロップを使用します.
例

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  //부모의 상태를 변경하시키는 함수
  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent statelifting={handleChangeValue}/>
        //부모 컴포넌트의 상태를 변경시키는 함수를 props로 전달
    </div>
  );
}

function ChildComponent(props) {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    //props로 전달받은 함수를 실행 시킨다.
    props.statelifting()
  };

  return <button onClick={handleClick}>값 변경</button>;
}

Side Effect（副次的効果）

関数のインプリメンテーションが関数の外部に影響を与える場合、この関数は「副作用」と呼ばれます.
無意識の結果を副作用と理解すれば分かりやすい.
例

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar는 Side Effect를 발생시킵니다!

純関数(Pure Funtion)

関数の入力のみが関数の結果に影響し、他の値(関数の入力ではなく)が関数の結果に影響する場合、この関数は純粋な関数ではありません.
純関数も入力として渡される値を変更しません.

私が整理した純関数
既存の値を変更するのは純粋な関数ではありません.
戻り値を予測できない場合は、純粋な関数ではありません.

反応中の副作用

デフォルトでは、react関数要素は純粋な関数として動作します.
非同期動作である場合、または外部APIを使用する場合、reactの観点からSide効果である.
-反応素子における副作用
タイマーの使用(settimeout)
データのインポート(FETCH API、localStorage)
ReactのSide Effectを扱うためにHookを使用することができます.

useEffect (react hooK)

useEffectは、reactの副作用を実行できるhookです.
useEffectの構文
userEffect(関数,[従属関係1,従属関係2,...])
useFeectの最初のパラメータは関数であり、useEffectを実行するとその関数が実行されます.
2番目のパラメータは配列の形式を表し、値の変更が発生した場合です.依存関係に入る値が変化すると、最初のパラメータである関数が実行されます.
useEffect関数に依存関係の違いが含まれているかどうか
effect関数は、空の配列=>コンポーネントが初めて作成された場合にのみ実行されます.
userEffect(関数,[])

は、何も置かない(デフォルト)->構成部品の最初の作成、支柱の更新、またはステータスの更新時に実行します.
useEffect(関数)