Przejdź do treści głównej
Wersja: 0.77

Bezpośrednia manipulacja

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 →

Czasami konieczne jest wprowadzanie zmian bezpośrednio w komponencie bez użycia stanu/propsów do wywołania ponownego renderowania całego poddrzewa. Podczas używania Reacta w przeglądarce czasami trzeba bezpośrednio modyfikować węzeł DOM, podobnie jest z widokami w aplikacjach mobilnych. setNativeProps jest w React Native odpowiednikiem bezpośredniego ustawiania właściwości na węźle DOM.

ostrzeżenie

Używaj setNativeProps tylko wtedy, gdy częste ponowne renderowanie tworzy wąskie gardło wydajności!

Bezpośrednia manipulacja nie będzie narzędziem, po które sięgasz często. Zazwyczaj używa się jej tylko do tworzenia płynnych animacji, aby uniknąć narzutu związanego z renderowaniem hierarchii komponentów i uzgadnianiem wielu widoków. setNativeProps działa imperatywnie i przechowuje stan w warstwie natywnej (DOM, UIView itp.), a nie w komponentach Reacta, co utrudnia analizę kodu.

Zanim jej użyjesz, spróbuj rozwiązać problem za pomocą setState i shouldComponentUpdate.

Użycie setNativeProps do edycji wartości TextInput​

Innym bardzo częstym przypadkiem użycia setNativeProps jest edycja wartości TextInput. Właściwość controlled w TextInput czasami może gubić znaki, gdy bufferDelay jest niskie, a użytkownik pisze bardzo szybko. Niektórzy deweloperzy wolą całkowicie pominąć tę właściwość i zamiast tego używać setNativeProps do bezpośredniej manipulacji wartością TextInput w razie potrzeby.

Na przykład poniższy kod demonstruje edycję wprowadzanego tekstu po naciśnięciu przycisku:

Metodę clear możesz użyć do wyczyszczenia TextInput, która również wykorzystuje to podejście.

Unikanie konfliktów z funkcją renderującą​

Jeśli zaktualizujesz właściwość, która jest również zarządzana przez funkcję renderującą, może to prowadzić do nieprzewidywalnych błędów. Podczas ponownego renderowania komponentu zmiana tej właściwości spowoduje nadpisanie wartości ustawionej przez setNativeProps.