React

反応とは?

Web/APpのMVCモードでV(View)を開発するためのJavaScriptライブラリです.動的UIは、HTML、CSS、JavaScriptを使用してWebページを作成するよりも簡単に作成できます.
reactは、UIの開発時にページ切り替え機能を提供しない1ページアプリケーション(SPA)です.reactを使用してページ切り替えを行うには、react-routeなどの追加のライブラリを使用する必要があります.

レスポンスフィーチャー

コンポーネントと再使用
ReactでWebサービスを開発する際には,UIを小さなコンポーネントに分けて設計する.たとえば、ショッピングモールのWebサービスを設計するUIセクションを作成し、ログインステータスを表示するとします.どのページに入っても、ログイン状態が必要です.全100ページで、ログイン状態を示すコードは20行で、すべてのページに追加すると2000行減少します.ここでログイン状態にアイコンを追加する必要がある場合は、1つずつ操作する必要があります.

//NicknameTrans.js
import React from 'react';

const NicknameTrans = () => {
    return(
        <form>
            <input placeholder="닉네임" />
        </form>
    );

};

export default NicknameTrans;

前述したように、読み込み時にはファイルを読み込み、<NicknameTrans />を読み込むだけでよい.修正が必要な場合は、対応するファイルを作成するだけです.
バインディング

一方向データ

reactは一方向データストリームを有し、データストリームは一方向に流れる.双方向データバインディングは規模が拡大するにつれて追跡しにくく複雑になる.それに比べて、Reactは複雑なアプリケーションでもデータストリームで発生する変化を予測することができます.

JSX

JSXはJavaScriptとHTMLを併用しています.
JSの変数はHTMLで直接使用できます.

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
};

仮想DOM(仮想ドーム)

DOMの概念がなければ、まずDOM, BOMを見てみましょう.
仮想DOMは,DOM構造のみを単純に模倣したJavaScriptオブジェクトである.DOMはHTMLをオーダーとし、ブラウザは工場が実際に生成したページです.仮想DOMは、JavaScriptを使用してDOMを操作する場合、必要なコンテンツのみを移動し、実際に移動して高価格比(?)を実現します.これはDOMを変更する方法です.
ブラウザは,ユーザが作成した応答専用コードを仮想DOMとして解釈し,まずメモリで実装し,その後実際のDOMに適用する.その目的は、DOMの変更が最も速いわけではないが、ユーザーが展開できないほど速いことだ.
(Reactは、ユーザーがサイトにアクセスする場合、スライドでライブラリをロードし、ブラウザで仮想DOMを使用して最適化する必要がなく、容量を節約し、速度を速めることを示しています.)

まずHTMLとCSSのレンダリング手順を見てみましょう.

Webブラウザがネットワークを介してHTMLを受信すると、ブラウザのレンダリングエンジンはHTMLを解析し、DOMノードからなるツリーを作成します.

CSSファイルとHTMLの要素のinlineスタイルを解析することで、スタイル情報を持つスタイルツリーを作成することもできます.

レンダリングツリーが完了すると、ブラウザはAttachmentプロシージャを使用してスタイル情報を計算します.レンダーツリーで生成されたすべてのノードにはattachという関数があり、このプロセスで呼び出され、計算後に結果をオブジェクト形式に戻します.計算プロセスはすべて同期化され、レンダーツリーに新しいノードを追加すると、ノードの追加方法で計算プロセスが実行されます.

Layoutプロセスでは、ブラウザがレンダリングツリーの各ノードに座標を割り当て、どこに表示されるかを決定します.

描画中、ブラウザはpaint関数を呼び出してノードごとにシェーディングし、レンダリングされた要素をシェーディングします.

上記のため、JavaScriptを使用してHTMLをDOM操作すると、レイアウトプロセスが再実行され、各ノードの座標が計算され、その後、塗装プロセスが再実行されます.このプロセスが実行されるほど、Webサービスのパフォーマンスが低下します.しかし、Reactは、DOMを頻繁に更新するSPAのReflowおよびRepaintを最小化するために、仮想ドーム上でこれらのすべてのプロセスを実行します.

状態とProps

reactは内部にstateとpropsを有する.

State
動的データの処理に使用します.
クラス構成部品の内部で宣言します.
stateは独立しています.

Props
親コンポーネントから子コンポーネントに渡されるデータ.
サブコンポーネントから受信したpropsは変更できません.
転送されるステップが多すぎる場合は、ContextAPIまたはReduxを使用します.

宣言プログラミング

const arr = [1, 2, 3, 4, 5];
return (
  <ul>
    {arr.map((v) => (
      <li>{v}</li>
    ))}
  </ul>
);

コマンドプログラミングはプロセスを中心にプログラミングされます.
上の宣言プログラミングから見ると、mapがどのように働いているかは気にしないで、結果に集中しています.宣言されていない部分をライブラリまたはフレームワークでカプセル化することで、コマンドプログラミング言語を使用して宣言プログラミングを行うことができます.
DeKu zerocho