[TIL]プログラマDAY 15:To Do List(コンポーネント+SPA構造)

🙋🏻‍♂️

現在整理されている内容には、いくつかのエラーやエラーがある可能性があります.エラーを最小限に抑えることができますが、一部発生する可能性もありますのでご了承ください.エラーや補足説明を修正する必要がある場合は、コメントで教えてください.

🍪 学習ディレクトリ

作成

To Do List

🍽 学習の総括と重要な内容

関数パラメータ値の即時初期化

ES 6以降の構文を使用すると、関数のパラメータ値を直接定義でき、実行文の下部で初期値の防御コードを記述する必要がないという利点があります.

const Fuc1 = (addValue = "")=>{
	this.state = {...this.state, add : addValue}
}

以上のように、パラメータに直接値を指定し、Fuc 1()を呼び出すと、この値は{...this.state, add : ""}で実行され、空の値はstateに割り当てられ、エラーは発生しません.

イベントエクスポートモード

サブ反復タグ内のイベントが1つずつトリガーされると、イベント呼び出し関数が複数回呼び出され、呼び出しスタックまたはタスクキューに大量の関数が一時停止します.
したがって、この問題を解決するには、イベント配布モードを使用します.
まず、重複タグを含む大きなタグのイベントを検出し、イベントが発生したときにe.targetにキャプチャして実際のイベントが発生したターゲットを検索し、より正確なタグ(「検索するタグ、クラス、アイデンティティ」)を検索します.イベント発生場所に最も近いターゲットを検索するには、関数を実行し、イベントバッファを介して関数を実行します.
これらのモードを使用すると、重複するタグごとにイベントを検出するのではなく、大きなユニットでイベントを検出できます.これにより、関数呼び出しの効率が向上します.

// html
<ul class="wrap">
	<li data-target="1"></li>
    <li></li>
    <li data-target="2"></li>
    <li></li>
    <li data-target="3"></li>
    .
    .
    .
    <li></li>
    <li data-target="30"></li>
</ul>

// js
const $ul = document.querySelector('.wrap');

$ul.addEventListener("click", (e)=>{
	const $targetLi = e.target.closest('li[data-target]');
    
    const {data-target} = dataset;
    
    alert(data-target);
    // 1 or 2 or ... 30
})

楽観的な更新

サーバとのAPI通信が完了し、実際のサーバでデータを処理した後、クライアントにUIを描画するのではなく、サーバが正常に動作し、まずクライアントを楽観的に更新できると仮定して、予めクライアントに要求する.

// 기본 서버 처리 이후 로직
데이터 업데이트..

서버 요청 ..

클라이언트 UI 업데이트..


// 낙관적 업데이트 로직
데이터 업데이트..

클라이언트 UI 업데이트..

서버 요청 ..

클라이언트 UI 업데이트..

🧘🏻‍♂️ 困難と後期

To Doリストを,バニラJSにするのではなく,SPA構造でよく用いられる反応器のような形にアセンブリ化したことから,これらのフロントエンドライブラリは,開発者にとって多くの利便性を提供するライブラリに依存して大量のコードを記述してきたことが分かる.
そして上に述べた知識に対して新しい理解があって、私はまだ学ぶべきものが多すぎると感じています...

🔗 リファレンス

プログラマ