react引入虛擬dom的原因是什么

這篇“react引入虛擬dom的原因是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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('h2',{},title)

JSX方式 <h2 id='myTitle'>{title}</h2>

下面感受一下實際DOM和虛擬DOM書寫的區別

實際DOM

    <div id="example"></div>
    <script>
    // 實際DOM
        // 定位到div
        const divDOM = document.getElementById('example');
        // 創建DOM控件
        const jsSpan = document.createElement('span');
        const jsH3 = document.createElement('h4');
        jsH3.innerHTML = '實際DOM';
        const jsP = document.createElement('p');
        jsP.innerHTML = 'Hello World!';
        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('example');
        const reactH3 = React.createElement('h4',{},'虛擬DOM');
        const reactP = React.createElement('p',{},'Hello World!');
        const reactSpan = React.createElement('span',{},reactH3,reactP);
        ReactDOM.render(reactSpan,divReact);// 將reactSpan插入divReact
    </script>

以上就是關于“react引入虛擬dom的原因是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。