react為什麼要引入虛擬dom

因為在react中會出現定義大量實際dom的情況，需要頻繁的操作大量實際dom，這樣會帶來訪問性能的嚴重下降，所以需要引入虛擬dom，避免頻繁的dom操作帶來的效能下降問題，虛擬dom可以更好地提升頁面效能。

本教學操作環境：Windows10系統、react16.4.0版、Dell G3電腦。

react為什麼要引入虛擬dom

React框架的核心之一就是虛擬DOM，相對於實際DOM而言，虛擬DOM可以更好地提升頁面效能。

為什麼要使用虛擬DOM？

通常設計人員在設計傳統HTML網頁的UI時， 都會在頁面中定義若干的DOM元素， 這些DOM元素是所謂的實際DOM。實際DOM負責承載著外觀表現和資料變化，任何外觀形式的改變或資料資訊的更新都要回饋到UI上， 都是需要透過操作實際DOM來實現的。但對於複雜的頁面UI而言， 往往會定義大量的實際DOM。頻繁地操作大量實際DOM， 往往會帶來存取效能的嚴重下降， 使用者體驗也會隨之變差， 因此， React框架專門針對這個現象引入了虛擬DOM機制，以避免頻繁的DOM操作帶來的效能下降問題。

React DOM類似於一種將相關的實際DOM組合在一起的集合， 是有區別於傳統概念上的DOM元素的，如果將其理解為DOM組件應該更為貼切，所以React框架將ReactDOM稱為虛擬DOM。

建立虛擬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中文網其他相關文章！