React 가상 DOM을 사용하는 방법-미니 프로그램 개발-php.cn

이번에는 React 가상 DOM 사용 방법과 React 가상 DOM 사용 시 주의 사항에 대해 알려드리겠습니다.

웹 개발에서는 데이터 변경 사항이 실시간으로 UI에 반영되어야 하는데, DOM이 복잡하거나 잦은 작업이 성능 병목 현상의 원인이 되는 경우가 많습니다. 가상 DOM(Virtual DOM) 메커니즘을 도입합니다.

1. 가상 DOM이란 무엇인가요?

React에서 렌더링 실행의 결과는 실제 DOM 노드가 아니라 가상 DOM이라고 부르는 가벼운 JavaScript 개체입니다.

Virtual DOM은 일괄 처리 및 효율적인 Diff 알고리즘을 갖춘 React의 하이라이트입니다. 이를 통해 성능 문제에 대한 걱정 없이 언제든지 전체 페이지를 "새로 고침"할 수 있으며, 가상 DOM은 인터페이스의 실제로 변경된 부분에서 실제 DOM 작업만 수행되도록 보장합니다. 실제 개발에서는 기본적으로 가상 DOM이 어떻게 작동하는지 신경 쓸 필요가 없지만, 그 작동 메커니즘을 이해하면 React 컴포넌트의 라이프 사이클을 더 잘 이해하는 데 도움이 될 뿐만 아니라, 추가적인 최적화에도 큰 도움이 될 것입니다. 반응 프로그램.

2. 가상 DOM VS 직접 운영하는 네이티브 DOM?

가상 DOM이 없으면 innerHTML을 직접 재설정하면 됩니다. 이 작업은 큰 목록의 모든 데이터가 변경된 경우에는 합리적입니다. 그러나 한 행의 데이터만 변경된 경우에는 전체 innerHTML도 재설정해야 하므로 많은 낭비가 발생합니다.

innerHTML과 Virtual DOM의 다시 그리기 과정을 다음과 같이 비교하세요.

innerHTML: html 문자열 렌더링 + 모든 DOM 요소 다시 만들기

Virtual DOM: Virtual DOM 렌더링 + diff + 필요한 DOM 업데이트

DOM 작업과 비교하면 js 계산은 매우 저렴합니다. Virtual DOM render + diff는 html 문자열을 렌더링하는 것보다 확실히 느리지만 여전히 순수한 js 수준 계산이므로 후속 DOM 작업보다 훨씬 저렴합니다. 물론 실제 DOM을 직접 운영하는 것만큼 React의 성능이 좋지 않다고 검증한 사람도 있습니다. DOM 트리에서는 DOM 작업만 수행되었습니다. 그러나 실제 개발 프로세스에서는 이러한 1,000개의 요소 업데이트가 20개의 논리 블록에 분산될 수 있으며, 각 논리 블록에는 페이지를 업데이트해야 할 때 DOM 트리가 대략적으로 업데이트됩니다.

function Raw() {
  var data = _buildData(),
    html = "";
  ...
  for(var i=0; i<data.length; i++) {
    var render = template;
    render = render.replace("{{className}}", "");
    render = render.replace("{{label}}", data[i].label);
    html += render;
  }
  ...
  container.innerHTML = html;
  ...
}

로그인 후 복사

이렇게 보면 React의 성능이 기본 DOM 작업보다 훨씬 좋습니다.

게다가 DOM은 Javascript에 전혀 속하지 않습니다(Javascript 엔진에도 존재하지 않습니다). Javascript는 실제로 매우 독립적인 엔진입니다. DOM은 실제로 Javascript가

HTML 문서

를 작동할 수 있도록 허용하는 브라우저에서 도입된 API 세트입니다. JIT(Just-In-Time) 컴파일 시대에는 DOM 호출에 따른 오버헤드가 매우 높습니다. Virtual DOM의 실행은 전적으로 Javascript 엔진에서 이루어지며 그러한 오버헤드가 전혀 없습니다. React.js는 주로 가상 DOM의 일괄 처리 및 차이로 인해 네이티브 DOM을 직접 운영하는 것보다 성능이 뛰어납니다. 일괄 처리는 모든 DOM 작업을 수집하여 한 번에 실제 DOM에 제출합니다. diff 알고리즘의 시간 복잡도도 표준 Diff 알고리즘의 O(n^3)에서 O(n)으로 감소되었습니다. 이 내용은 다음 블로그 포스팅에 남겨두겠습니다.

3. 가상 DOM VS MVVM? React와 비교하여 Angular, Knockout, Vue 및 Avalon과 같은 다른 MVVM 프레임워크는 모두

데이터 바인딩

을 사용합니다. 즉, Directive/Binding 객체를 통해 데이터 변경 사항을 관찰하고 데이터가 실행될 때 해당 작업을 수행합니다. 변화. MVVM의 변경 사항 확인은 데이터 수준에서 이루어지는 반면, React의 확인은 DOM 구조 수준에서 이루어집니다. MVVM의 성능은 변경 감지 구현 원칙에 따라 다릅니다. Angular의 더티 검사는 모든 변경에 O(감시자 수)의 고정 비용을 적용합니다. Knockout/Vue/Avalon은 모두 js 및 DOM 수준에서 종속성 수집을 사용합니다. 예 O(변경):

Angular의 가장 비효율적인 점은 작은 변화에도 관찰자 수에 비례하여 성능 비용이 발생한다는 점이라고 볼 수 있습니다. 하지만! 모든 데이터가 변경되면 Angular는 실제로 문제를 겪지 않습니다. 종속성 수집에는 초기화 및 데이터 변경 시 종속성 재수집이 필요하며, 이 비용은 업데이트량이 적을 경우 거의 무시할 수 있지만, 데이터 양이 많을 경우에는 어느 정도 소모가 발생합니다.

MVVM이 목록을 렌더링할 때 각 행에는 자체 데이터 범위가 있으므로 각 행에는 일반적으로 해당 ViewModel 인스턴스 또는 프로토타입 상속을 사용하는 약간 더 가벼운 "범위" 객체가 있지만 가격도 있습니다. 따라서 ViewModel/범위 인스턴스 생성이 Virtual DOM보다 훨씬 비싸기 때문에 MVVM 목록 렌더링의 초기화는 React보다 느린 것이 거의 보장됩니다. 여기에서 모든 MVVM 구현의 일반적인 문제는 목록 렌더링을 위한 데이터 소스가 변경될 때, 특히 데이터가 완전히 새로운 개체인 경우 이미 생성된 ViewModel 인스턴스와 DOM 요소를 효과적으로 재사용하는 방법입니다. 재사용 최적화가 없으면 데이터가 "새"이므로 MVVM은 실제로 이전 인스턴스를 모두 삭제하고 모든 인스턴스를 다시 만든 다음 마지막으로 다시 렌더링해야 합니다. 이것이 제목에 링크된 각도/녹아웃 구현이 상대적으로 느린 이유입니다. 반면 React의 변경 확인은 DOM 구조 수준에서 이루어지기 때문에 새로운 데이터라 할지라도 최종 렌더링 결과가 변경되지 않은 한 쓸데없는 작업을 할 필요가 없습니다.

Angular와 Vue는 모두 목록 다시 그리기를 위한 최적화 메커니즘을 제공합니다. 이는 인스턴스와 DOM 요소를 효과적으로 재사용하는 방법을 프레임워크에 "힌트"합니다. 예를 들어, 데이터베이스의 동일한 개체는 두 개의 프런트 엔드 API 호출에서 다른 개체가 되지만 여전히 동일한 uid를 갖습니다. 이때 track by uid를 프롬프트하여 두 객체가 실제로 동일한 데이터임을 Angular에 알릴 수 있습니다. 그러면 원본 데이터에 해당하는 인스턴스와 DOM 요소를 재사용할 수 있고, 변경된 부분만 업데이트하면 됩니다. 또는 $index로 직접 추적하여 "내부 재사용"을 수행할 수도 있습니다. 즉, 배열의 위치를 기반으로 직접 재사용할 수 있습니다. 질문에 제공된 예에서 각도 구현이 $index로 추적을 추가하면 후속 다시 그리기가 React보다 훨씬 느리지 않습니다. dbmonster 테스트에서도 track by $index: dbmon을 사용한 후 Angular와 Vue가 React보다 빠릅니다. (Angular의 기본 버전은 최적화되지 않았으며 최적화된 버전은 아래에 있습니다.)

성능을 비교할 때 초기 버전과 초기 버전을 구별해야 합니다. 렌더링, 소량의 데이터 업데이트와 대량의 데이터 업데이트 등 다양한 경우가 있습니다. 가상 DOM, 더티 검사 MVVM, 데이터 수집 MVVM은 상황에 따라 성능과 최적화 요구 사항이 다릅니다. 소규모 데이터 업데이트의 성능을 향상시키기 위해 Virtual DOM에는 shouldComponentUpdate 또는 불변 데이터와 같은 타겟 최적화도 필요합니다.

초기 렌더링: 가상 DOM > 더티 검사 >= 종속성 수집
소규모 데이터 업데이트: 종속성 수집 >> 가상 DOM + 더티 검사(최적화할 수 없음) > 최적화
대규모 데이터 업데이트: 더티 검사 + 최적화>= 종속성 수집 + 최적화> 가상 DOM(최적화할 수 없음/필요 없음)>> MVVM 최적화 없음
(이 단락은 Zhihu 답변)

4. React virtual DOM에 대한 오해?

React는 "React가 기본 DOM 조작보다 빠릅니다"라고 말한 적이 없습니다. React는 수동으로 최적화하지 않고도 여전히 적절한 성능을 제공할 수 있음을 보장합니다.

React는 기본 DOM 작업을 마스크하고 보다 선언적인 방식으로 목적을 설명할 수 있어 코드를 더 쉽게 유지 관리할 수 있습니다. 다음은 Zhihu에 대한 답변을 기반으로 합니다. 프레임워크의 DOM 작업 계층은 상위 계층 API에서 생성될 수 있는 모든 작업과 그 구현에 대처해야 하기 때문에 어떤 프레임워크도 순전히 수동 작업보다 더 빠르게 DOM 작업을 최적화할 수 없습니다. 보편적이어야 합니다. 모든 벤치마크에 대해 어떤 프레임워크보다 빠른 수동 최적화를 작성할 수 있지만 요점은 무엇입니까? 실제 애플리케이션을 구축할 때 모든 장소에 대해 수동으로 최적화를 수행하시나요? 유지 관리상의 이유로 이는 분명히 불가능합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천도서:

백엔드 코드로 WeChat 미니 프로그램에서 사진 업로드 구현

WeChat 미니 프로그램에서 사진 업로드 실제 사례 분석

위 내용은 React 가상 DOM을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!