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

這篇“react引入虛擬dom的原因是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react引入虛擬dom的原因是什么”文章吧。

因?yàn)樵趓eact中會(huì)出現(xiàn)定義大量實(shí)際dom的情況，需要頻繁的操作大量實(shí)際dom，這樣會(huì)帶來訪問性能的嚴(yán)重下降，所以需要引入虛擬dom，避免頻繁的dom操作帶來的性能下降問題，虛擬dom可以更好地提升頁(yè)面性能。

本教程操作環(huán)境：Windows10系統(tǒng)、react16.4.0版、Dell G3電腦。

react為什么要引入虛擬dom

React框架的核心之一就是虛擬DOM，相對(duì)于實(shí)際DOM而言，虛擬DOM可以更好地提升頁(yè)面性能。

為什么要使用虛擬DOM？

通常設(shè)計(jì)人員在設(shè)計(jì)傳統(tǒng)HTML網(wǎng)頁(yè)的UI時(shí)， 都會(huì)在頁(yè)面中定義若干的DOM元素， 這些DOM元素是所謂的實(shí)際DOM。實(shí)際DOM負(fù)責(zé)承載著外觀表現(xiàn)和數(shù)據(jù)變化，任何外觀形式的改變或數(shù)據(jù)信息的更新都要反饋到UI上， 都是需要通過操作實(shí)際DOM來實(shí)現(xiàn)的。但對(duì)于復(fù)雜的頁(yè)面UI而言， 往往會(huì)定義大量的實(shí)際DOM。頻繁地操作大量實(shí)際DOM， 往往會(huì)帶來訪問性能的嚴(yán)重下降， 用戶體驗(yàn)也會(huì)隨之變差， 因此， React框架專門針對(duì)這個(gè)現(xiàn)象引入了虛擬DOM機(jī)制，以避免頻繁的DOM操作帶來的性能下降問題。

React DOM類似于一種將相關(guān)的實(shí)際DOM組合在一起的集合， 是有區(qū)別于傳統(tǒng)概念上的DOM元素的，如果將其理解為DOM組件應(yīng)該更為貼切，所以React框架將ReactDOM稱為虛擬DOM。

創(chuàng)建虛擬DOM

純js方式 React.createElement('h2',{},title)

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

下面感受一下實(shí)際DOM和虛擬DOM書寫的區(qū)別

實(shí)際DOM

    <div id="example"></div>
    <script>
    // 實(shí)際DOM
        // 定位到div
        const divDOM = document.getElementById('example');
        // 創(chuàng)建DOM控件
        const jsSpan = document.createElement('span');
        const jsH3 = document.createElement('h4');
        jsH3.innerHTML = '實(shí)際DOM';
        const jsP = document.createElement('p');
        jsP.innerHTML = 'Hello World!';
        jsSpan.appendChild(jsH3);
        jsSpan.appendChild(jsP);
        divDOM.appendChild(jsSpan);
    </script>

虛擬DOM

在使用React框架之前需要提前導(dǎo)入React的js庫(kù)

    <!-- react的核心庫(kù) -->
    <script src="../React/react.development.js"></script>
    <!-- react的DOM庫(kù) -->
    <script src="../React/react-dom.development.js"></script>
    <!-- 編譯器 將ES6轉(zhuǎn)換為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>

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