React Virtual DOM의 사용: 1. React 코드의 성능 향상 Virtual DOM은 js 객체를 생성하는 것은 실제 DOM 생성을 가상 DOM 생성으로 대체하는 것보다 훨씬 적은 성능을 소비합니다. DOM은 성능 향상에 큰 영향을 미칠 것입니다. 2. 교차 터미널 애플리케이션을 달성하기 위해 브라우저 측에서 가상 DOM은 개별 브라우저 DOM 노드로 변환되거나 교차 터미널을 구현하기 위해 기본 애플리케이션의 구성 요소로 변환될 수 있습니다. 응용 프로그램.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
1. 성능이 대폭 향상되었습니다.
2. 크로스엔드 애플리케이션(React Native)을 가능하게 합니다. 브라우저 측에서 가상 DOM은 개별 브라우저 DOM 노드로 변환됩니다. 또한 네이티브 애플리케이션의 구성요소로 변환할 수도 있으며, 크로스 세그먼트 애플리케이션을 실현할 수도 있습니다.
성능이 향상되는 이유
가상 DOM이 없으면 실제 DOM이 직접 생성되며, 데이터가 변경될 때마다 실제 DOM이 생성되고 실제 DOM이 비교된 후 실제 DOM이 생성됩니다. DOM은 많은 성능을 소비합니다(JS에서 생성된 DOM 트리는 웹 애플리케이션 수준 API를 호출하기 때문에 이 API 수준의 성능 손실은 매우 큽니다). 이는 많은 성능을 소비합니다.
가상 DOM은 js 객체와 다릅니다. 실제 DOM 생성을 가상 DOM 생성으로 대체하면 성능이 훨씬 향상됩니다.
가상 DOM
Virtual DOM은 js 객체입니다.
<div id='abc'><span>hello world</span></div>//실제 DOM['div', {id: 'abc'}, ['span', {}, 'hello world' ]]//가상 DOM페이지 로딩 및 업데이트 프로세스
1. 상태 데이터
2.jsx 템플릿
3. 데이터 + 템플릿으로 가상 DOM 생성
4. 가상 DOM을 사용하여 실제 DOM 생성
5.상태 변화
6. 데이터 + 템플릿이 새로운 가상 DOM을 생성합니다.
7. 원래의 가상 DOM과 새로운 가상 DOM을 비교합니다(diff 알고리즘)
8. DOM을 직접 조작하고 다른 위치를 변경합니다.
지식을 넓히세요:
가상 DOM의 목적은 무엇입니까?
페이지에서 DOM 요소를 효율적으로 업데이트하기 위해;
기존 웹 애플리케이션에서는 사용자 인터페이스의 데이터 변경 사항을 실시간으로 업데이트하는 경우가 많으므로 데이터가 조금만 변경될 때마다 DOM 트리가 다시 렌더링됩니다.
가상 DOM의 목적은 모든 작업을 누적하고 모든 변경 사항을 통계적으로 계산하여 DOM을 균일하게 업데이트하는 것입니다.
대폭 향상된 성능
크로스엔드 애플리케이션(React Native)을 가능하게 합니다. 브라우저 측에서 가상 DOM은 개별 브라우저 DOM 노드로 변환됩니다. 또한 네이티브 애플리케이션의 구성요소로 변환할 수도 있으며, 크로스 세그먼트 애플리케이션을 실현할 수도 있습니다.
DOM과 가상 DOM의 차이점
1. 가상 DOM은 조판 및 다시 그리기 작업을 수행하지 않습니다.
2. 가상 DOM을 자주 수정한 후 실제 DOM에서 변경해야 할 부분을 한번에 비교 수정하고(주의!) 마지막으로 실제 DOM에서 조판과 재작성을 수행하여 조판 손실을 줄이고 과도한 조판 재작성을 줄인다. DOM 노드.
3. 실제 DOM을 자주 조판하고 다시 그리는 작업의 효율성은 매우 낮습니다.
4. Virtual DOM은 결국 실제 DOM과 다르고 일부만 렌더링할 수 있기 때문에 넓은 영역(실제 DOM 노드)의 다시 그리기 및 조판을 효과적으로 줄여줍니다.