🙄 どうして反応を書きますか.

反応を習っています.特に理由はありません.これは最もよく使われる流行庫なので、私も勉強します.
これは私の本当の気持ちですが、人に聞かれたときにこのように答えると、相手も自分も困ってしまいます.
そんな不吉なことを防ぐために、一つ一つ調べてみましょう.

JSフロントエンドフレーム使用状況(出典:StateOfJS(2021))

反応。

反応は何ですか.

出典：反応公式サイト
リアクターはUIの作成を支援するライブラリです.ライブラリであるため、他のフレームワークよりも機能はやや少ないが、拡張性は高い.
たとえば、Reportは単一ページアプリケーション(SPA)の開発の重点です.したがってreact-routerパケットを用いてルーティングを行う.

メリット

世界で一番売れているツールには明らかなメリットがあるのではないでしょうか.
反応公式サイトに入ると、宣言型と要素という単語が見られます.多くの利点がありますが、宣言、コンポーネント、仮想DOMについて説明します.

宣言

宣言式と命令式

const arr = [1, 2, 3, 4, 5];

const imperative = (function getDoubledArr() {
  const result = [];

  for (let i = 0; i < arr.length; i++) {
    result[i] = arr[i] * 2;
  }

  return result;
})(); // 명령형
const declarative = arr.map((data) => data * 2); // 선언형

console.log(declarative); // [2, 4, 6, 8, 10]
console.log(imperative); // [2, 4, 6, 8, 10]

コマンド型は,どのように処理するか,線形に何をするかについてそれぞれ重点的にプログラミングする方式である.
反応器は公式文書に堂々と宣言型を書いた.これが何を意味するか見てみましょう.

// Without React
const root = document.querySelector(".root");
const container = document.createElement("div");
const counter = 9;

if (counter > 10) {
  container.classList.add(".container");
} else {
  container.classList.add(".box");
}

container.innerText = "Hello";
root.appendChild(container);

// With React
import React, { useState } from "react";
import ReactDOM from "react-dom/client";

const Container = () => {
  const [counter, setCounter] = useState(9);
  
  return <div className={counter > 10 ? 'container' : 'box'}>Hello</div>
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Container />);

上記のより簡単な方法でドキュメントを作成できます.

構成部品

反応アプリケーションは、構成部品単位で構成されています.構成部品には、親から取得したPropsと自分で管理したStateがあり、これらの値が変更されるたびに、反応して構成部品が再レンダリングされます.
構成部品をどのように区分するか、および構成部品のステータスをどのように管理するかによって、反応アプリケーションのパフォーマンスが決定されます.

Virtual DOM

仮想DOMの前にDOMについて議論しましょう.DOMは、HTMLドキュメントを構成する要素の構造化された表示オブジェクトです.JavaScriptはDOMにアクセスしてドキュメントを操作できます.
しかし,DOMを操作する行為コストは高い.仮想DOMは、これらのコストを削減することによってパフォーマンスを最適化することを目的としています.
仮想DOMは実際のDOMを抽象化する対象である.リアクターは変更内容を仮想DOMに反映し,実際のDOMを値と比較し,変更が必要な部分だけを変更する.
という解釈がありますが、やはり心に触れることはできません.実際にどのように操作されているのでしょうか.diffingアルゴリズムに基づいてkeyとvalue形式にマッチングし、再調整されました.(詳細は後述します.)
仮想DOMの欠点はメモリを増やすことですが、適切に使用すればパフォーマンスに役立ちます.

欠点は？

SPAの欠点

SPAはロード初期にすべてのリソースを受信する必要があるため、ロード速度が遅い.また、すべてのHTMLドキュメントが最初から描画されるわけではないので、検索エンジンは最適化されません.(最近エンジンが良いので大丈夫です)
SPAをサポートするライブラリ反応器にもこのような欠点がある.

コスト

反応器はとても良い道具です.頻繁な状態変化を検出し、それに応じてレンダリングを再開するアプリケーションがあれば、リアクターはその役割をうまく果たすことができます.
しかし、簡単なアプリケーションなら?逆に反応剤を使用すると性能が低下する.反応自体のオーバーヘッドもプロジェクトに考慮しなければならない.

メリットとデメリットは分かっていますが。

反応についてはまだ深く研究されていないと思います.文字を書くだけで分かるわけでもないし、身をもって経験してこそ心に残るのではないでしょうか.
先端市場が急速に変化しているとはいえ、現在の反応が勢いに乗っているという事実は否定できない.まず、反応を十分に学び、先端に対する知識を豊かにします.