React의 Virtual DOM은 정확히 어떻게 빨라집니까?

React의 Virtual DOM은 정확히 어떻게 빨라집니까?

React의 Virtual DOM이 더 빨라지는 데는 두 가지 이유가 있는 것으로 알고 있습니다.

1. 실제로 업데이트해야 하는 요소만 업데이트합니다(diff 사용).

2. 업데이트를 배치하기 때문에 실제 DOM을 한 번만 업데이트합니다.따라서 재도장도 한 번만 수행되며, 그렇지 않았다면 여러 번 수행되었을 것입니다.

이 두 가지 사항에 대해 질문이 있습니다.

1. 제가 알기로는 최신 브라우저는 모두 DOM의 필수 요소만 업데이트할 수 있을 정도로 효율적입니다.예를 들어, 2개의 'p' 태그가 있고 버튼 클릭을 사용하여 p 태그 중 하나의 텍스트를 변경하면 해당 p 태그만 safari에 의해 업데이트됩니다(도료 플래시를 사용하여 확인).그렇다면 브라우저에 의해 이미 구현되어 있다면 포인트 1은 어떤 장점이 있을까요?

2. React는 업데이트를 정확히 어떻게 배치합니까?최종적으로 React는 DOM API를 사용하여 실제 DOM을 업데이트해야 합니다.DOM API를 직접 사용하면 변경 내용이 배치되지 않는 반면 React가 사용하면 배치되는 이유는 무엇입니까?

나는 내 질문에 대한 답을 찾았다.

중요한 것은 Virtual DOM의 목적을 이해하는 것입니다.

먼저 구성 요소를 렌더링하기 위해 React가 어떤 방식을 사용하는지 확인해야 합니다.

javascript 프레임워크마다 데이터 모델의 변경을 검출하여 뷰에 렌더링하기 위한 접근법이 다릅니다.

AngularJS를 고려합니다.예를 들어 {{foo}와 같은 표현으로 Angular 템플릿의 데이터를 참조할 때.x}}, Angular는 해당 데이터를 렌더링할 뿐만 아니라 특정 값에 대한 감시자를 생성합니다.앱에서 어떤 일이 발생할 때마다(클릭 이벤트, HTTP 응답, 타임아웃) 모든 워쳐가 실행됩니다.워처의 값이 변경된 경우 해당 값은 UI에서 다시 렌더링됩니다.모든 Watchers를 실행함으로써 Angular는JS는 기본적으로 변경을 가할 필요가 있는 장소를 찾고 있습니다.이러한 워처를 실행하는 프로세스를 더티 체크라고 합니다.

리액션은 다른 접근방식을 취합니다.React 구성요소에 상태 변화가 있을 때마다 변경할 위치를 찾는 대신(예: Angular)JS) React는 (업데이트된 상태로) 전체 UI를 처음부터 다시 렌더링합니다.

하지만 리액트의 이러한 접근 방식에는 문제가 있다.전체 UI를 다시 렌더링하는 것은 전체 DOM 트리를 다시 렌더링하는 것을 의미합니다.이것은, DOM 의 갱신이 느린 프로세스이기 때문에(리플로우 및 재도장으로 인해) 문제가 됩니다.

이것이 React의 Virtual DOM이 필요한 이유입니다.Virtual DOM은 javascript 객체의 형태로 Real DOM을 표현한 것입니다.메모리에 존재하는 플레인 Javascript 객체의 트리 데이터 구조일 뿐입니다.Real DOM에 비해 Virtual DOM의 렌더링은 화면에 렌더링되지 않기 때문에 훨씬 빠릅니다(리플로우나 재도장은 불필요합니다).

그러면 Virtual DOM은 문제를 어떻게 해결할까요?앱을 로드하면 React는 Real DOM의 가상 복사본인 Virtual DOM을 만듭니다.컴포넌트의 상태가 변경될 때마다 React는 Real DOM 전체를 다시 렌더링하지 않고 (업데이트된 상태로) 완전히 새로운 Virtual DOM을 렌더링합니다.그런 다음 이전 Virtual DOM(Real DOM의 초기 복사본)과 이 새로운 Virtual DOM(상태 변경 후 렌더링됨)을 구분하여 이들 간의 변화를 확인하고 Real DOM 내의 변경만 수행합니다.이와 같이 UI 전체가 (새로운 Virtual DOM 전체를 렌더링하여) 재렌더되지만 Real DOM에서는 필요한 최소한의 변경만 수행됩니다.

따라서 "Virtual DOM React를 사용하면 업데이트가 필요한 요소만 업데이트됩니다"(내 질문의 포인트 1)라고 하는 것은 Virtual DOM React의 도움으로 자체 접근법(UI 전체를 처음부터 렌더링하는 접근법)의 한계를 극복하고 있음을 의미합니다.

이 답변은 또한 같은 개념을 설명한다.

DOM API는 전체 DOM 트리를 재렌더링하는 반면, React는 변경해야 할 DOM 트리의 부분만 재렌더링하기 때문에 React를 사용한 DOM 조작이 DOM API를 사용하는 것보다 빠르다는 답변을 본 적이 있습니다.사실이 아닙니다.최신 브라우저는 모두 변경이 필요한 DOM 트리의 부분만 업데이트할 수 있습니다.이는 브라우저의 개발자 도구에서 페인트 플래시를 사용하여 확인할 수 있습니다(이 답변과 답변 참조).DOM api가 DOM 트리 전체를 재렌더한다고 가정해도 React의 내부 코드 자체는 DOM api를 사용하여 DOM을 업데이트해야 하기 때문에 이 추론은 여전히 잘못된 것입니다.DOM api가 DOM 트리 전체를 다시 렌더링한 경우 React는 DOM api를 사용하여 DOM 트리를 업데이트하기 때문에 DOM 트리 전체를 다시 렌더링합니다.

 
두 번째 포인트는 React를 통해 일괄 처리가 용이해집니다.

React에서는 Real DOM에서 읽기가 실행되는 동안 Real DOM에서는 쓰기(상태 변경)가 수행되지 않습니다.대신 쓰기가 대기열에 들어갑니다.모든 읽기 및 쓰기가 처리되면 쓰기를 기반으로 새로운 Virtual DOM이 구축됩니다.그런 다음 이전 Virtual DOM과 새 Virtual DOM 간에 분산을 수행하고 React는 Real DOM에 필요한 변경 내용을 기록합니다.따라서 Real DOM 상의 모든 쓰기가 단일 리플로우에서 함께 수행됩니다.

그러나 React 없이 수동으로 코드를 작성할 수도 있습니다.이것에 의해, 우선 모든 읽기가 완료되고 나서 모든 쓰기가 완료됩니다.React를 사용하면 읽기 및 쓰기를 함께 수행할 필요가 없고 React가 자동으로 쓰기를 일괄 처리할 수 있기 때문에 React를 사용하면 배치 작업이 쉬워집니다.그래서 리액트는 일을 빠르게 만들지 않는다.그게 일을 더 쉽게 만들어요.

 
결론적으로 우리는 React가 실제로 빠르지는 않다고 말할 수 있다.그게 더 쉬워요.Pete Hunt가 이 비디오에서 말했듯이, "React는 마법이 아닙니다.C를 사용하여 어셈블러에 들어가 C 컴파일러를 이길 수 있는 것처럼 Raw DOM 연산과 DOM API 호출에 들어가 원하는 경우 React를 이길 수 있습니다.그러나 C, Java 또는 JavaScript를 사용하면 플랫폼의 세부 사항에 대해 걱정할 필요가 없기 때문에 성능이 크게 향상됩니다.React를 사용하면 성능을 고려하지 않고 애플리케이션을 구축할 수 있으며 기본 상태는 빠릅니다.

Rich Harris의 이 투고에서는 "가상 DOM이 빠르다"는 것은 속설이라고 말하고 있습니다.

React가 변경된 가상 DOM 개체를 인식하면 React는 실제 DOM에서 해당 개체만 업데이트합니다.이것에 의해, 실제의 DOM 를 직접 조작하는 것에 비해, 퍼포먼스가 큰폭으로 향상됩니다.이로 인해 React는 고성능 JavaScript 라이브러리로 두드러집니다.

배치 업데이트에 대해서:

React는 배치 업데이트 메커니즘에 따라 실제 DOM을 업데이트합니다.따라서 퍼포먼스가 향상됩니다.즉, 상태의 모든 변경에 대해 업데이트를 보내는 대신 실제 DOM에 대한 업데이트가 일괄적으로 전송됩니다.

UI 재도장은 가장 비용이 많이 드는 부분이며 React는 실제 DOM이 일괄 처리된 업데이트만 수신하여 UI를 재도장하도록 효율적으로 보장합니다.

언급URL : https://stackoverflow.com/questions/61245695/how-exactly-is-reacts-virtual-dom-faster