TIL[レスポンス]非同期リクエストの処理

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

React開発方式の最大の特徴は素子単位で開発することである.まず構成部品を作成し、次に構成部品を組み立ててページを作成します.つまり、トップダウン方式でアプリケーションを作成します.このような利点は、テストが容易で、拡張性が良いことです.

たんほうこうデータストリーム

上図に示すように、各素子はツリー状に接続されて構成されている.では、データはどのような要素に配置すればいいのでしょうか.コンポーネントは、パラメータまたはプロパティのように、コンポーネントの外でpropsを使用してデータを受信します.すなわち、データを渡す主体は親コンポーネント(親コンポーネント)である.これは、データストリームが下方に流れる固定ストリームを有することを示す.
一方向データストリームというキーワードはReactを表す説明の一つである.これらのデータストリームでは、コンポーネントはpropsを介して伝達されたデータがどこから来たのか全く知らない.
変化する値、すなわち状態(state)を最小化することが望ましい.ステータスが高いほどアプリケーションが複雑になるからです.次の3つの質問に「はい」と答えられると、状態ではありません.

は道具を通じて両親に伝えていますか?

時間が過ぎても変わらないですか?

要素の他の状態または支柱は計算できますか?

では、状態はどこにあるのでしょうか.ステータスが1つの構成部品にのみ意味がある場合は位置決めできますが、2つの構成部品が1つのステータスとして影響を受ける場合は、共通の構成部品に配置する必要があります.すなわち、2つのサブエレメントが1つの状態に近づくには、2つのサブエレメントの親エレメントに状態を配置する必要があります.

Lifting state up（リフト状態）

ステータスの位置がすべて決定されると、親構成部品のステータスは子構成部品によって変わります.しかし、データストリームが一方向である場合、このような動作はどのように実現されるのでしょうか.このとき必要なのは昇格状態です.
次のコードでは、親コンポーネントと子コンポーネントのステータスをツリー構造で変更する方法があります.

import React, { useState } from 'react';

export default function 부모컴포넌트() {
  const [값, 값바꾸기] = useState(기본값);
  
  const 상태변경메서드 = () => {
    값바꾸기(새로운 값);
  };
  
  return (
    <div>
    	<div>{ 값 }</div>
    	<자식컴포넌트 />
    </div>
  )
}

function 자식컴포넌트() {
  const handleClick = () => {
    // 부모의 상태를 바꾸고 싶다.
  }
  
  return <button onClick={handleClick}></button>;
}

上記のコードでは、ステータスを変更する関数がステータス変更方法です.propsを使用してサブコンポーネントに渡すことができます.次のコードを参照してください.

export default function 부모컴포넌트() {
// 생략
	<자식컴포넌트 handleButtonClick={상태변경메서드} />
// 생략
}
function 자식컴포넌트( {handleButtonClick}) {
  const handleClick = () => {
    // 부모의 상태를 바꾸고 싶다.
    handleButtonClick();
  }
  
  return <button onClick={handleClick}></button>;
}

Effect Hook

Pure Function（純関数）

純関数とは、関数の入力のみが関数結果に影響する関数です.次のコードのような純粋な関数では,ネットワークリクエストのような副作用はない.純粋な関数は、伝達因子が与えられた場合、常に同じ値を返すことを保証するため、予測可能な関数です.

function 함수(매개변수) {
  return 매개변수.메서드();
}
함수(인자);

Side Effect（副次的効果）

では副作用は何でしょうか.関数内で,ある実装が外部に影響を及ぼす場合を副作用と呼ぶ.

let 변수 = 값;

function 함수() {
  변수 = 새 값;
}
함수();

Effect Hook

userEffectは、コンポーネント内で副作用を実行できるhookです.
useEffect(()=> {});
userEffectの最初のパラメータは関数です.この関数で副作用を実行すればいいです.この関数は、次の3つの条件で実行されます.

構成部品を作成すると、

が画面上で初めてレンダリング(表示)されます.

コンポーネントに新しい支柱があり、

をレンダリングします.

要素の状態が変化し、

がレンダリングされる.

条件の影響が発生(依存配列)

userEffect(()=>{},[従属関係1,従属関係2,...];
userEffectの2番目のパラメータは配列です.この配列には条件がある.この条件は、ブール形式の式ではなく、値の変更を意味します.したがって、配列には値のリストが含まれます.この配列を従属関係配列と呼ぶ.配列内の依存要素の値が変化すると、最初のパラメータの関数が実行されます.
依存関係リストに依存関係がない場合(空の配列の場合)、2番目のパラメータは何も与えないのと何が違いますか?パラメータとして空の配列を使用する場合、effect関数は、上記の3つの条件で初めて構成部品を作成した場合にのみ実行されます.この方法は、外部APIを介してリソースを受信し、API呼び出しを必要としない場合に使用することができる.
以上の2つの状況にはそれぞれどのようなメリットとデメリットがありますか?
構成部品内部で空の配列をフィルタリングする場合(1回目のみ表示)

HTTPリクエストの頻度(+)

を低減できる.

ブラウザ(クライアント)メモリ内の大量のデータにより、クライアント負担(-)

が増加
構成部品外部からのフィルタリング(クエリーの変更時に外部APIが呼び出されるたびに)

クライアントは、フィルタリング(+)

を実施することを考慮する必要はない.

頻繁なHTTP要求、サーバーはフィルタ(-)

を担当する