2016-07-14 11 views
10

Wiem, że kluczowym punktem optymalizacji React jest użycie haka cyklu życia w celu sprawdzenia aktualnego stanu/rekwizytów względem następnego/stanu rekwizytów.Optymalizacja reakcji bezstanowych, funkcjonalnych komponentów za pomocą funkcji shouldComponentUpdate

Jeśli tworzę aplikację React, używając głównie funkcjonalnych komponentów, a nie opartych na klasach, stanowych komponentów (które mają dostęp do haseł cyklu życia), czy rezygnuję z tej konkretnej optymalizacji? Czy mogę przeprowadzić podobną kontrolę wewnątrz składnika funkcjonalnego?

+0

Nie można wykonać podobnego sprawdzenia w bezpaństwowych komponentach funkcjonalnych, ponieważ daje to ten sam rezultat z tymi samymi podpórkami/stanem. I nie ma dostępu do nextProps/nextState. –

+0

Czy to oznacza, że ​​składniki bezstanowe rezygnują z tej optymalizacji? Czy są one mniej skuteczne? – Himmel

+0

@ Himml Brakuje mi odpowiedzi na twoje pytanie. Dałem sobie jeszcze jedną szansę! :-) – Timo

Odpowiedz

10

bezpaństwowe elementy są kandydatami do optymalizacji w przyszłości i docs wskazywać na to bez wchodzenia w szczegóły:

W idealnym świecie, większość komponentów będzie funkcje bezpaństwowców, ponieważ w przyszłości będziemy również być w stanie dokonać optymalizacji wydajności charakterystycznych dla tych komponentów, unikając niepotrzebnych kontroli i przydziałów pamięci. Jest to zalecany wzór, o ile to możliwe.

Source


Obecnie jednak, bezpaństwowe składniki nie zoptymalizować wydajność pomijając proces renderowania gdy podpory są niezmienione. Zostało to potwierdzone przez członków zespołu reakcji:

przypadku skomplikowanych elementów, określających shouldComponentUpdate będzie zazwyczaj przekraczać wzrost wydajności bezstanowych składników (na przykład czysty renderowania.). Zdania w dokumentach podpowiadają nam pewne przyszłe optymalizacje, które zaplanowaliśmy, dzięki czemu nie będziemy alokować wewnętrznej instancji dla bezpaństwowych komponentów funkcjonalnych (po prostu wywołasz tę funkcję). Możemy również nie utrzymywać rekwizytów itp. Małe optymalizacje. Nie mówimy o szczegółach w dokumentach, ponieważ optymalizacje nie zostały jeszcze zaimplementowane (bezstanowe komponenty otwierają drzwi do tych optymalizacji).

[...]

Istnieją dyskusje o konieczności pureRender flag, które można ustawić na funkcję, lub pozostawienie go do udziału w cyklu shouldUpdate, ale to nie jest obecnie realizowany. W tej chwili funkcje bezpaństwowe nie mogą być czysto renderowane.

Warto pamiętać, że czasami ludzie nadużywają/nadużywają czystej formy; czasem może być tak samo lub droższy niż ponowne uruchamianie renderowania, ponieważ przeprowadzasz iterację w szeregach rekwizytów i potencjalnie robisz takie rzeczy, jak porównania łańcuchów, co jest po prostu dodatkową pracą dla komponentów, które ostatecznie zwracają wartość true, a następnie kontynuują ponowne wysyłanie. PureRender/shouldComponentUpdate jest naprawdę uważany za lukę bezpieczeństwa dla wydajności i niekoniecznie jest czymś, co powinno być ślepo stosowane do każdego komponentu.

Source


Moja wynos z tej dyskusji jest to, że w niektórych przypadkach skomplikowanych elementów, wydajność może być zwiększona poprzez wdrożenie shouldComponentUpdate w stosunku do obywatelstwa komponentów. Z drugiej strony, zdecydowanie zastanawiałbym się, czy korzyści w zakresie wydajności są na tyle znaczące, aby przeważyć nad dodatkową złożonością i większym zasięgiem komponentu.

Powiązane problemy