Warum führt React Virtual Dom ein?

Da in React eine große Anzahl tatsächlicher DOMs definiert wird und eine große Anzahl tatsächlicher DOMs häufig betrieben werden muss, was zu einer erheblichen Verschlechterung der Zugriffsleistung führt, müssen virtuelle DOMs eingeführt werden, um Leistungseinbußen zu vermeiden Durch häufige DOM-Vorgänge kann das virtuelle DOM die Seitenleistung verbessern.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, React16.4.0-Version, Dell G3-Computer.

Warum führt React virtuelles DOM ein? Einer der Kerne des React-Frameworks ist virtuelles DOM. Im Vergleich zum tatsächlichen DOM kann virtuelles DOM die Seitenleistung besser verbessern.

Warum virtuelles DOM verwenden?

Wenn Designer die Benutzeroberfläche einer herkömmlichen HTML-Webseite entwerfen, definieren sie normalerweise eine Reihe von DOM-Elementen auf der Seite. Diese DOM-Elemente sind das sogenannte eigentliche DOM. Das eigentliche DOM ist für die Übertragung von Darstellungsleistung und Datenänderungen verantwortlich. Jede Änderung des Aussehens oder jede Aktualisierung von Dateninformationen muss an die Benutzeroberfläche zurückgemeldet werden und muss durch die Bedienung des eigentlichen DOM erreicht werden. Für komplexe Seiten-UIs wird jedoch häufig eine große Anzahl tatsächlicher DOMs definiert. Der häufige Betrieb einer großen Anzahl tatsächlicher DOMs führt häufig zu einem erheblichen Rückgang der Zugriffsleistung und auch die Benutzererfahrung verschlechtert sich. Daher führt das React-Framework speziell einen virtuellen DOM-Mechanismus ein, um dieses Phänomen zu beheben und die durch häufige Nutzung verursachten Leistungseinbußen zu vermeiden DOM-Operationen.

React DOM ähnelt einer Sammlung verwandter tatsächlicher DOMs. Es unterscheidet sich vom herkömmlichen Konzept der DOM-Elemente. Es sollte angemessener sein, es als DOM-Komponente zu verstehen, daher nennt das React-Framework ReactDOM Virtual DOM.

Erstellen Sie ein virtuelles DOM

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

JSX way

{title}

Below Feel der Unterschied zwischen tatsächlichem DOM und virtuellem DOM-Schreiben

Tatsächliches 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>

Virtuelles DOM

Sie müssen die js-Bibliothek von React im Voraus importieren, bevor Sie das React-Framework verwenden können

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

Empfohlenes Lernen: „

React-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWarum führt React Virtual Dom ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!