反応-5

🔗 教学資料の住所

リアクションライフサイクル

ライフサイクル:構成部品のライフサイクル.コンポーネントが実行、更新、または削除されると、いくつかのイベントが発生します.

componentDidMount()

クライアントから構成部品を読み込んでレンダリングします.レンダリングされた構成部品がドームに付着する場合があります.この場合、特定の操作を実行できます

レンダリングが正常に実行されると、低コードが実行されます.

その後ステータスを設定してRenderを実行すると、コードは実行されません.

すなわち、1回目のレンダリングが正常に実行された場合、componentDidMount()が実行される.

componentDidUnmount()構成部品の削除時にイベントに使用されるコード

componentDidUpdate()構成部品を再レンダリングした後のコード

componentWillUnmount()親構成部品サブ構成部品を削除する場合

オーダー
クラスはclientです.jsxでレンダリングされた瞬間、コンストラクション関数の部分とメソッドがクラスにアタッチされ、初めてレンダリングされます.そしてComponentDidMount
//クラスの場合->constructor->render->ref->コンポーネントDidMount
//(setState/props変更時)->shouldComponentUpdate(true)->render->コンポーネント更新
//親が私を削除したとき->componentwillunmount->消える

setIntervalをライフサイクルに関連付ける

componentDidMount:非同期要求が頻繁に発行されます.

componentDidUnmount:非同期リクエストは頻繁にクリーンアップされます.

setintervalもsettimeoutもメモリに耐え続ける
メモリの漏洩が発生する可能性があります.

この問題を解決するには、非同期リクエストを完了する必要があります.

非同期関数が外部関数を参照している場合、エンクロージャの問題が発生します.

エンクロージャ

closureとは、関数の作成時の外部変数を記憶し、作成後にアクセスし続ける宣言された関数のディレクトリ環境との組合せです.

Lexical範囲

function init() {
  var name = "jiwon"; .
  function displayName() { 
	console.log(name); 
  }
  displayName();
}
init();//콘솔에 "jiwon"
console.log(name)//에러

init()には、領域変数nameと、内部関数displayName()が作成されている.displayName()はinit()関数でのみ使用でき、内部には独自の領域変数はないが、関数内部で外部関数の変数にアクセスできるため、init()で宣言された変数nameにアクセスできる.
レプリカ

function makeFunc() {
  var name = "jiwon";
  function displayName() {
	console.log(name);
  }
  return diplayName;
}
var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

Lexicalの範囲はCloserの結果と同じです.
違いは、displayName()関数が実行される前に外部関数makeFunc()から返され、myFunc変数に格納されることです.
すなわち,makeFunc()関数は閉じてnameにアクセスできないが,displayName()関数からアクセスできる.
🔗 参考資料1
🔗 参考資料2：MDN

じゃんけんゲームを作る

石のはさみ布が変えられないという問題が発生した.
最初にstateを設定した場合、imgCoord0は0なので使用できません.

高次関数

メソッドに呼び出し関数の部分がある場合は、onClickBtnに()=>を入れるだけです.

関数を連続的に書き込むコードがたくさんあります.

HooksとUseEffect

Hooksには、コンポーネントDidMountのようなコードはありません.=>真似できる!

useEffect
:userEffect HookをコンポーネントDidMountとコンポーネントDidUpdateとコンポーネントWillUnmountとマージする

useEffect(()=>{ // componentDidMount, componentDidUpdate의 역할
  interval.current = setInterval(changeHand, 100);
  return () => {//componentWillUnmont역할
    clearInterval(interval.current)
  }
}, [imgCoord]);

2番目の引数配列の値imgcoordが変化するとuserEffect

が実行される

componentDidMount=[]空の配列

componentDidUpdate=[img Coord]配列に置換値を含む

クラスとHooksライフサイクルの比較

関係のないstateを挿入中にエラー