Pourquoi React introduit-il le dom virtuel ?

Étant donné qu'un grand nombre de DOM réels seront définis dans React et qu'un grand nombre de DOM réels devront être utilisés fréquemment, ce qui entraînera une diminution importante des performances d'accès, des DOM virtuels doivent donc être introduits pour éviter la dégradation des performances. causé par des opérations DOM fréquentes, le DOM virtuel peut mieux améliorer les performances des pages.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React16.4.0, ordinateur Dell G3.

Pourquoi React introduit-il le DOM virtuel ? L'un des cœurs du framework React est le DOM virtuel. Par rapport au DOM réel, le DOM virtuel peut mieux améliorer les performances des pages.

Pourquoi utiliser le DOM virtuel ?

Habituellement, lorsque les concepteurs conçoivent l'interface utilisateur d'une page Web HTML traditionnelle, ils définissent un certain nombre d'éléments DOM dans la page. Ces éléments DOM sont ce qu'on appelle le DOM réel. Le DOM réel est responsable de la transmission des performances d'apparence et des modifications des données. Tout changement d'apparence ou de mise à jour des informations de données doit être renvoyé à l'interface utilisateur et doit être réalisé en exploitant le DOM réel. Mais pour les interfaces utilisateur de pages complexes, un grand nombre de DOM réels sont souvent définis. L'exploitation fréquente d'un grand nombre de DOM réels entraînera souvent une baisse importante des performances d'accès, et l'expérience utilisateur se détériorera également. Par conséquent, le framework React introduit spécifiquement un mécanisme de DOM virtuel pour résoudre ce phénomène afin d'éviter la dégradation des performances causée par des problèmes fréquents. Opérations DOM. Problème de descente.

React DOM est similaire à une collection de DOM réels associés. Il est différent du concept traditionnel d'éléments DOM. Il devrait être plus approprié de le comprendre comme un composant DOM, c'est pourquoi le framework React appelle ReactDOM Virtual DOM.

Créez un DOM virtuel

Pure js way React.createElement('h1',{},title)

JSX way47febcd0bbad93de3fcd0cfb82bb3b74{title}473f0a7621bec819994bb5020d29372a

Below Feel la différence entre l'écriture du DOM réel et du DOM virtuel

DOM réel

    <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 virtuel

Vous devez importer la bibliothèque js de React à l'avance avant d'utiliser le framework React

    <!-- 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>

Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!