Oficjalna React Dokumentów stanu, że „ React.PureComponent
„s shouldComponentUpdate()
tylko płytko porównuje obiektów”i odradza to jeśli stan jest«głęboko».
Biorąc to pod uwagę, czy jest jakiś powód, dla którego należy preferować React.PureComponent
tworzenie komponentów React?
Pytania :
- czy jest jakikolwiek wpływ na wydajność w użyciu, na
React.Component
który możemy się zdecydowaćReact.PureComponent
? - Zgaduję,
shouldComponentUpdate()
żePureComponent
wykonuje tylko płytkie porównania. Jeśli tak jest, czy nie można zastosować tej metody do głębszych porównań? - „Co więcej,
React.PureComponent
„sshouldComponentUpdate()
przeskakuje prop aktualizacje dla całego komponentu poddrzewa”- Czy to znaczy, że zmiany prop są ignorowane?
Pytanie powstało z czytania na tym średnim blogu , jeśli to pomaga.
Odpowiedzi:
Główną różnicą pomiędzy
React.PureComponent
iReact.Component
toPureComponent
robi porównanie płytkie o zmianie stanu. Oznacza to, że porównując wartości skalarne, porównuje ich wartości, ale porównując obiekty, porównuje tylko odniesienia. Pomaga poprawić wydajność aplikacji.Powinieneś wybrać,
React.PureComponent
kiedy możesz spełnić którykolwiek z poniższych warunków.forceUpdate
gdy zmienią się daneJeśli używasz
React.PureComponent
, upewnij się, że wszystkie elementy potomne są również czyste.Tak, zwiększy to wydajność Twojej aplikacji (z powodu płytkiego porównania)
Zgadłeś poprawnie. Możesz go użyć, jeśli spełnisz którykolwiek z wyżej wymienionych warunków.
Tak, zmiany rekwizytów zostaną zignorowane, jeśli nie znajdzie różnicy w płytkim porównaniu.
źródło
It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.
:? DziękiState/Props should not have a hierarchy
przepraszam, czy możesz trochę wyjaśnić, co oznacza tutaj hierarchia?Component
iPureComponent
mają jedną różnicęPureComponent
jest dokładnie taki sam,Component
z wyjątkiem tego, że obsługuje tęshouldComponentUpdate
metodę.Gdy rekwizyty lub zmiany stanu
PureComponent
dokonają płytkiego porównania zarówno rekwizytów, jak i stanu.Component
z drugiej strony nie porówna aktualnych rekwizytów i stanu z kolejnymi po wyjęciu z pudełka. W związku z tym komponent będzie renderował się ponownie przy każdymshouldComponentUpdate
wywołaniu.Płytkie porównanie
Porównując poprzednie rekwizyty i stan do następnego, płytkie porównanie sprawdzi, czy prymitywy mają tę samą wartość (np. 1 równa się 1 lub czy prawda równa się prawdzie) i czy odwołania są takie same między bardziej złożonymi wartościami javascript, takimi jak obiekty i tablice.
Źródło: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81
źródło
Główną różnicą, jak widzę, jest to, że składnik ponownie się wysyła za każdym razem, gdy jego rodzic ponownie się wysyła, niezależnie od tego, czy rekwizyty i stan składnika uległy zmianie.
Z drugiej strony, czysty komponent nie zrenderuje się, jeśli jego rodzic zrenderuje, chyba że rekwizyty (lub stan) czystego komponentu ulegną zmianie.
Załóżmy na przykład, że mamy drzewo komponentów z trzypoziomową hierarchią: rodzic, dzieci i wnuki.
Gdy rekwizyty rodzica zostaną zmienione w taki sposób, że rekwizyty tylko jednego dziecka zostaną zmienione, wówczas:
Czasami jednak stosowanie czystych składników nie będzie miało żadnego wpływu. Miałem taki przypadek, gdy rodzic otrzymał rekwizyty ze sklepu redux i musiałem przeprowadzić skomplikowane obliczenia rekwizytów dla dzieci. Rodzic użył płaskiej listy do renderowania swoich dzieci.
W rezultacie za każdym razem, gdy nastąpiła nawet niewielka zmiana w magazynie redux, cała tablica z płaską listą danych dla dzieci była ponownie obliczana. Oznaczało to, że dla każdego komponentu drzewa rekwizyty były nowymi obiektami, nawet jeśli wartości się nie zmieniały.
W takim przypadku czyste komponenty nie pomagają, a wzrost wydajności można osiągnąć tylko przy użyciu zwykłych komponentów i sprawdzania w elementach potomnych, w shouldComponentUpdate, jeśli konieczne jest ponowne wyrenderowanie.
źródło