가상 DOM이란 무엇입니까?

가상 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 앱에서 데이터가 변경 될 때마다 사용자 인터페이스의 새로운 Virtual DOM 표현이 작성됩니다.

The most basic method needed in order to create a static component in ReactJS are:

You must return code from the render method. You must convert every class to className since class is reserved word in JavaScript. Aside from the more major changes there are minor differences between the two DOMs including three attributes appearing in the Virtual DOM but not in the HTML DOM (key, ref and dangerouslySetInnerHTML).

An important thing to understand when working with the Virtual DOM is the difference between ReactElement and ReactComponent.

ReactElement

• A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element.
• ReactElement - This is the primary type in React and resides in the Virtual DOM.

• ReactElements can be rendered into HTML DOM

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

• JSX compiles HTML tags into ReactElements

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

ReactComponent

• ReactComponent - ReactComponent's are stateful components.
• React.createClass is considered a ReactComponent.
• Whenever state changes the component is rerendered.

Whenever a ReactComponent has a state change, we want as little change to the HTML DOM as possible so ReactComponent is converted to the ReactElement which can then be inserted to the Virtual DOM, compared and updated fast and easily.

When React knows the diff - it's converted to the low-level (HTML DOM) code, which is executed in the DOM.

---

It’s a neat concept: instead of manipulating the DOM directly, which is error prone and relies on mutable state, you instead output a value called the Virtual DOM. The Virtual DOM is then diffed with the current state of the DOM, which generates a list of DOM operations that would make the current DOM look like the new one. Those operations are applied quickly in a batch.

Taken from here.

---

Virtual DOM is an abstraction of the HTML DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

참고URL : https://stackoverflow.com/questions/21965738/what-is-virtual-dom