반응 가상 돔의 용도는 무엇입니까

React Virtual DOM의 사용: 1. React 코드의 성능을 향상시킵니다. Virtual DOM은 js 객체를 생성하는 것은 실제 DOM 생성을 생성하는 것보다 훨씬 적은 성능을 소비합니다. 2. 크로스엔드 애플리케이션을 구현하기 위해 가상 DOM은 브라우저 측에서 개별 브라우저 DOM 노드로 변환되거나 네이티브 애플리케이션의 구성요소로 변환되어 크로스엔드 애플리케이션을 구현할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React Virtual DOM의 용도는 무엇인가요

1. 성능을 크게 향상시킵니다

2. 크로스엔드 애플리케이션(React Native)을 가능하게 합니다. 브라우저 측에서 가상 DOM은 개별 브라우저 DOM 노드로 변환됩니다. 또한 네이티브 애플리케이션의 구성요소로 변환할 수도 있으며, 크로스 세그먼트 애플리케이션을 실현할 수도 있습니다.

성능을 향상시킬 수 있는 이유

가상 DOM이 없으면 데이터가 변경될 때마다 실제 DOM이 직접 생성되고, 이후 실제 DOM이 비교됩니다. 그러면 실제 DOM이 수정됩니다. 실제 DOM을 생성하려면 많은 성능이 필요합니다(DOM 트리를 생성하는 JS는 웹 애플리케이션 수준 API를 호출하고 이 API 수준의 성능 손실이 매우 크기 때문입니다). 성능이 많이.

가상 DOM은 다릅니다. js 객체를 생성하면 실제 DOM을 생성하는 것보다 성능이 훨씬 덜 소모됩니다.

Virtual DOM

Virtual DOM은 js 객체입니다

<div id=&#39;abc&#39;><span>hello world</span></div>//真实DOM
[&#39;div&#39;, {id: &#39;abc&#39;}, [&#39;span&#39;, {}, &#39;hello world&#39;]]//虚拟DOM

페이지 로딩 및 업데이트 프로세스

1.state data

2.jsx template

3.Data + 가상 DOM을 생성하는 템플릿

4.사용 실제 DOM을 생성하는 가상 DOM

5. 데이터 + 템플릿이 새로운 가상 DOM을 생성합니다

7. 원본 가상 DOM과 새로운 가상 DOM을 비교합니다(diff 알고리즘)

8.

지식 확장:

가상 DOM의 목적은 무엇인가요?

페이지에서 DOM 요소를 효율적으로 업데이트하기 위해

기존 웹 애플리케이션에서는 사용자 인터페이스의 데이터 변경 사항을 실시간으로 업데이트하는 경우가 많으므로 데이터가 조금만 변경될 때마다 DOM 트리가 변경됩니다. 다시 렌더링합니다.

가상 DOM의 목적은 모든 작업을 누적하고 모든 변경 사항을 통계적으로 계산하여 DOM을 균일하게 업데이트하는 것입니다.

성능이 크게 향상됩니다

크로스엔드 애플리케이션(React Native)이 가능해집니다. 브라우저 측에서 가상 DOM은 개별 브라우저 DOM 노드로 변환됩니다. 또한 네이티브 애플리케이션의 구성요소로 변환할 수도 있으며, 크로스 세그먼트 애플리케이션을 실현할 수도 있습니다.

DOM과 가상 DOM의 차이점

1. Virtual DOM은 조판 및 다시 그리기 작업을 수행하지 않습니다.

2. Virtual DOM은 수정이 잦은 후 실제 DOM에서 변경해야 할 부분을 비교 수정합니다. 과도한 DOM 노드 조판 및 다시 그리기의 손실을 줄이기 위해 최종적으로 실제 DOM에서 조판 및 다시 그리기를 수행합니다

3. 실제 DOM을 자주 조판하고 다시 그리는 효율성은 상당히 낮습니다

4 . 가상 DOM은 실제 DOM과 최종 비교가 다르기 때문에 영역(실제 DOM 노드)의 다시 그리기 및 조판을 효과적으로 줄입니다.

[관련 권장 사항:

javascript 비디오 튜토리얼

, 웹 프론트엔드]

위 내용은 반응 가상 돔의 용도는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!