今日の記録。

ユーザーの利便性

利便性を考慮すると、prefers-reduces-motionがあります.これは近接性のためのメディアクエリであり,視力の悪い人には不快な影響を与える可能性があるため,prefers-reduces-motionmediaクエリを用いて,あまり派手なアニメーションや点滅したアニメーションを表示しないようにユーザのために開発したものである.

✅ polyfill

特定の機能をサポートしていないブラウザに使用できるコードセグメントまたはプラグインで、通常はcore.jsCRAが使用され、デフォルトではCRAが内蔵されています.

✅ React

UIコードとビジネスロジックの分離

抽象が高ければ高いほど、ビジネスロジックが集中します.

React.memo|プロパティ値が変更された場合にのみレンダリングされます.

属性値(props):不変変数/状態値(state):非不変変数

リアクターの要素をDOMにするには、すべてのリアクターの要素タイプが文字列である必要があります.

ブラウザで実際のDOMを変更するのに要する時間は他の操作よりも長いので、必要な部分を変更するだけで非常に重要です

「変更」ステータス値関数の変更

reaction非同期で複数のステータス値変更要求を処理し、効率的なレンダリングを実現します.
つまり、ステータス値変更処理を展開にします.

Why ? リアクターがステータス値変更関数を同期処理すると、ステータス値変更関数を呼び出すたびに画面が再描画され、パフォーマンスに問題が発生する可能性があります.
ステータス値の変更が同期され、画面が毎回再描画されない場合、UIデータと画面の間のデータが一致せず、混乱する可能性があります.
呼び出した外部がリアクター内部で管理されていない場合、それらは展開として動作しません.つまり、ステータス値を呼び出して関数を変更するたびにレンダリングされます.
外部でバッチを処理するように変更する場合は、onClick()関数内ReactDOM.unstable_patchedUpdates(() => { setCount()})のように使えばいいです.

「≪強制応答依存性｜Force Response Dependencies｜Emdb≫」配列に入力する値

useEffect(()=> {
  ...
}, ["의존성 배열"])

要素の外部関数は依存配列に

を入力する必要はありません.

構成部品のステータス値または属性値

要素内で定義された領域変数または領域関数

要素に領域変数があり、負の効果関数から領域変数を呼び出す場合は、依存配列に追加する必要があります.

負の効果関数でゾーン関数を使用している場合は、依存配列で管理する必要があります.

負の効果関数が返す値

useEffect(()=> {
  ...
  return () => {
    ...
  }
}, [])

同様に、負効果関数から返される値は、次の負効果関数の実行前または構成部品のアンロード前に呼び出されます.

useEffect(() => {
  ...
  window.addEven  tListener('scroll', onScroll);
  return () => {
    window.removeEventListener('scroll', onScroll);
  }
})

親エフェクト関数が返す関数を使用して、上記のイベントを登録および解除できます.

フックを使うときに守るべきルール

一つの要素からhookを呼び出す順序は常に同じでなければならない.

hookは、関数要素またはカスタムhookでのみ呼び出されます.(Hookは関数素子の機能)

ブラウザにURLを入力したときの出来事

ユーザ入力URL.

DNSサーバは、入力URLのドメイン名IPを検索し、URL情報をIPとともに転送する.

URL情報とIPがHTTPプロトコルによりHTTP要求メッセージを生成した後

TCPプロトコルは、インターネットを介して対応するIPのコンピュータに送信される.

到着したHTTP要求メッセージは、HTTPプロトコルによりウェブデータに変換される.

WebサーバがWebデータの情報を取得

HTTPプロトコルを再利用してHTTP応答メッセージを生成

TCPプロトコルは、インターネットを介して元のコンピュータに転送されます.

HTTP応答メッセージは、HTTPプロトコルによりウェブデータ

に変換される

変換されたウェブページデータは、ブラウザを介してユーザに出力され、表示される.

リファレンス
TCP school