반응과 vue는 어떻게 렌더링되나요? React와 Vue의 렌더링 프로세스 소개

이 글에서는 주로 react와 vue의 렌더링 과정을 상세한 프로세스 다이어그램과 함께 소개합니다. 다음으로 이 글을 함께 살펴보도록 하겠습니다.

react와 vue

react의 렌더링 과정 비교입니다. Facebook에서 만든 프레임워크입니다. 가상 DOM과 새로운 js 구문-jsx를 홍보합니다. 2013년 5월에 오픈 소스로 제공되었습니다. React는 사용자 인터페이스를 구축하는 데 사용되는 JAVASCRIPT 라이브러리입니다. React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 React를 MVC의 V(뷰)라고 생각합니다.

React의 특징

1. 선언적 디자인 −React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.

2. Efficient −React는 DOM(가상 돔)을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.

3. 유연성 −React는 알려진 라이브러리 또는 프레임워크와 잘 작동합니다.

4. JSX − JSX는 JavaScript 구문의 확장입니다.

5. Components − React를 통해 컴포넌트를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용할 수 있습니다.

6. 단방향 응답 데이터 흐름 − React는 단방향 응답 데이터 흐름을 구현하여 중복을 줄입니다. 코드가 있기 때문에 기존 데이터 바인딩보다 간단합니다.

Vue 작성자 You Yuxi는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 대형 프레임워크와 달리 Vue는 아래에서 위로 레이어별로 적용되도록 설계되었습니다. Vue의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다. 반면에 최신 도구 체인 및 다양한 지원 라이브러리와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션을 위한 드라이버를 완벽하게 제공할 수 있습니다.

vue의 특징

MVVM 프레임워크, 양방향 데이터 바인딩 원칙, 데이터 기반, 구성 요소화, 경량, 간결함, 효율적, 모듈 친화적

Virtual DoM

가상 돔의 개념은 무엇입니까

Vue.js(2.x)와 React의 가장 큰 유사점 중 하나는 둘 다 'Virtual DOM'이라는 것을 사용한다는 것입니다. 소위 Virtual DOM은 기본적으로 그 이름이 의미하는 바인 가상 DOM을 의미합니다.

DOM 트리의 가상 표현. 실제 DOM 상태를 변경하는 것은 JavaScript 객체를 변경하는 것보다 훨씬 더 많은 비용이 든다는 개념을 기반으로 탄생했습니다.

Virtual DOM은 실제 DOM을 매핑하는 JavaScript 개체입니다. 요소의 상태를 변경해야 하는 경우 실제 DOM을 직접 변경하는 대신 먼저 Virtual DOM을 변경해야 합니다. 변경이 발생하면 새로운 Virtual DOM 객체가 생성되고 이전 Virtual DOM과 새 Virtual DOM 간의 차이가 계산됩니다. 이러한 차이점은 실제 DOM에 적용됩니다.

react 렌더링 프로세스

babel 변환 도구 주소: http://babeljs.io/repl/

1 React에서는 jsx를 사용하여 컴포넌트를 작성하고, 이 컴포넌트는 babel에 의해 순수 js로 변환됩니다. Preact h 함수는 이 js를 DOM 트리로 변환하고 마지막으로 Preact의 Virtual DOM 알고리즘은 가상 DOM을 실제 DOM 트리로 변환하여 애플리케이션을 구축합니다. (자세한 내용을 알고 싶다면 PHP 중국어 웹사이트React Reference Manual 칼럼을 참조하세요.)

2. 실제 가상 DOM은 위의 예보다 더 복잡하지만 본질적으로 중첩된 기본 객체입니다. 정렬. 이 JavaScript 객체에 새 항목이 추가되면 함수는 이전 가상 DOM과 새 가상 DOM의 차이를 계산하여 실제 DOM에 반영합니다. 차이를 계산하는 알고리즘은 고성능 프레임워크의 비결입니다.

파싱 프로세스 개요

React는 Virtual DOM을 사용하는 반면 Vue.js는 DOM 템플릿을 사용합니다. React에서 사용하는 Virtual DOM은 렌더링된 결과에 대해 더티 검사를 수행합니다.

vue의 렌더링 프로세스

Vue는 Virtual DOM의 차이를 더 빠르게 계산할 수 있다고 주장합니다. 이는 렌더링 프로세스 중에 각 구성 요소의 종속성을 추적하고 전체 구성 요소 트리를 다시 렌더링할 필요가 없기 때문입니다. .

프로세스 예제 다이어그램

템플릿을 컴파일한 후 Vue의 컴파일러는 이러한 템플릿을 렌더링 기능으로 컴파일합니다. 함수가 호출되면 가상 DOM 트리를 렌더링하고 반환합니다. 이 트리는 매우 가볍고 현재 인터페이스의 상태를 설명하는 역할을 합니다.

이 가상 트리를 얻은 후에는 이 가상 DOM을 실제 DOM에 실제로 적용하는 일을 담당하는 패치 기능에 넘겨줍니다. 이 프로세스에서 Vue는 렌더링 프로세스 중에 의존하는 데이터 소스를 감지하는 자체 응답 시스템을 갖추고 있습니다.

렌더링 과정에서 데이터 소스가 감지된 후 데이터 소스의 변화를 정확하게 인지할 수 있습니다. 이때 필요에 따라 다시 렌더링할 수 있습니다.

다시 렌더링한 후에는 새 트리가 생성됩니다. 새 트리와 이전 트리를 비교하면 최종적으로 실제 DOM에 적용해야 할 변경 사항을 얻을 수 있습니다. 마지막으로 패치 기능을 통해 변경 사항이 적용됩니다.

주요점은 다음과 같이 요약할 수 있다.

• 특정 데이터 속성을 사용하면 getter가 트리거되고, 이 속성은 watcher에 의해 종속성으로 기록된다.

• 전체 함수가 렌더링되면 사용된 모든 데이터 속성이 기록됩니다.

• 해당 데이터가 변경되면(예: 새 값 제공) setter가 트리거되어 해당 데이터가 변경되었음을 데이터 객체에 알립니다.

• 이때 해당 구성 요소는 데이터 종속성이 변경되어 다시 렌더링되어야 한다는 알림을 받게 됩니다.

• 해당 컴포넌트는 다시 한번 렌더링 기능을 동원하여 Virtual DOM을 생성하고 DOM 업데이트를 구현합니다.

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트React 사용자 매뉴얼 컬럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 반응과 vue는 어떻게 렌더링되나요? React와 Vue의 렌더링 프로세스 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!