Czy React Native ma „Virtual DOM”?


Ze strony wiki ReactJS o wirtualnym DOM:

React tworzy bufor struktury danych w pamięci, oblicza
wynikowe różnice, a następnie aktualizuje wyrenderowany model DOM przeglądarki
produktywnie. Pozwala to programiście pisać kod tak, jakby
renderowałby całą stronę przy każdej zmianie, podczas gdy biblioteki React
wyświetlić tylko te podskładniki, które faktycznie się zmieniają.

Innymi słowy, Virtual DOM pozwala nam poprawić wydajność, unikając bezpośredniej manipulacji DOM.
Ale co z

React Native
https://facebook.github.io/react-native/
?
Wiemy, że teoretycznie inne platformy mają własne widoki i komponenty interfejsu użytkownika. Nie ma nic o samym DOM.

Czy możemy więc powiedzieć, że React Native ma w sobie „Virtual DOM”, czy też mówimy o czymś innym?

Na przykład w specyfikacjach

Weex
https://weex-project.io/
jest

Sekcja
https://github.com/alibaba/wee ... ers-2, który opisuje metody pracy bezpośrednio z drzewem DOM. Wydaje mi się, że moglibyśmy potencjalnie pomyśleć, że React Native powinien mieć również jakieś drzewo DOM, a także warstwę abstrakcji "Virtual DOM", która jest główną ideą samego Reacta.
Więc moje pytanie brzmi:

Czy React Native ma jakiś rodzaj „wirtualnego modelu DOM” (lub reprezentacji), a jeśli tak, to w jaki sposób ten „wirtualny DOM” przekłada się na różne platformy?


UPDATE

:
Celem tego pytania jest rzucenie światła na to, jak React Native zarządza renderowaniem natywnych komponentów UI. Czy istnieje jakieś szczególne podejście, a jeśli tak, jak to się oficjalnie nazywa?

UPDATE 2

:
W tym artykule
https://github.com/acdlite/rea ... ering
opisuje nową architekturę React o nazwie

Fiber
https://github.com/acdlite/rea ... cture
co wygląda jak odpowiedź na to pytanie.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


w skrócie
>
Cóż ... w istocie tak, podobnie jak wirtualny DOM Reactjs, React-Native tworzy hierarchię drzewa, aby zdefiniować początkowy układ i tworzy różnicę tego drzewa za każdym razem, gdy układ się zmienia, aby zoptymalizować renderowanie. Tyle że React-Native zarządza aktualizacjami interfejsu użytkownika za pośrednictwem kilku warstw architektury, które ostatecznie tłumaczą sposób renderowania widoków, próbując zoptymalizować zmiany do minimum, aby zapewnić najszybsze możliwe renderowanie.

Bardziej szczegółowe wyjaśnienie
>
Aby zrozumieć, w jaki sposób reakcja natywna tworzy widoki w tle, musisz zrozumieć podstawy, dlatego wolałbym zacząć od zera

1. joga układu silnika
>
Joga
https://github.com/facebook/yoga
to wieloplatformowy silnik układu napisany w C, który implementuje Flexbox poprzez natywne powiązania widoków

(Widoki Java Android/UIKit Objective-C iOS)

.
Wszystkie obliczenia układu różnych widoków, tekstów i obrazów w React-Native są wykonywane za pomocą jogi, jest to w zasadzie ostatni krok przed wyświetleniem naszych widoków na ekranie

2. drzewo cienia/węzły cienia
>
Gdy reakcja-native wysyła polecenia do renderowania układu, grupa węzłów-cienia jest tworzona w celu zbudowania drzewa cieni, które reprezentuje zmienną natywną stronę układu (tj. Napisane w odpowiednim języku natywnym, Java dla Androida i Objective-C dla iOS ), co następnie przekłada się na rzeczywiste występy na ekranie (za pomocą jogi).

3. ViewManager
>
ViewManger to interfejs, który wie, jak tłumaczyć typy widoków wysyłane z JavaScript do ich własnych komponentów UI.
ViewManager wie, jak utworzyć węzeł cienia, węzeł widoku niestandardowego i zaktualizować widoki.
Framework React-Native ma wiele ViewManagerów, które pozwalają na użycie własnych komponentów.
Jeśli, na przykład, kiedykolwiek zechcesz utworzyć nowy widok niestandardowy i dodać go do natywnego reagowania, wówczas widok ten musiałby zaimplementować interfejs ViewManager

4. UIManager
>
UIManager to ostatni element układanki, a właściwie pierwszy.
Deklaratywne polecenia JavaScript JSX są wysyłane do kodu maszynowego jako imperatywne polecenia, które mówią React-Native, jak pozycjonować widoki, krok po kroku iteracyjnie.
Tak więc, podczas pierwszego renderowania, UIManager wyśle ​​polecenie utworzenia wymaganych widoków i będzie nadal wysyłać różnice aktualizacji, ponieważ interfejs użytkownika aplikacji zmienia się w czasie.
Tak więc React-Native zasadniczo nadal wykorzystuje zdolność Reactjsa do obliczania różnicy między poprzednim i bieżącym widokiem renderowania i odpowiednio wysyła zdarzenia do UIManagera
Aby dowiedzieć się więcej o tym procesie, polecam poniższe

prezentacja
https://www.youtube.com/watch?v=8va9prUqjnAEmil Shelander
https://github.com/EmilSjolander
z konferencji React-Native EU 2017 we Wrocławiu
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Nie wiem, czy to jest odpowiedź na twoje pytanie, ale znalazłem ją w

oficjalne dokumenty React
https://facebook.github.io/rea ... ation
:

React tworzy i utrzymuje wewnętrzną reprezentację renderowanego interfejsu użytkownika. Obejmuje elementy reagujące ze składnikami. Ten widok pozwala Reactowi uniknąć tworzenia węzłów DOM i niepotrzebnego uzyskiwania dostępu do istniejących węzłów, ponieważ może to być wolniejsze niż operacje na obiektach JavaScript. Czasami nazywany jest „wirtualnym DOM”, ale działa dokładnie tak samo w React Native.

Więc powiedziałbym, że tak, zarządza bardzo podobnym widokiem wewnętrznym do tego używanego w React.js. Wydaje mi się, że wykorzystuje API JavaScript do renderowania natywnych widoków dokładnie tak, jak sugerowano

artykuł, który czytasz
https://medium.com/%40jiyinyiy ... s8rmb
.

Edytować
ten post
http://news.ycombinator.com/item?id=8964935
dostarczone przez

Sebasom
https://stackoverflow.com/users/1291428/sebas
w komentarzu jest również interesująca, ponieważ członek zespołu React (i React Native) mówi, że:

React Native pokazuje, że w ReactJS zawsze chodziło bardziej o „zerowy DOM” niż o „wirtualny DOM” (wbrew powszechnemu przekonaniu).

Wygląda na to, że tak zwany „React virtual DOM” jest znacznie bliższy wewnętrznej strukturze/prezentacji elementów, które można odwzorować na inne technologie niż HTML DOM.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

W tym artykule
https://github.com/acdlite/rea ... ering
opisuje nową architekturę React o nazwie

Fiber
https://github.com/acdlite/rea ... re... Wygląda na to, że jest to prawidłowa odpowiedź na temat tego, co dzieje się w React Native, a przynajmniej co React Native będzie próbował osiągnąć w najbliższej przyszłości.

DOM to tylko jeden z frameworków renderujących, do których React może renderować,
a innymi głównymi celami są natywne widoki iOS i Androida za pośrednictwem React
Ojczysty. (Dlatego określenie „wirtualny DOM” jest nieco mylące).
Powodem, dla którego może wspierać tak wiele celów, jest to, że zaprojektowano React
więc pojednanie i renderowanie to oddzielne fazy.
Aligner wykonuje zadanie ustalenia, które części drzewa
zmienił się; moduł renderujący wykorzystuje następnie te informacje do faktycznej aktualizacji
wyświetlona aplikacja.
Ta separacja oznacza, że ​​React DOM i React Native mogą używać własnych
natywne rendery, korzystające z tego samego walidatora dostarczonego przez React
core.
Światłowód na nowo definiuje mediatora.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto nadmierne uproszczenie: ReactJS generuje DOM, który może być renderowany przez przeglądarki. Jak już wiesz, wirtualny DOM pomaga ReactJS śledzić deltę tego, co się skutecznie zmieniło. W przypadku React Native na iOS ostatecznie generuje kod UIKit. To samo dotyczy React Native dla Androida, ale zamiast wyprowadzać pakiet DOM lub UI, dane wyjściowe są generowane za pomocą Android SDK. Tak więc wirtualny DOM jest tylko krokiem pośrednim. Można to traktować jako połączenie wewnętrznej struktury danych do przechowywania danych opisujących, gdzie renderować przycisk i pole tekstowe, co dzieje się po kliknięciu przycisku itd., Oraz wydajnego algorytmu do śledzenia tego, co się zmieniło. Ten sam kod może być używany na wszystkich platformach. Tylko ostatni krok jest inny. W zależności od platformy ma kod, który generuje kod DOM, UIKit lub jakikolwiek inny plik lib UI Androida.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się