>웹 프론트엔드 >JS 튜토리얼 >Vue와 React의 dom의 차이점

Vue와 React의 dom의 차이점

藏色散人
藏色散人원래의
2021-02-03 10:33:103237검색

React에서 Vue와 dom의 차이점: 1. Vue는 각 구성 요소의 종속성을 추적하며 전체 구성 요소 트리를 다시 렌더링할 필요가 없습니다. 2. React의 경우 애플리케이션 상태가 변경될 때마다 모든 구성 요소가 다시 렌더링됩니다.

Vue와 React의 dom의 차이점

이 기사의 운영 환경: windows7 시스템, React17.0.1&&vue2.0 버전, Dell G3 컴퓨터.

가상 DOM 개념은 React의 탄생과 함께 탄생했습니다. Facebook에서 제안한 것인데, React 이후 대다수의 개발자들에게 그 뛰어난 성능이 빠르게 인식되었으며, vue2.0도 그 핵심에 가상 DOM 개념을 도입했습니다.

가상 DOM이란 무엇인가요?

가상 DOM은 브라우저에서 렌더링한 실제 DOM과 관련이 있습니다. 반응, vue 및 기타 기술이 등장하기 전에는 쿼리 DOM 트리를 탐색하여 필요한 DOM을 찾는 방식으로만 페이지에 표시되는 콘텐츠를 변경할 수 있었습니다. UI 업데이트 목적을 달성하기 위해 스타일이나 동작을 수정합니다.

이 방법은 DOM을 쿼리할 때마다 DOM 트리 전체를 순회해야 하기 때문에 컴퓨팅 리소스를 꽤 많이 소모합니다. 객체 중첩의 형태로 표현되면 DOM의 모든 변경 사항은 JS 객체의 속성 변경이 됩니다. 이러한 방식으로 JS 객체의 속성 변경 사항을 검색하는 데 따른 성능 오버헤드가 줄어듭니다. DOM 트리를 쿼리합니다.

vue와 React의 가상 DOM 차이

vue와 React의 가상 DOM(가상 DOM)이 다릅니다.

vue는 전체 구성 요소 트리를 다시 렌더링하지 않고도 각 구성 요소의 종속성을 추적합니다.

React의 경우 애플리케이션 상태가 변경될 때마다 모든 구성 요소가 다시 렌더링되므로 제어를 위해 React에서 shouldComponentUpdate 수명 주기 함수 메서드가 필요합니다.

추천: "js 기본 튜토리얼"

위 내용은 Vue와 React의 dom의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.