React
Występ

Podstawy - HTML DOM a wirtualny DOM

HTML DOM jest drogi

Każda strona internetowa jest wewnętrznie reprezentowana jako drzewo obiektów. Ta reprezentacja nazywa się Document Object Model . Co więcej, jest to neutralny dla języka interfejs, który umożliwia językom programowania (takim jak JavaScript) dostęp do elementów HTML.

Innymi słowy

HTML DOM to standard uzyskiwania, zmiany, dodawania lub usuwania elementów HTML.

Jednak te operacje DOM są niezwykle kosztowne .

Wirtualny DOM to rozwiązanie

Zespół Reacta wpadł na pomysł, aby wyodrębnić HTML DOM i stworzyć swój własny wirtualny DOM , aby obliczyć minimalną liczbę operacji, które musimy zastosować w HTML DOM w celu odtworzenia obecnego stanu naszej aplikacji.

Wirtualny DOM oszczędza czas od niepotrzebnych modyfikacji DOM.

Jak dokładnie?

W każdym momencie React ma stan aplikacji reprezentowany jako Virtual DOM . Za każdym razem, gdy zmienia się stan aplikacji, są to kroki, które wykonuje React w celu optymalizacji wydajności

1. Wygeneruj nowy wirtualny DOM, który reprezentuje nowy stan naszej aplikacji

2. Porównaj stary wirtualny DOM (który reprezentuje bieżący DOM HTML) z nowym wirtualnym DOM

3. Na podstawie 2. znajdź minimalną liczbę operacji, aby przekształcić stary wirtualny DOM (który reprezentuje bieżący DOM HTML) w nowy wirtualny DOM

• aby dowiedzieć się więcej na ten temat - przeczytaj algorytm różnicowy React

4. Po znalezieniu tych operacji są one mapowane na odpowiadające im operacje HTML DOM

• pamiętajcie, wirtualny DOM jest jedynie abstrakcją HTML DOM i istnieje między nimi relacja izomorficzna

5. Teraz minimalna liczba operacji, które zostały znalezione i przeniesione do ich równoważnych operacji HTML DOM , są teraz stosowane bezpośrednio w HTML DOM aplikacji, co oszczędza czas na niepotrzebnej modyfikacji DOM HTML .

Uwaga: Operacje stosowane w wirtualnym DOM są tanie, ponieważ wirtualny DOM jest obiektem JavaScript.

Algorytm różnicowy Reacta

Generowanie minimalnej liczby operacji przekształcania jednego drzewa w drugie ma złożoność w kolejności O (n ^ 3), gdzie n jest liczbą węzłów w drzewie. React opiera się na dwóch założeniach do rozwiązania tego problemu w czasie liniowym - O (n)

1. Dwa komponenty tej samej klasy wygenerują podobne drzewa, a dwa komponenty różnych klas wygenerują różne drzewa.

2. Możliwe jest zapewnienie unikalnego klucza dla elementów, który jest stabilny w różnych rendererach.

Aby zdecydować, czy dwa węzły są różne, React rozróżnia 3 przypadki

1. Dwa węzły są różne, jeśli mają różne typy.

• na przykład <div>...</div> różni się od <span>...</span>

2. Ilekroć dwa węzły mają różne klucze

• na przykład <div key="1">...</div> różni się od <div key="2">...</div>

Co więcej, poniższe informacje są kluczowe i niezwykle ważne, aby zrozumieć, jeśli chcesz zoptymalizować wydajność

Jeśli [dwa węzły] nie są tego samego typu, React nawet nie spróbuje dopasować tego, co renderują. Po prostu usunie pierwszy z DOM i wstawi drugi.

Dlatego

Jest bardzo mało prawdopodobne, że element wygeneruje DOM, który będzie wyglądał tak, jak by go wygenerował. Zamiast spędzać czas próbując dopasować te dwie struktury, React po prostu odbudowuje drzewo od zera.

Porady & Triki

Gdy dwa węzły nie są tego samego typu, React nie próbuje ich dopasować - po prostu usuwa pierwszy węzeł z DOM i wstawia drugi. Właśnie dlatego mówi pierwsza wskazówka

1. Jeśli widzisz siebie na przemian między dwiema klasami komponentów o bardzo podobnych wynikach, możesz chcieć, aby była to ta sama klasa.

2. Użyj funkcji shouldComponentUpdate, aby zapobiec ponownemu wysyłaniu składnika, jeśli na przykład wiesz, że się nie zmieni

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id; 
}

Pomiar wydajności za pomocą ReactJS

Nie możesz poprawić czegoś, czego nie możesz zmierzyć . Aby poprawić wydajność komponentów React, powinieneś być w stanie to zmierzyć. ReactJS zapewnia zabudowanych z narzędziami do pomiaru wydajności. Zaimportuj moduł react-addons-perf , aby zmierzyć wydajność

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

Możesz użyć poniższych metod z importowanego modułu Perf :

• Perf.printInclusive ()
• Perf.printExclusive ()
• Perf.printWasted ()
• Perf.printOperations ()
• Perf.printDOM ()

Najważniejszym, którego będziesz potrzebować przez większość czasu, jest Perf.printWasted() który daje tabelaryczną reprezentację zmarnowanego czasu twojego pojedynczego komponentu

Możesz zanotować kolumnę Zmarnowany czas w tabeli i poprawić wydajność komponentu, korzystając z powyższej sekcji Porady i wskazówki

Zobacz oficjalny przewodnik React i doskonały artykuł autorstwa Benchling Engg. na React Performance