首頁 >web前端 >前端問答 >react為什麼要引入虛擬dom

react為什麼要引入虛擬dom

WBOY
WBOY原創
2022-05-05 11:24:142331瀏覽

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

react為什麼要引入虛擬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方式c40940052b39f65783daa6d5840b6eb8{title}473f0a7621bec819994bb5020d29372a

下面感受一下實際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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn