Reactはなぜ仮想DOMを使用するのか

reactを勉強していたとき、VirtualDOMという友達がいました.多くの資料では仮想DOMの性能が良いと言われていますが、これが本当なのか本当なのか見てみましょう.
DOMとは?
DOM(Document Object Model)は、HTML/XMLドキュメントにアクセスするためのインタフェースである.ブラウザは、HTMLドキュメントをパッケージ化し、ユーザーに可視化します.様々な理由から、ブラウザに表示されるHTMLドキュメントを動的に処理したい場合がありますが、DOMはインタフェースです.W 3 C DOMのAPI DOCは最も代表的なDOM規格の一つです.
プログラマーがDOMを使用する方法
JavaScriptは、ブラウザでWeb APIを使用し、DOMを操作する言語です.そのため、DOMオペレーションでもJavaScriptが使用されます.

// js
function addItem () {
  const value = document.getElementById('input').value;
  const list = document.getElemendById('list');
  const newItem = document.createElement('li');
  const text = document.createTextNode(value);
  
  newItem.appendChild(text);
  list.appendChild(newItem);
}

// html
...
<ul id="list">
  <li>a</li>
  <li>b</li>
</ul>
<input id="input"></input>
<button onclick="addItem">+</button>
...

上記JavaScriptでDOMを使用してドキュメントを操作できます.
仮想DOMの誕生
Webはますます複雑になり、DOM操作もますます頻繁になります.ブラウザレンダーパスによれば、DOMの操作はブラウザレンダリングプロセスをもたらす.(レンダリングツリー、ペイントなどを生成する)つまり、3000回の変化が発生すると、レンダリングも3000回行われる.
DOM操作が頻繁に行われると、非常に効率が悪い.仮想DOMはこの問題を解決するために誕生した.
仮想DOMは仮想レイヤです.仮想DOMに対する変更は、直ちにDOMに反映されません.これらの変更を集約してDOMに一度に送信するだけです.ではDOMは一度だけ更新すればいいので一度レンダリングすればいいのですDOMに入る操作は一度しかないので!したがって、DOM動作が非常に頻繁である場合、仮想DOMの動作効率は、動作DOMよりも高い.
でもここに罠がある
仮想DOMの動作原理は1つの層でより多くの動作を行うため,大量のDOM動作がなければ,直接動作DOMよりもはるかに遅い速度になる.

操作仮想DOM->操作DOM

動作

DOM

電子はもちろん遅いでしょう.
また,実際にはDOM操作はあまり劇的には発生していない.通常、3000回のDOM操作は発生しません.
実際、ほとんどの場合、Web開発者は仮想DOMを使用する必要はありません.そうしなくても、完全にうまく動く!
Reactの誕生
しかし、ある日、あるライブラリが仮想DOMの流行を引き起こした.
FacebookはフロントエンドMVCモードを使用しています.Facebookには深刻なエラーがあり、受信されていないFacebookメッセージが表示されていますが、これらのエラーは解決されていません.
データ・ストリームの理解とエラーのチェックに飽きたため、新しいアイデアが得られました.
流れが変わったら全部描き直すことはできませんか?
つまり、DOMでは何も変更しないで、データの変更時にすべて再描画すれば、エラーは発生しません.(筆者はこれがReactの核心思想だと思う)
昔なら話にならない考えだったでしょう?更新するたびにDOMでいろいろな操作をしますしかし、この世界には仮想DOMという技術がある.前述したように、「DOMオペレーションが非常に劇的であれば」仮想DOMは十分な価値を有する.もっと具体的な考えは次のとおりです.
すべて仮想DOMで新規作成し、変更した部分だけをDOMで一括送信すれば良いのでしょうか?
これは非常に仕方のない方法だったが、結局Reactは成功した.ReactはデータストリームとDOMの差がなく,コード記述が簡潔明瞭である.

const [value, setValue] = useState('');
const [list, setList] = useState(['a', 'b', 'c']);

const handleChange = (e) => {
  setValue(e.target.value);
}

const handleClick = () => {
  setList([ ...list, value ]);
}

return (
  <>
    <ul>
      {list.map((item, i) => <li key={i}>{item}</li>}
    </ul>
    <input value={value} onChange={handleChange />
    <button onClick={handleClick}>+</button>
  </>
)

反作用コードデータ・バインディングでもストリームでも、宣言コードの作成に集中できます.
ありふれた誤解
ほとんどの場合、仮想DOMは高速ではありません.
仮想DOMの使用とは、一度データを操作し、もう一度DOMを操作することである.もちろん直接操作DOMより遅いです.
しかし、ごく少数の場合(反作用によって実行される)DOM操作が頻繁であれば、仮想DOMを使用して更新を収集し、一度にDOMに送信するとより効果的である.
反応も速くない

画像ソース:levelup.gitconnected.com
上図に示すように、これはテストに依存しますが、reactはパフォーマンスの良いライブラリではありません.ほとんど遅いフレームと並んでいます.「データが変われば、全部描き直す」という愚直な哲学のためだ.仮想DOMの使用量は非常に大きく、パフォーマンスが「許容可能」なライブラリにすぎず、パフォーマンスはあまりよくありません.
性能は高ければ高いほど良いのではないでしょうか.実際、フロントエンドは「許可」(16.6ミリ秒)しか必要ありません.どうせブラウザの大部分は60 fps!
Myth: React is “faster than DOM”. Reality: it helps create maintainable applications, and is fast enough for most use cases. - Dan Abramov on twitter
まとめとまとめ
仮想DOMは、DOMを直接操作するのではなく、変更を仮想ドームに集中させ、DOMに一度変更を送信する技術です.
一般的には,Webが非常に複雑であっても,仮想DOMを使用する理由はほとんどない.考えはいいが、実際には仮想DOMほど重要な場合はなく、逆に遅い.
Reactの根本的な考え方は「すべて再描画」であり,これは仮想DOMに多くの無知なDOM操作を要求する.
最終的には、Reactは仮想DOMのライブラリとなり、多くの場合、許容可能なパフォーマンスを提供し、世界で最も人気のあるフロントエンドツールになります.
参考資料

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

https://velopert.com/3236

https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom

https://ko.reactjs.org/blog/2013/06/05/why-react.html