Spłaszczanie Widoków

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

ostrzeżenie

Ten dokument odnosi się do Nowej Architektury, która jest obecnie w trakcie wdrażania.

Spłaszczanie Widoków to optymalizacja w rendererze React Native zapobiegająca głębokim drzewom układu.

API Reacta jest zaprojektowane jako deklaratywne i wielokrotnie użytkowe dzięki kompozycji. To zapewnia doskonały model intuicyjnego tworzenia aplikacji. Jednak w praktyce te cechy API prowadzą do tworzenia głębokich Drzew Elementów React, gdzie większość węzłów tylko wpływa na układ Widoku bez renderowania czegokolwiek na ekranie. Nazywamy te węzły „Tylko do układu”.

Koncepcyjnie każdy węzeł Drzewa Elementów React ma relację 1:1 z widokiem na ekranie. Dlatego renderowanie głębokiego drzewa z dużą ilością węzłów „tylko do układu” prowadzi do obniżenia wydajności podczas renderowania.

Oto typowy przypadek, na który wpływa koszt widoków "tylko do układu".

Wyobraź sobie, że chcesz wyrenderować obraz i tytuł obsługiwany przez TitleComponent, umieszczając go jako dziecko ContainerComponent z marginesami. Po rozbiciu na komponenty kod Reacta wyglądałby tak:

jsx

function MyComponent() {
  return (
    <View>                          // ReactAppComponent
      <View style={{margin: 10}} /> // ContainerComponent
        <View style={{margin: 10}}> // TitleComponent
          <Image {...} />
          <Text {...}>This is a title</Text>
        </View>
      </View>
    </View>
  );
}

W trakcie procesu renderowania React Native utworzy następujące drzewa:

Zauważ, że Widoki (2) i (3) to widoki „tylko do układu” – renderują się na ekranie, ale jedynie dodają margin 10 px nad swoimi dziećmi.

Aby poprawić wydajność takich drzew elementów, renderer implementuje mechanizm Spłaszczania Widoków, który scala te typy węzłów, redukując głębokość hierarchii widoku hosta renderowanej na ekranie. Algorytm uwzględnia właściwości jak: margin, padding, backgroundColor, opacity itp.

Algorytm Spłaszczania Widoków jest zintegrowany z etapem różnicowania renderera, co oznacza że nie zużywamy dodatkowych cykli CPU na optymalizację. Jak całe jądro, algorytm jest zaimplementowany w C++, a jego korzyści są domyślnie dostępne na wszystkich platformach.

W naszym przykładzie Widoki (2) i (3) zostałyby spłaszczone podczas „algorytmu różnicowania”, a ich style scalone z Widokiem (1):

Kluczowe jest, że ta optymalizacja pozwala rendererowi uniknąć tworzenia i renderowania dwóch widoków hosta. Dla użytkownika nie ma widocznych zmian na ekranie.