React to popularny framework, którego łatwo się nauczyć, ale jeśli nie będziesz ostrożny, łatwo popełnić błędy.
Jako programista React na pewno popełnisz kilka błędów podczas kodowania w tym frameworku. Niektóre z tych błędów są dość powszechne. A ze względu na ich subtelną naturę zidentyfikowanie tych problemów w celu debugowania aplikacji może być trudne.
Poznaj trzy najczęstsze błędy React popełniane przez programistów. Możesz popełnić te błędy jako początkujący, średniozaawansowany lub zaawansowany programista React. Ale poznanie ich i ich implikacji pomoże ci ich uniknąć i rozwiązać.
1. Używanie niewłaściwego typu funkcji wywołania zwrotnego
Obsługa zdarzeń jest powszechną praktyką w React, za pośrednictwem Potężna funkcja nasłuchiwania zdarzeń JavaScript. Może chcesz zmienić kolor przycisku po najechaniu na niego myszą. Może chcesz wysłać dane formularza na serwer po przesłaniu. W obu tych scenariuszach musisz przekazać zdarzeniu funkcję wywołania zwrotnego, aby wykonać żądaną reakcję. W tym miejscu niektórzy programiści React popełniają błędy.
Rozważmy na przykład następujący składnik:
eksportdomyślnyfunkcjonowaćAplikacja() {
funkcjonowaćuchwytPrześlij(mi) {
e.preventDefault()
konsola.dziennik("Formularz przesłany!")
}funkcjonowaćwydrukować(numer) {
konsola.dziennik("Wydrukować", liczba)
}funkcjonowaćpodwajacz(numer) {
powrót() => {
konsola.dziennik("Podwójnie", liczba * 2)
}
}
powrót (
<>
{/* Kod trafi tutaj */}
</>
)
}
Tutaj masz trzy oddzielne funkcje. Podczas gdy dwie pierwsze funkcje nic nie zwracają, trzecia zwraca inną funkcję. Musisz o tym pamiętać, ponieważ będzie to klucz do zrozumienia, czego będziesz się uczyć w następnej kolejności.
Teraz, przechodząc do JSX, zacznijmy od pierwszego i najczęstszego sposobu przekazywania funkcji jako procedury obsługi zdarzeń:
<formularzw dniu Prześlij={uchwytPrześlij}>
<wejścietyp="tekst"nazwa="tekst"domyślna wartość="wstępny"/>
<przycisk>Składaćprzycisk>
formularz>Ten przykład przekazuje nazwę funkcji do zdarzenia za pomocą właściwości onSubmit, więc React wywołuje handleSubmit podczas wysyłania formularza. Wewnątrz handleSubmit możesz uzyskać dostęp do obiektu zdarzenia, który daje dostęp do właściwości, takich jak wartość.docelowa.zdarzenia i metody np event.preventDefault().
Drugim sposobem przekazania funkcji obsługi zdarzeń jest wywołanie jej wewnątrz funkcji wywołania zwrotnego. Zasadniczo przekazujesz onKliknij funkcję, która wywołuje dla ciebie print() :
{[1, 5, 7].mapa((numer) => {
powrót (
Ta metoda jest przydatna w scenariuszach, w których chcesz przekazać dane lokalne do funkcji. Powyższy przykład przekazuje każdą liczbę do funkcji print(). Jeśli użyłeś pierwszej metody, nie byłbyś w stanie przekazać argumentów do funkcji.
Trzecia metoda polega na tym, że wielu programistów popełnia wiele błędów. Przypomnijmy, że funkcja podwajająca zwraca inną funkcję:
funkcjonowaćpodwajacz(numer) {
powrót() => {
konsola.dziennik("Podwójnie", liczba * 2)
}
}Teraz, jeśli użyłeś go w JSX w ten sposób:
{[1, 5, 7].mapa((numer) => {
powrót (
W tym przypadku funkcja, z której wracasz podwójnie() jest tym, co zostaje przypisane do onClick. Zasadniczo jest to to samo, co kopiowanie zwróconej funkcji i wklejanie jej w wierszu w onClick. Ta ostatnia metoda nie ma żadnego przypadku użycia. W większości przypadków lepiej jest dodać funkcję jako zmienną (pierwsza metoda) lub wywołać funkcję wewnątrz wywołania zwrotnego (druga metoda).
Wszystkie trzy techniki są poprawne, ponieważ we wszystkich przypadkach przekazujesz funkcję do zdarzenia. W React musisz upewnić się, że przekazujesz funkcję do właściwości zdarzenia. Może to być zmienna, zakodowana na stałe funkcja (wbudowana) lub obiekt/funkcja, która zwraca inną funkcję.
2. Wyprowadzanie zera podczas fałszywego sprawdzenia
Kiedy jesteś warunkowe renderowanie elementu w React, możesz użyć instrukcji if...else lub techniki zwarcia. Zwarcie wymaga użycia podwójnego ampersandu (&&). Jeśli warunek przed znakiem ampersand ma wartość true, przeglądarka uruchamia kod następujący po znaku ampersand. Jeśli nie, przeglądarka nie wykonuje żadnego kodu.
Zwarcie jest lepszą techniką dzięki zwięzłej składni, ale ma efekt uboczny, którego wielu programistów nie zauważa. Ten błąd występuje z powodu niezrozumienia dokładnie, jak JSX działa z fałszywymi wartościami.
Rozważ następujący kod:
eksportdomyślnyfunkcjonowaćAplikacja() {
konst tablica = [1, 2, 3, 4]
powrót (
{tablica.długość && (
Szyk pozycje:</span> {tablica.join(", ")}
</div>
)}
</div>
)
}
Dopóki tablica ma coś w sobie, React wydrukuje każdy element na stronie. Dzieje się tak z powodu długość.tablicy check zwraca prawdziwą wartość. Ale co się stanie, jeśli twoja tablica jest pusta? Po pierwsze, kolejne elementy zostaną wyświetlone na stronie, czego można się spodziewać. Jednak na ekranie pojawi się dziwne zero.
Powodem tego jest to długość.tablicy zwraca zero. Wartość zero jest fałszywa w JavaScript. Problem polega na tym, że JSX renderuje zero na ekranie. Inne fałszywe wartości, takie jak null, false i undefined, nie są renderowane. Może to prowadzić do złego doświadczenia użytkownika, ponieważ na stronie zawsze pojawi się zero. Czasami zero może być tak małe, że nawet go nie zauważysz.
Rozwiązaniem jest upewnienie się, że zwracane są tylko wartości null, undefined lub false. Robisz to, jawnie sprawdzając zero w warunku, zamiast polegać na fałszywej wartości:
eksportdomyślnyfunkcjonowaćAplikacja() {
konst tablica = [1, 2, 3, 4]
powrót (
{tablica.długość !== 0 && (
Szyk pozycje:</span> {tablica.join(", ")}
</div>
)}
</div>
)
}
Teraz wartość zero nie będzie wyświetlana na ekranie, nawet jeśli tablica jest pusta.
3. Nieprawidłowa aktualizacja stanu
Kiedy aktualizujesz stan w komponencie React, musisz zrobić to poprawnie, aby uniknąć niepożądanych efektów ubocznych. Najgorsze błędy to te, które nie rzucają za ciebie żadnych błędów. Utrudniają debugowanie i ustalenie, na czym polega problem. Słabe aktualizacje stanu mają zwykle taki efekt.
Ten błąd wynika z niezrozumienia, jak zaktualizować stan, gdy używasz istniejącego stanu. Rozważmy na przykład następujący kod:
eksportdomyślnyfunkcjonowaćAplikacja() {
konst [tablica, ustawtablicę] = useState([1, 2, 3])funkcjonowaćdodaj numer do startu() {
array.unshift (liczba)
setArray (tablica)
}funkcjonowaćdodaj liczbę do końca() {
array.unshift (liczba)
setArray (tablica)
}
powrót (
<>
{tablica.join(", ")}
onClick={() => {
dodajLiczbęDoPoczątku(0)
dodajLiczbęDoKońca(0)
konsola.log (tablica)
}}
>
Dodać 0 do początku/końca
</button>
</>
)
}
Gdybyś uruchomił powyższy kod, zauważyłbyś, że obie funkcje dodały zero na początku i na końcu tablicy. Ale nie dodał zer do tablicy wydrukowanej na stronie. Możesz nadal klikać przycisk, ale interfejs użytkownika pozostaje taki sam.
Dzieje się tak dlatego, że w obu funkcjach mutujesz swój stan tablica.push(). React wyraźnie ostrzega, że stan musi być niezmienny w React, co oznacza, że nie można go w ogóle zmienić. React używa wartości referencyjnych ze swoim stanem.
Rozwiązaniem jest uzyskanie dostępu do bieżącego stanu (currentArray), utworzenie kopii tego stanu i dokonanie aktualizacji tej kopii:
funkcjonowaćdodaj numer do startu(numer) {
ustaw tablicę((bieżąca tablica) => {
powrót [liczba, ...bieżącatablica]
})
}
funkcjonowaćdodaj numer do startu(numer) {
ustaw tablicę((bieżąca tablica) => {
powrót [...bieżąca tablica, liczba]
})
}
To właściwa metoda aktualizacji stanu w React. Teraz kliknięcie przycisku dodaje zero na początku i na końcu tablicy. Ale co najważniejsze, aktualizacje zostaną natychmiast odzwierciedlone na stronie.
Inne ważne koncepcje JavaScript dla React
W tym artykule omówiono niektóre typowe błędy, których należy unikać podczas kodowania w React. Wszystkie trzy omówione tutaj błędy wynikają z niewłaściwego zrozumienia języka JavaScript. Ponieważ React jest frameworkiem JavaScript, będziesz potrzebować solidnego zrozumienia JavaScript, aby pracować z React. Oznacza to poznanie ważnych pojęć, które najbardziej wiążą się z programowaniem w React.
