React가 가상 돔을 도입하는 이유는 무엇입니까?

WBOY

풀어 주다： 2022-05-05 11:24:14

원래의

2298명이 탐색했습니다.

React에는 실제 DOM이 많이 정의될 예정이고, 실제 DOM을 자주 운용해야 하므로 접속 성능이 심각하게 저하되므로 성능 저하를 방지하기 위해 가상 DOM을 도입해야 합니다. 빈번한 DOM 작업으로 인해 가상 DOM이 페이지 성능을 더 향상시킬 수 있습니다.

React가 가상 돔을 도입하는 이유는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, 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 Virtual DOM을 호출합니다.

가상 DOM 만들기

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

JSX 방식

{title}

아래 느낌 실제 DOM과 가상 DOM 작성의 차이점

실제 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>

로그인 후 복사

가상 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(&#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>

로그인 후 복사