React Native에는 '가상 DOM'이 있습니까?

React Native에는 '가상 DOM'이 있습니까?

리액트로부터가상 DOM에 대한 JS Wiki 페이지:

React는 메모리 내 데이터 구조 캐시를 생성하여 그 차이를 계산하고 브라우저에 표시되는 DOM을 효율적으로 업데이트합니다.이렇게 하면 프로그래머는 각 변경에 대해 페이지 전체가 렌더링되는 것처럼 코드를 작성할 수 있습니다.반면 리액트 라이브러리는 실제로 변경되는 하위 구성요소만 렌더링합니다.

즉, Virtual DOM을 사용하면 DOM을 사용한 직접적인 조작을 회피함으로써 퍼포먼스를 향상시킬 수 있습니다.

리액트 네이티브는?

이론적으로 다른 플랫폼에는 네이티브 뷰와 UI 컴포넌트가 있습니다.DOM 자체에는 아무것도 없습니다.React Native에 "Virtual DOM"이 있다고 할 수 있습니까?아니면 다른 것에 대해 이야기하고 있는 건가요?

예를 들어 Weex 사양에는 DOM 트리를 직접 사용하는 방법을 설명하는 섹션이 있습니다.리액트 네이티브도 일종의 DOM 트리와 리액트 자체의 주요 아이디어인 "Virtual DOM" 추상화 레이어를 가져야 한다고 생각할 수 있습니다.

제 질문은 다음과 같습니다.

React Native는 일종의 "Virtual DOM"(또는 그 표현)을 가지고 있습니까?그렇다면 이 "Virtual DOM"은 어떻게 다양한 플랫폼에 이식됩니까?

갱신:

이 질문의 목적은 React Native가 네이티브 UI 컴포넌트의 렌더링을 관리하는 방법을 설명하는 것입니다.구체적으로 어떤 접근법이 있습니까? 있다면 공식적으로 어떻게 부르나요?

업데이트 2:

이 문서에서는 파이버라고 불리는 새로운 React 아키텍처에 대해 설명합니다.이 아키텍처는 이 질문에 대한 답변으로 보입니다.

요컨대

기본적으로는 Reactjs의 Virtual DOM과 마찬가지로 React-Native는 초기 레이아웃을 정의하는 트리 계층을 생성하고 각 레이아웃 변경에 해당 트리의 차이를 생성하여 렌더링을 최적화합니다.React-Native는 몇 가지 아키텍처 계층을 통해 UI 업데이트를 관리하며, 최종적으로 뷰 렌더링 방법을 번역하면서 가능한 한 빠른 렌더링을 위해 변경 사항을 최적화하려고 합니다.

자세한 설명

네이티브가 백그라운드에서 어떻게 뷰를 생성하는지 이해하기 위해서는 기본을 이해해야 합니다.그러기 위해서는 처음부터 다시 시작하고 싶습니다.

1. 요가 레이아웃 엔진

Yoga는 C로 작성된 크로스 플랫폼 레이아웃 엔진으로 네이티브 뷰(Java Android Views/Objective-C iOS UIKit)와의 바인딩을 통해 Flexbox를 구현합니다.

리액트 네이티브의 다양한 뷰, 텍스트, 이미지의 레이아웃 계산은 모두 요가를 통해 이루어집니다.이것은 기본적으로 우리의 뷰가 화면에 표시되기 전의 마지막 단계입니다.

2. 섀도우 트리 / 섀도우 노드

리액트 네이티브가 레이아웃을 렌더링하는 명령을 전송하면 섀도 노드 그룹이 조립되어 레이아웃의 가변 네이티브 측(즉, 대응하는 네이티브 언어, Android용 Java 및 iOS용 Objective-C)을 나타내는 섀도 트리가 구축되며, 이 섀도 트리는 (요가를 사용하여) 화면의 실제 뷰로 변환됩니다.

3. View Manager

ViewManger는 JavaScript에서 전송되는 View Types를 네이티브 UI 컴포넌트로 변환하는 방법을 알고 있는 인터페이스입니다.ViewManager는 섀도 노드, 네이티브 뷰 노드를 생성하고 뷰를 업데이트하는 방법을 알고 있습니다.React-Native 프레임워크에는 네이티브 구성 요소를 사용할 수 있는 ViewManager가 많이 있습니다.예를 들어 언젠가 새로운 커스텀 뷰를 생성하여 react-native에 추가하려면 해당 뷰에서 ViewManager 인터페이스를 구현해야 합니다.

4. UIManager

UIManager는 퍼즐의 마지막 조각, 또는 실제로 첫 조각입니다.JavaScript JSX 선언 명령어는 React-Native에 뷰 레이아웃 방법을 단계별로 알려주는 명령어로 네이티브에 전송됩니다.따라서 UIManager는 첫 번째 렌더로서 필요한 뷰를 생성하기 위한 명령을 디스패치하고 시간이 지남에 따라 앱의 UI가 변화함에 따라 업데이트 diff를 계속 전송합니다.

따라서 React-Native는 기본적으로 이전 렌더링 표현과 현재 렌더링 표현 간의 차이를 계산하는 Reactjs의 기능을 사용하고 그에 따라 이벤트를 UIManager로 디스패치합니다.

프로세스에 대해 좀 더 자세히 알기 위해 브로츠와프에서 개최된 React-Native EU 2017 Conference의 Emil Sjölander에 의한 다음 프레젠테이션을 추천합니다.

이것이 당신의 질문에 대한 답변인지는 모르겠지만, 저는 공식 React 문서에서 이것을 발견했습니다.

React는 렌더링된 UI의 내부 표현을 빌드하고 유지합니다.컴포넌트에서 반환되는 React 요소가 포함됩니다.이 표현을 사용하면 JavaScript 객체에서의 작업보다 속도가 느릴 수 있기 때문에 React는 DOM 노드를 생성하거나 기존 노드에 액세스하는 것을 피할 수 있습니다."가상 DOM"이라고도 하지만 React Native에서도 동일하게 작동합니다.

네, React.js에서 사용되는 것과 매우 유사한 내부 표현을 관리합니다.그리고 당신이 읽은 기사에서 제시한 것처럼 Javascript API를 사용하여 네이티브 뷰를 렌더링할 수 있을 것입니다.

편집 Sebas가 코멘트로 제공하는 이 투고는 React(및 React Native) 팀원이 다음과 같이 말하고 있기 때문에 흥미롭다.

React Native는 React가JS는 항상 "가상 DOM"보다는 "제로 DOM"에 가까웠습니다(일반적인 믿음과는 반대).

이른바 'React virtual DOM'은 HTML DOM보다는 다양한 기술에 매핑할 수 있는 요소의 내부 구조/표현에 훨씬 가까운 것으로 보입니다.

이 문서에서는 파이버라고 불리는 새로운 React 아키텍처에 대해 설명합니다.React Native에서 무슨 일이 일어나고 있는지, 또는 최소한 가까운 장래에 React Native가 무엇을 달성하려고 하는지에 대한 정답인 것 같습니다.

DOM은 React가 렌더링할 수 있는 렌더링 환경 중 하나일 뿐이며, 다른 주요 타깃은 React Native를 통한 iOS 및 Android 뷰입니다(이 때문에 "가상 DOM"은 다소 잘못된 명칭입니다).

이렇게 많은 대상을 지원할 수 있는 이유는 React가 조정과 렌더링을 분리하도록 설계되었기 때문입니다.조정자는 트리의 어떤 부분이 변경되었는지 계산하는 작업을 수행합니다. 그런 다음 렌더러는 해당 정보를 사용하여 렌더링된 앱을 실제로 업데이트합니다.

이 분리를 통해 React DOM과 React Native는 React core에서 제공하는 동일한 조정자를 공유하면서 자체 렌더러를 사용할 수 있습니다.

파이버는 조정자를 재생합니다.

과잉 심플화를 다음에 나타냅니다.ReactJS는 브라우저를 렌더링할 수 있는 DOM을 출력합니다.이미 알고 있듯이 가상 DOM은 대응에 도움이 됩니다.JS는 변경 사항의 델타를 효율적으로 추적합니다.React Native for iOS의 경우 최종적으로 UIKit 코드를 출력합니다.React Native for Android도 마찬가지지만 DOM 또는 UI Kit를 출력하는 대신 Android SDK를 사용하여 출력이 생성됩니다.따라서 가상 DOM은 중간 단계일 뿐입니다.내부 데이터 구조의 조합으로 버튼과 텍스트 상자를 렌더링하는 위치, 버튼을 탭할 때 발생하는 작업 등을 설명하는 데이터와 변경된 내용을 추적하는 효율적인 알고리즘이 있습니다.모든 플랫폼에 동일한 코드를 사용할 수 있습니다.마지막 단계만 다릅니다.플랫폼에 따라서는 DOM, UIKit 코드, 또는 Android UI lib라고 불리는 이름을 생성하는 코드를 가지고 있습니다.

언급URL : https://stackoverflow.com/questions/41804855/does-react-native-have-a-virtual-dom