Przetłumaczona wersja artykułu Kenta C. Doddsa
NOTKA: Zanim zaczniemy, chciałbym mieć pewność, że wiesz, kiedy Twój kontekst wymaga optymalizacji:
- Wartości często się zmieniają.
- Twój kontekst ma wielu konsumentów.
- Zawracasz sobie głowę używaniem
React.memo.- Po zmierzeniu wydajności, dochodzisz do wniosku, że potrzebujesz optymalizacji.
Jeśli te punkty opisują Twoją sytuację, czytaj dalej (nie przegap alternatywnego rozwiązania, które prawdopodobnie jest lepsze). W rzeczywistości jest ono znacznie lepsze, przerobiłem nawet ten post, by to pokazać. Jeśli chcesz zobaczyć moją poprzednią rekomendację, zajrzyj tutaj.
Uwierz mi, jeśli zamierzasz to zrobić tylko dlatego, że uważasz swój kod za zbyt wolny, nie przejmuj się. Nie żartuję. React jest naprawdę szybki, a dodanie złożoności w imię wydajności, gdy ta nie jest taka zła, po prostu marnuje Twój "budżet złożoności".
Najprostszym rozwiązaniem, by zoptymalizować kontekst jest użycie hooka useReducer zamiast useState oraz umieszczenie stanu w jednym dostawcy, a funkcji dispatch w drugim:
Nie tylko nie musisz używać w tym przypadku useMemo, ale również unikasz ponownego renderowania komponentów używających kontekstu:
Działa to tak samo, jak w przypadku mojego oryginalnego rozwiązania z useMemo, z wyjątkiem tego, że kontekst komponentu <Counter /> nie jest aktualizowany, przez co unikamy całkowicie ponownego renderowania.
Osobiście uważam, że jest to bardziej skomplikowane API, niż mogłoby być, dlatego w większości przypadków nie przejmowałbym się optymalizacją kontekstu. Ale jeśli naprawdę tego potrzebujesz, zrób to tak, by jak najprościej obejść problem.
Rozdzielenie stanu i dispatch bywa irytujące
Niektórzy uważają to za denerwujące:
const state = useCountState()
const dispatch = useCountDispatch()
Mówią: "nie można tego zrobić po prostu tak?"
const [state, dispatch] = useCount()
Oczywiście, że można:
function useCount() {
return [useCountState(), useCountDispatch()]
}
Pamiętaj tylko, że każdy komponent używający tego, traci korzyści związane z wydajnością, jeśli tak naprawdę potrzebuje jednej z tych rzeczy.
Sprawdź również: React Context - jak efektywnie go używać?
Top comments (0)