가상 DOM이란 무엇입니까?

최근에는 Facebook의 React 프레임 워크를 살펴 보았습니다 . 실제로 이해하지 못하는 "가상 DOM"이라는 개념을 사용합니다.

가상 DOM이란 무엇입니까? 장점은 무엇입니까?

반응은 DOM의 일부를 나타내는 사용자 정의 객체 트리를 만듭니다. 예를 들어 UL 요소를 포함하는 실제 DIV 요소를 만드는 대신 React.ul 개체를 포함하는 React.div 개체를 만듭니다. 실제로 실제 DOM을 건드 리거나 DOM API를 거치지 않고도 이러한 객체를 매우 빠르게 조작 할 수 있습니다. 그런 다음 컴포넌트를 렌더링 할 때이 가상 DOM을 사용하여 두 트리를 일치시키기 위해 실제 DOM으로 수행해야하는 작업을 파악합니다.

가상 DOM을 청사진처럼 생각할 수 있습니다. 여기에는 DOM을 구성하는 데 필요한 모든 세부 정보가 포함되어 있지만 실제 DOM에 들어가는 무거운 부분이 모두 필요하지 않기 때문에 훨씬 쉽게 생성하고 변경할 수 있습니다.

아주 순진하지만 예를 들어 보자. 집안의 방에 무언가 엉망이되어서 청소해야한다면, 첫 단계는 무엇입니까? 엉망인 방이나 집 전체를 청소 하시겠습니까? 정답은 청소가 필요한 방만 청소한다는 것입니다. 그것이 가상 DOM이하는 일입니다.

일반적인 JS는 변경이 필요한 부분 만 렌더링하는 대신 전체 DOM을 순회하거나 렌더링합니다.

따라서 <div>DOM 에 다른 것을 추가 할 때와 같이 변경 사항이있을 때마다 실제 DOM에서 실제로 변경을 수행하지 않는 가상 DOM이 생성됩니다. 이제이 가상 DOM을 사용하면이 가상 DOM과 현재 DOM의 차이점을 확인하게됩니다. 그리고 <div>전체 DOM을 다시 렌더링하는 대신 다른 부분 (이 경우 new ) 만 추가됩니다.

가상 DOM이란 무엇입니까?

가상 DOM은 페이지를 변경하기 전에 React 컴포넌트에 의해 생성 된 실제 DOM 요소의 메모리 내 표현입니다.

호출되는 렌더 함수와 화면에 요소를 표시하는 단계 사이에 발생하는 단계입니다.

컴포넌트의 render 메소드는 일부 마크 업을 반환하지만 아직 최종 HTML은 아닙니다. 실제 요소가 될 것의 메모리 내 표현입니다 (이것은 1 단계입니다). 그런 다음 해당 출력이 실제 HTML로 변환되어 브라우저에 표시됩니다 (2 단계).

그렇다면이 모든 과정을 거쳐 가상 DOM을 생성하는 이유는 무엇입니까? 간단한 답변 — 빠른 반응을 가능하게합니다. 가상 DOM 디핑을 통해이를 수행합니다. 기존과 신규의 두 가상 트리를 비교하고 실제 DOM에 필요한 변경 만 수행합니다.

인트로에서 소스 # 2에 반응

virtual DOM: (VDOM)은 새로운 개념이 아니다 https://github.com/Matt-Esch/virtual-dom .

VDOM은 전략적으로 단일 페이지 애플리케이션에서 모든 노드를 다시 그리지 않고 DOM을 업데이트합니다. 트리 구조에서 노드를 찾는 것은 쉽지만 SPA 앱의 DOM 트리는 엄청나게 클 수 있습니다. 이벤트 발생시 노드를 찾아 업데이트하는 것은 시간 효율적이지 않습니다.

VDOM은 실제 돔의 높은 레이블 추상화를 생성하여이 문제를 해결합니다. VDOM은 실제 DOM에 대한 고급 경량 메모리 내 트리 표현입니다.

예를 들어 DOM에 노드를 추가하는 것을 고려하십시오. 반응 VDOM 사본을 메모리에 보관

1. 새로운 상태의 VDOM 생성
2. diffing을 사용하여 이전 VDOM과 비교하십시오.
3. 실제 DOM에서 다른 노드 만 업데이트하십시오.
4. 새 VDOM을 이전 VDOM으로 할당합니다.

이것은 종종 ReactJS와 함께 언급되는 Virtual DOM에 대한 간단한 설명과 반복입니다.

DOM (Document Object Model)은 구조화 된 텍스트의 추상화로 HTML 코드와 CSS로 구성되어 있음을 의미합니다. 이러한 HTML 요소는 DOM에서 노드가됩니다. DOM을 조작하는 이전 방법에는 제한이 있습니다. 가상 DOM은 React를 작성하거나 사용하기 전에 작성된 리터럴 HTML DOM의 추상화이지만,이를 위해 ReactJS와 함께 사용합니다. 가상 DOM은 가벼우 며 브라우저의 DOM 구현에서 분리됩니다. 가상 DOM은 기본적으로 주어진 시간에 DOM의 스크린 샷 (또는 사본)입니다. 개발자 관점에서 볼 수있는 방법은 DOM은 프로덕션 환경이고 가상 DOM은 로컬 (dev) 환경입니다. React 앱에서 데이터가 변경 될 때마다 사용자 인터페이스의 새로운 가상 DOM 표현이 작성됩니다.

ReactJS에서 정적 컴포넌트를 작성하는 데 필요한 가장 기본적인 방법은 다음과 같습니다.

render 메소드에서 코드를 리턴해야합니다. 클래스는 JavaScript에서 예약어이므로 모든 클래스를 className으로 변환해야합니다. 더 큰 변화 이외에도 가상 DOM에는 나타나지만 HTML DOM에는 나타나지 않는 3 가지 속성 (key, ref 및 dangerouslySetInnerHTML)을 포함하여 두 DOM 간에는 약간의 차이가 있습니다.

Virtual DOM으로 작업 할 때 이해해야 할 중요한 사항은 ReactElement와 ReactComponent의 차이점입니다.

ReactElement

• ReactElement는 DOM 요소의 가볍고 상태 비 저장 불변의 가상 표현입니다.
• ReactElement-React의 기본 유형이며 Virtual DOM에 있습니다.

• ReactElements는 HTML DOM으로 렌더링 될 수 있습니다

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX는 HTML 태그를 ReactElements로 컴파일

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

반응 성분

• ReactComponent-ReactComponent는 상태 저장 컴포넌트입니다.
• React.createClass는 ReactComponent로 간주됩니다.
• 상태가 변경 될 때마다 구성 요소가 다시 렌더링됩니다.

ReactComponent의 상태가 변경 될 때마다 가능한 한 HTML DOM을 약간 변경하기를 원하므로 ReactComponent가 ReactElement로 변환되어 Virtual DOM에 삽입되어 빠르고 쉽게 비교 및 ​​업데이트 될 수 있습니다.

React가 diff를 알고 있으면 DOM에서 실행되는 저수준 (HTML DOM) 코드로 변환됩니다.

깔끔한 개념입니다. 오류를 일으키고 변경 가능한 상태에 의존하는 DOM을 직접 조작하는 대신 가상 DOM이라는 값을 출력합니다. 가상 DOM은 그 다음입니다 diffed 새처럼 현재 DOM 모양을 만들 것 DOM 작업의 목록을 생성하는 DOM의 현재 상태와. 이러한 작업은 일괄 처리로 빠르게 적용됩니다.

여기 에서 가져 왔습니다.

가상 DOM은 상태 변경에 따라 노드의 하위 트리를 선택적으로 렌더링하는 HTML DOM의 추상화입니다. 구성 요소를 최신 상태로 유지하기 위해 가능한 최소한의 DOM 조작을 수행합니다.

Virtual Dom 은 Dom의 사본 하나를 만듭니다. 가상 돔 은 돔 과 비교되며 가상 돔 은 변경된 돔 부분 만 업데이트합니다. 그것은 전체 돔을 렌더링하지 않고 돔에서 업데이트 된 돔 부분을 변경했습니다. 시간이 많이 걸리고이 기능으로 인해 앱이 빠르게 작동합니다.

모든 답변이 훌륭합니다. 방금 실제 비유를 줄 수있는 유추를 생각해 냈습니다.

실제 DOM은 방과 같고 노드는 방의 가구입니다. 가상 DOM은이 현재 방의 청사진을 그리는 것과 같습니다.

우리 모두는 가구를 옮기는 경험을 가지고 있으며 매우 피곤합니다 (컴퓨터의 뷰를 업데이트하는 것과 동일한 개념). 따라서 위치를 변경하거나 가구 (노드)를 추가 할 때마다 필요한 변경 만 수행하려고합니다.

구조를 달성하기 위해 청사진이 나왔습니다. 우리는 새로운 청사진을 그리고 그 차이를 원래의 청사진과 비교합니다. 이를 통해 어떤 부분이 변경되었으며 어떤 부분이 동일하게 유지되는지 알 수 있습니다. 그런 다음 실제 방에 필요한 변경을 수행합니다 (실제 DOM에서 변경된 노드 업데이트). 만세.

(어떤 사람들은 왜 가상 DOM에 의존하고 실제 DOM을 직접 비교하지 않아야하는지 생각할 수도 있습니다. 유사하게 말하자면, 실제 DOM을 비교하면 다른 실제 공간을 만들어 원래의 공간과 비교해야합니다. 너무 비싸요.)

이 문제에서 질서와 이해를합시다. 반응 (또는 다른 라이브러리)은 자바 스크립트의 "계층"입니다.

가상 dom과 같은 것은 없으며, 첨부되지 않은 dom이 있습니다.

간단한 자바 스크립트로 설명하겠습니다.

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

이 시점에서 우리는 dom에 표시되지 않은 Div를 만들었습니다.

액세스하고 속성, 값을 추가하거나 변경할 수 있습니다.

일단 전화 : (예를 들어, 본문에 추가)

    document.body.appendChild(vDom['newDiv'])

우리는 그것을 볼 것입니다;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)