なぜ React は仮想 dom を導入するのでしょうか?

WBOY

リリース： 2022-05-05 11:24:14

オリジナル

2302 人が閲覧しました

reactでは大量の実DOMを定義するため、大量の実DOMを頻繁に操作する必要があり、アクセス性能の大幅な低下を引き起こすため、仮想DOMの導入が必要となります。頻繁な DOM 操作による影響を回避し、パフォーマンス低下の問題を解決するために、仮想 DOM を使用するとページのパフォーマンスを向上させることができます。

なぜ React は仮想 dom を導入するのでしょうか?

このチュートリアルの動作環境: Windows 10 システム、react16.4.0 バージョン、Dell G3 コンピューター。

react が仮想 dom を導入する必要がある理由

React フレームワークのコアの 1 つは仮想 DOM であり、実際の DOM と比較して、仮想 DOM はページのパフォーマンスを向上させることができます。

仮想 DOM を使用する理由

通常、デザイナーが従来の HTML Web ページの UI をデザインする場合、ページ内に多数の DOM 要素を定義します。これらの DOM 要素は、いわゆる実際の DOM です。実際の DOM は外観のパフォーマンスとデータの変更を担当しており、外観の変更やデータ情報の更新は UI にフィードバックされ、実際の DOM を操作することで実現される必要があります。ただし、複雑なページ UI の場合、多くの場合、実際の DOM が多数定義されます。多数の実 DOM を頻繁に操作すると、アクセス性能が大幅に低下し、ユーザーエクスペリエンスも低下することが多いため、React フレームワークでは特に仮想 DOM の仕組みを導入し、この現象に対処し、頻繁な操作による性能低下を回避しています。 DOM 操作、降下の問題。

React DOM は、関連する実際の DOM のコレクションに似ており、従来の DOM 要素の概念とは異なります。DOM コンポーネントとして理解する方が適切であるため、React フレームワーク ReactDOM は仮想と呼ばれます。ドム。

仮想 DOM の作成

純粋な js メソッド React.createElement('h1',{},title)

JSX メソッド

{title}

実際の DOM と仮想 DOM の書き方の違いを感じてみよう

実際の DOM

    <div id="example"></div>
    <script>
    // 实际DOM
        // 定位到div
        const divDOM = document.getElementById(&#39;example&#39;);
        // 创建DOM控件
        const jsSpan = document.createElement(&#39;span&#39;);
        const jsH3 = document.createElement(&#39;h3&#39;);
        jsH3.innerHTML = &#39;实际DOM&#39;;
        const jsP = document.createElement(&#39;p&#39;);
        jsP.innerHTML = &#39;Hello World!&#39;;
        jsSpan.appendChild(jsH3);
        jsSpan.appendChild(jsP);
        divDOM.appendChild(jsSpan);
    </script>

ログイン後にコピー

仮想 DOM

React フレームワークを使用する前に、事前に React js ライブラリをインポートする必要があります

    <!-- react的核心库 -->
    <script src="../React/react.development.js"></script>
    <!-- react的DOM库 -->
    <script src="../React/react-dom.development.js"></script>
    <!-- 编译器 将ES6转换为ES5 -->
    <script src="../React/babel.min.js"></script>

ログイン後にコピー

    <div id="example"></div>
    <script type="text/babel">// type必须有
    // 虚拟DOM
        const divReact = document.getElementById(&#39;example&#39;);
        const reactH3 = React.createElement(&#39;h3&#39;,{},&#39;虚拟DOM&#39;);
        const reactP = React.createElement(&#39;p&#39;,{},&#39;Hello World!&#39;);
        const reactSpan = React.createElement(&#39;span&#39;,{},reactH3,reactP);
        ReactDOM.render(reactSpan,divReact);// 将reactSpan插入divReact
    </script>

ログイン後にコピー

推奨学習: "react ビデオチュートリアル "

以上がなぜ React は仮想 dom を導入するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。