Mengapa bertindak balas memperkenalkan dom maya?

Oleh kerana sejumlah besar DOM sebenar akan ditakrifkan dalam React, dan sejumlah besar DOM sebenar perlu dikendalikan dengan kerap, yang akan menyebabkan penurunan serius dalam prestasi akses, jadi DOM maya perlu diperkenalkan kepada elakkan akibat daripada operasi DOM yang kerap Untuk menyelesaikan masalah kemerosotan prestasi, DOM maya boleh meningkatkan prestasi halaman dengan lebih baik.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 16.4.0, komputer Dell G3.

Mengapa reaksi memperkenalkan dom maya?

Salah satu teras rangka kerja React ialah DOM maya Berbanding dengan DOM sebenar, DOM maya boleh meningkatkan prestasi halaman dengan lebih baik.

Mengapa menggunakan DOM maya?

Biasanya apabila pereka bentuk mereka bentuk UI halaman web HTML tradisional, mereka akan mentakrifkan beberapa elemen DOM dalam halaman tersebut ialah apa yang dipanggil DOM sebenar. DOM sebenar bertanggungjawab untuk membawa prestasi penampilan dan perubahan data Sebarang perubahan dalam penampilan atau kemas kini maklumat data mesti dihantar semula kepada UI dan mesti dicapai dengan mengendalikan DOM sebenar. Tetapi untuk UI halaman yang kompleks, sebilangan besar DOM sebenar sering ditakrifkan. Kerap mengendalikan sejumlah besar DOM sebenar selalunya akan membawa kepada penurunan yang serius dalam prestasi akses, dan pengalaman pengguna juga akan merosot Oleh itu, rangka kerja React secara khusus memperkenalkan mekanisme DOM maya untuk menangani fenomena ini untuk mengelakkan kemerosotan prestasi yang disebabkan oleh kerap. Operasi DOM.

React DOM adalah serupa dengan koleksi DOM sebenar yang berkaitan Ianya berbeza daripada konsep tradisional elemen DOM Ia sepatutnya lebih sesuai untuk memahaminya sebagai komponen DOM, jadi rangka kerja ReactDOM dipanggil maya DOM.

Buat DOM maya

Kaedah js tulen React.createElement('h1',{},title)

Kaedah JSX491b890eea4f0db6ea8976a309ae3a6a{title}473f0a7621bec819994bb5020d29372a

Jom rasai perbezaan antara menulis DOM sebenar dan DOM maya

DOM Sebenar

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

Sebelum menggunakan rangka kerja React, anda perlu mengimport pustaka React js terlebih dahulu

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

Pembelajaran yang disyorkan: "tutorial video reaksi"

Atas ialah kandungan terperinci Mengapa bertindak balas memperkenalkan dom maya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!