[TIL]Javascriptコンセプト

きょう習った

JavaScriptの概念

Event Loop

Javascriptエンジンには、低メモリのhipスタックとcallスタックがあります.次にJavaScriptで記述されたコードを解釈し実行するために使用します.

メモリスタック:構造化されていない大きなメモリ領域(変数を格納する場所／コンテキスト参照を実行する場所)

ランブルスタック:編成されたコードの実行コンテキストを積み重ねて、1つずつ実行する場所.Callが積み重ねられた場所コールはFunctionをすぐに呼び出すことを示します.私に電話するとクラッシュしますか?(=>stackコードが実行されている場所を表示します.)
1つのcallスタックしかないのでjavascriptは単一スレッド言語と呼ばれます.

外の四隅はブラウザを指します.ブラウザにJavaScriptエンジン(ChromeではV 8)、Web上で提供されているAPI(DOM api/document、AJAX/XMLHttpRequest、Timeout/settTimeout)、および今日理解するイベントLoopおよびCallback queueがあります.
これらはブラウザやランタイム(node JS)に内蔵されている機能の一つとも考えられる.
Callback queue:コールバックブレークポイント(パラメータとして他の関数に渡す関数)のスタック位置
Event Loop:Call StackとCall Back Qを監視し、Call Stackが空の場合、Call Backキューにイベントを投げ出して実行します.

問題はシングルスレッド言語JavaScriptで非同期処理を実現する方法つまり.
重要なのは、JavaScriptだけでは非同期化ができないと考えられる場合、ブラウザや実行時に組み込まれたイベントループが非同期化を実現できると考えられることです.

例として理解する

console.log('Hi');

setTimeout(function cb1() { 
    console.log('call back1');
}, 5000);

console.log('Bye');

簡単なコードです.
結果は私たちが知っています.
Hi
Bye
(5秒後)
call back1
では、このような非同期処理が行われたかどうかを図で見てみましょう.

state clear

ブラウザコンソール、コールスタック、コールキューなどは空き状態です.

console.ログ(「Hi」)スタックに追加

console.log(「Hi」)が呼び出しスタックに入ります.

console.実行ログ(「Hi」)

console.ログ(「Hi」)が実行され、ブラウザコンソールにHiが表示されます.

console.削除ログ(「Hi」)

console.ログ(「Hi」)が実行されているため、呼び出しスタックから削除されます.

setTimeout(function cb1() {...}, 5000)スタックに追加

setTimeout(function cb1() {...}, 5000)Call Stackに追加します.

setTimeout(function cb1() {...}, 5000)運転

setTimeout(function cb1() {...}, 5000).settimeoutはブラウザが提供するAPIなので、Web APIは自分で計時します.(javascript実行エンジンは、ブラウザに再受信する関数のみを含み、要求を発行します.)

setTimeout(function cb1() {...}, 5000)削除

JavaScriptエンジンではsettimeoutというapiリクエストが終了しているので、やるべきことは終わります.したがってcallスタックから削除されます.

console.log(「Bye」)スタックに追加

console.log(「Bye」)がcallスタックに追加されます.

console.実行log(「Bye」)

console.log(「Bye」)を実行し、ブラウザコンソールにByeを表示します.

console.削除ログ(「Bye」)

console.ログ(「Bye」)が実行されているため、呼び出しスタックから削除されます.

この場合、Web apiはtimerを介してリクエストの時間を計算しています...

コールバックキューにcb 1を追加

Web apiは5000 msを数えた後,cb 1として要求された関数をコールバックキューに入れる.

イベントループはcb 1をcallスタックに追加します

イベントループは、コールバックキューに追加された関数をコールバックスタックに追加します.(イベントループはcallスタックもチェックし、空の場合はコールバックキューから関数を取り出してスタックに追加します.)

cb 1関数の実行

callスタックのcb 1という関数を実行します.中はコンソールlog(「callback 1」)があるため、対応する実行コンテキストをcallスタックに追加します.

console.logの実行(「callback 1」)

コールスタック上のコンソール.log(「callback 1」)が一番上にあるため、実行され、ブラウザコンソールにcallback 1が表示されます.

console.削除ログ(「callback 1」)

console.ログ(「callback 1」)が実行されているため、callスタックから削除されます.

cb 1関数の削除

cb 1はすでに実行されており、callスタックから削除されます.

もう一つのポイント
では、settimeoutに指定されたコールバック関数と時間がある場合、特定の期間内に、コールバック関数を無条件に「実行」しますか?

いいえ.
Webapiから渡された時間を数えるだけで、実行ではなくコールバックキューに入れることができます.

setTimeout(myCallback, 1000);

このようなコードがある場合、myCallbackという関数を1000ミリ秒後(1秒後)に実行します.
1秒後に私があなたにあげた関数(コールバック関数)をコールバックキューに追加します.
だから、コールスタックで長い間仕事をしていたと言ったら、1秒後には「実行」されません.(コールバックキューに格納され、実行待ち)
じゃ、これは.

setTimeout(myCallback, 0);

門がない0秒後に実行できるのではなく、0秒後にコールバックキューに追加されます.このsettimeoutが表示されると、呼び出しスタックはweb apiに要求を発行し、呼び出しスタックを消去し、次の操作を続行します.したがって、0秒でも次の行が先に実行されます.
もしcallbackにcallbackが入っていたら...?

listen('click', function (e){
    setTimeout(function(){
        ajax('https://api.example.com/endpoint', function (text){
            if (text == "hello") {
	        doSomething();
	    }
	    else if (text == "world") {
	        doSomethingElse();
            }
        });
    }, 500);
});

これをコールバック地獄(ネストコール/コールバックhell)と呼び、
document addEventListerはDOM APIであるため、以下に示すようにWeb APIに送信される.
スタックが空になっているので、Web APIが私のやるべきことを完了すると(ボタンをクリック)、キューにコミットされ、スタックにsettimeoutが追加され、Web APIに送信され、500ミリ秒待っている間に少し遅い演算が実行されると、より遅くなります.
スタックが空になり、settimeoutのコールバック関数ajaxがスタックに追加されると、web apisで要求されます...
リクエストがタイムリーに応答しないため、エラーが発生する可能性があり、パフォーマンスが悪いことがわかります.
そのため、Promise、最近発売されたasync、awaitなどのソリューションがあります.次のレッスン...
[注釈とソース]
https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5
https://www.youtube.com/watch?v=zi-IG6VHBh8

動作に関連

useState

usStateは同期か非同期か?

useStateは非同期で動作します.
イベントハンドラでsetStateを複数回呼び出すと、一括更新とレンダリングが行われます.
なぜなら、state 1 setとstate 2 setが同期して処理されると、速度が遅くなるからです.

import React, { useState } from "react"

function App() {

  const [num, setNum] = useState(1)

  async function plus() {
    setNum(num + 1)
    setNum(num + 1)
    setNum(num + 1)
  }

  async function minus() {
    setNum(num - 1)
  }

  return (
    <div className="App">
      <h1>{num}</h1>
      <button onClick={plus}>PLUS</button>
      <button onClick={minus}>MINUS</button>
    </div>
  );
}

export default App;

3回setnumを使用したからといってnumに3を加えるわけではありません.
1つのイベントハンドラ内では非同期なので、1だけ増加します.
これらの同じステータスを更新すると、reactはこれらのアクションをバッチ処理します.
bactingはsetStateを1つに統合し、最終的には1回のみ設定します.
stateが変更されると再表示され、レンダリングを続行するとパフォーマンスが低下するため、stateが変更された後に反映されるコンテンツはキューに入れられ、一度に反映されます.
したがって、開発者は予想外の値を参照する可能性があります.
解決方法:
1.最新のステータス値を参照するには、更新してください.
したがって、userEffect、componentDidUpdateを使用して最新のステータス値を表示できます.

関数式更新
setStateが非同期で実行される場合、値を設定するのではなく、関数を最新の更新stateとともに渡す方法があります.
複数回渡された関数はキューに格納され、順番に実行されます.したがって、キュー内で最初に実行される関数の結果に反映されるステータス値は、次の実行する関数のパラメータとして使用されるため、常に最新のステータスが維持されます.

私をこのように変えさせたら.

  async function plus() {
    setNum(num => num + 1)
    setNum(num => num + 1)
    setNum(num => num + 1)
  }

[注釈とソース]
https://baegofda.tistory.com/220
https://garve32.tistory.com/39

Git

gitオンラインrepo接続がありますが、別のrepo接続を作成したい場合は?
その時はgit remoteset-url origin[転送先アドレス]を使って押せばいい!