概要

Velocgで「React動作原理」を検索するだけでなく、
本当に無数の文章が整理されています
私の言葉でこの知識を整理するためだけに

What is React?

ReactはFacebookが提供するフロントエンドライブラリです.
コンポーネントベースのUIを作成します.
私はよくこれをUIパズルと呼んでいます.

上記のように、複数の構成部品を組み合わせて1ページを作成します.
また、jsx構文をProps、Stateの概念、JavaScriptの拡張として使用します.
特徴は別途位置決めがあり、省略する.

How react works?

説明する前に、まずDOMについて知ります.

DOM

文書オブジェクトモデル(DOM)は、HTML、XML文書のインタフェースである.
多くのサービスでは、このツリー構造が使用されていますが、実際には動的計算が困難です.
たとえば、タグのattributeを変更する場合は、

html -> body -> a -> href

で参照し、プロパティを変更します.
Webサービスの実装は、これらの演算が多すぎるため、時間的に非常に非効率です.
Reactの動作は、この部分を仮想DOMに変換することです.

Virtual DOM

바로 볼펜으로 그릴래, 아니면 연필로 그리고 덧씌울래?

比喩がちょっと(?)合わないかもしれませんが、これは私の感想です.
例えば、最初からボールペンで絵を描いていたら、何か不満があったら
使った画用紙は無用のものとなり、新しい画用紙を出す必要がある.
しかし、鉛筆は新しい画用紙を出す必要はありません.

修正後、Reactは直ちにDOMに適用されません.
状態が変化した場合,Diffingアルゴリズムを用いて既存のDOMと比較した.
Diffing Algorithm
1.親要素が変更された場合、子要素は再上書きされます.
2.要素が同じで、属性が異なる場合は、属性のみを変更し、DOMには触れません.
3.サブエレメントを追加します.
3番目のブランチには、2つのブランチがあります.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

たとえば、上のリストで

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
<ul>

前に示したように、4を追加した場合.
反応は1.2.3は同じですが4はありません!を選択します.
反対に

<ul>
  <li>4</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

4が上部にある場合、既存の1とは異なるため、すべてのDOMが更新されます.
この問題を解決する方法は「key」です.

<ul>
  <li key=`${id1}`>1</li>
  <li key=`${id2}`>2</li>
  <li key=`${id3}`>3</li>
  <li key=`${id4}`>4</li>
<ul>

これにより、Reactは既存の要素と存在しない要素をよく区別し、更新する要素のみを更新することができます.
注意:https://dj-min43.medium.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-virtual-dom-%EA%B0%80%EC%83%81%EB%8F%94-%EB%B2%84%EC%B6%94%EC%96%BC%EB%8F%94-%EC%9D%B4%EB%9E%80-359c28112048

の最後の部分

つまり、Reactは上記のようにDOMを更新する.
動的に変化するリポジトリを効率的に処理できます.
なぜreactを使うのですか?正しい答えのようです.