反応する

1 .反応:
反応は、ユーザーインターフェイスを構築するためのJavaScriptライブラリです.
それが1つだけのものに焦点を合わせる小さな図書館であるので、反応はUNIX哲学に続きます.その“1つのこと”は、ユーザーインターフェイスの構築です.
ユーザーインターフェイス(UI)は、ユーザーがマシンと対話するユーザーの前に置くものです.JavaScriptは、Web UIを記述するために反応を使用することができます.
反応で最も人気のあることは、実際のDOMを和解するのに使用できる仮想DOMを使用することです.DOMはDocument Object Modelです.これは、HTMLのブラウザのプログラミングインターフェイスです.DOM APIは、ドキュメントの構造、スタイル、およびコンテンツを変更するために使用されます.

2 .反応の樹木和解
反応がブラウザの要素の木をレンダリングするとき、それは最初にその木の仮想表現を生成して、後でその記憶にそれを保ちます.以前にレンダリングした要素のツリーを更新するように反応すると、更新されたツリーの新しい仮想表現を生成します.これは、メモリ内のツリーの2つのバージョンを比較し、それらの違いを計算し、変更のみを更新します.この過程は木和解アルゴリズムとして知られている.

コンポーネントの反応
反応して、コンポーネントはUISを記述するのに用いられます.反応するコンポーネントは再利用可能で、構成可能で、statentです.
反応コンポーネントの基本的な形式は、プレーンな古いJavaScript関数です.関数は再利用可能であり、他の関数で使用することができます.
反応成分の状態が変化すると、その出力も変化する.反応コンポーネントの名前は大文字で始まる必要があります.

4 . jsx :
JSXは、オブジェクトの反応ツリーの表現であるJavaScript拡張です.JSXはHTMLテンプレートに似た構文を使用します.反応アプリケーションではJSXを使用します.

<div>
{array.map(x => <div>{x.body}<div>)}
</div>

ブラウザで使用する前に、

React.createElement(
"div",
null,
array.map(x => 
React.createElement("div", null, x.body)
),
);

反応はオブジェクトのこの木をとって、それをDOM要素の木に変えます.

5 .反応フック:
フックは、コンポーネントの特殊関数への呼び出しです.すべてのフックの単語“使用”から始まります.彼らは我々が反応フックで行うことができる多くの有用なものです.
反応フックは、機能部品だけでありえる.多くのフックがあります.

const Hook = () => {
const [count, setCount] = useState(0);
return(
<button onClick={() => setCount(count + 1)}>{count}</button>
);
};

6 virtual - dom :
DOMオブジェクトモデルまたはDOMは木構造の表現です.DOM内のすべての変更は、あなたのアプリケーションの仕事を遅くすることができます塗り塗りを行うことができます.
仮想DOMは、これらの2つのステージを最小化して、複雑なアプリケーションでより良いパフォーマンスを与えることによって、この問題を減らします.要素がDOMで変更されると、すべての要素が再び仮想DOMで作成されます.
コンポーネントに変更があるかどうかをチェックします.のみ変更された要素は、実際のDOMで更新されます.

懸念事項の分離
反応して、HTML、CSS、Jstogetherをコンポーネントとして置くことができます.長年にわたり、私たちは別のファイルのJS、CSS、HTMLを分割します.そして、それは懸念の分離と混同してはいけません.

8 .データがダウンします:
反応して、データはコンポーネントの木を降ろします.このため、親から子のコンポーネントへデータを渡すときに小道具を使用する必要があります.JSXの観点から、小道具はHTML属性です.

9 .イベントアップ
反応して、親コンポーネントはその子コンポーネントからデータを得ることができます.子入力ボックスからデータを必要とするPerentコンポーネントを言いましょう.それはいくつかのデータをプッシュするには、その子にプロップとして機能を渡すでしょう.その後、親コンポーネントは、独自の状態でデータを保存することができますまたは別のコンポーネントにそれを渡すことができます.

10レンダリングの仕組み
すべての状態変更通知状態の変更について反応します.次に、response call ()メソッドを呼び出して、メモリ内のコンポーネント表現を更新し、実際のDOMと比較します.次に、DOMへの変更を更新します.子要素は、彼らの小道具が変わったので、彼らが再描画する必要があるということを知っています.