3 грешки на React за начинаещи, които могат да съсипят приложението ви

Като разработчик на React вие сте длъжни да направите някои грешки, когато кодирате с рамката. Някои от тези грешки са доста често срещани. И поради тяхната фина природа, може да ви е трудно да идентифицирате тези проблеми, за да отстраните грешки в приложението си.

Открийте три от най-често срещаните грешки в React, които разработчиците правят. Можете да направите тези грешки като начинаещ, средно ниво или напреднал React разработчик. Но научаването за тях и техните последствия ще ви помогне да ги избегнете и разрешите.

1. Използване на грешен тип функция за обратно извикване

Обработката на събития е обичайна практика в React, чрез Мощната функция на JavaScript за слушане на събития. Може би искате да промените цвета на бутон, когато го задържите. Може би искате да изпратите данни от формуляра до сървъра при изпращане. И в двата сценария ще трябва да предадете функция за обратно извикване към събитието, за да изпълните желаната реакция. Това е мястото, където някои разработчици на React правят грешки.

Помислете например за следния компонент:

износпо подразбиранефункцияПриложение() {
функцияhandleSubmit(д) {
 e.preventDefault()
конзола.log(„Формулярът е изпратен!“)
 }
функцияпечат(номер) {
конзола.log("Печат", номер)
 }
функцияудвоител(номер) {
връщане() => {
конзола.log("двойно", номер * 2)
 }
 }
връщане (
 <>
 {/* Кодът ще влезе тук */}
 </>
 )
}

Тук имате три отделни функции. Докато първите две функции не връщат нищо, третата връща друга функция. Трябва да го имате предвид, защото ще бъде от ключово значение за разбирането на това, което ще научите след това.

Сега, преминавайки към JSX, нека започнем с първия и най-често срещан начин, по който бихте предали функция като манипулатор на събития:

<формаonSubmit={handleSubmit}>
<входТип="текст"име="текст"стойност по подразбиране="начален"/>
<бутон>Изпращанебутон>
форма>

Този пример предава името на функцията на събитието чрез подложката onSubmit, така че React извиква handleSubmit, когато изпратите формуляра. Вътре в handleSubmit можете да получите достъп до обекта на събитието, който ви дава достъп до свойства като event.target.value и методи като event.preventDefault().

Вторият начин за предаване на функция за обработка на събития е да я извикате във функцията за обратно извикване. По същество вие предавате на Click функция, която извиква print() вместо вас:

{[1, 5, 7].map((номер) => {
връщане (
 печат (число)}>
 Отпечатайте {номер}
 </button>
 )
})}

Този метод е полезен в сценарии, при които искате да предадете локални данни към функцията. Горният пример предава всяко число на функцията print(). Ако сте използвали първия метод, тогава няма да можете да подадете аргументи във функцията.

Третият метод е, когато много разработчици правят много грешки. Спомнете си, че функцията за удвояване връща друга функция:

функцияудвоител(номер) {
връщане() => {
конзола.log("двойно", номер * 2)
 }
}

Сега, ако сте го използвали в JSX така:

{[1, 5, 7].map((номер) => {
връщане (
 удвоител (число)}>
 Двойно {номер}
 </button>
 )
})}

В този случай функцията, от която се връщате двойно () е това, което се присвоява на onClick. По същество е същото като копирането на върнатата функция и поставянето й вградено в onClick. Този последен метод няма случай на употреба. Повечето пъти е по-добре да добавите функцията като променлива (първи метод) или да извикате функцията в обратно извикване (втори метод).

И трите техники са валидни, защото във всички случаи вие предавате функция на събитието. В React трябва да сте сигурни, че предавате функция на свойство на събитие. Може да е променлива, твърдо кодирана функция (вградена) или обект/функция, която връща друга функция.

2. Извеждане на нула по време на фалшива проверка

Когато си условно изобразяване на елемент в React, можете да използвате оператор if...else или техниката на късо съединение. Късото съединение включва използването на двойния амперсанд (&&). Ако условието преди амперсанда е вярно, тогава браузърът изпълнява кода след амперсанда. Ако не, тогава браузърът не изпълнява никакъв код.

Късото съединение е по-добрата техника благодарение на краткия си синтаксис, но идва със страничен ефект, който много разработчици не забелязват. Тази грешка възниква поради неразбиране как точно работи JSX с фалшиви стойности.

Разгледайте следния код:

износпо подразбиранефункцияПриложение() {
конст масив = [1, 2, 3, 4]
връщане (


 {array.length && (


Масив елементи:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Докато масивът има нещо вътре в него, React ще отпечата всеки елемент на страницата. Това се дължи на масив.дължина проверката връща вярна стойност. Но какво се случва, ако масивът ви е празен? Първо, следващите елементи ще се покажат на страницата, което очаквате. Въпреки това ще намерите странна нула, която се показва на екрана ви.

Причината за това е, че масив.дължина връща нула. Стойността нула е фалшива в JavaScript. И проблемът е, че JSX изобразява нула на екрана. Други фалшиви стойности като null, false и undefined не се изобразяват. Това може да доведе до лошо потребителско изживяване, тъй като на страницата винаги ще се показва нула. Понякога нулата може да е толкова малка, че дори да не я забележите.

Решението е да се уверите, че връщате само null, undefined или false. Вие правите това, като изрично проверявате нула в условието, вместо да разчитате на фалшива стойност:

износпо подразбиранефункцияПриложение() {
конст масив = [1, 2, 3, 4]
връщане (


 {array.length !== 0 && (


Масив елементи:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Сега стойността нула няма да се показва на екрана дори когато масивът е празен.

3. Неуспешно актуализиране на състоянието правилно

Когато актуализирате състоянието в компонент на React, трябва да го направите правилно, за да избегнете нежелани странични ефекти. Най-лошите грешки са тези, които не хвърлят никакви грешки вместо вас. Те затрудняват отстраняването на грешки и откриването какъв е проблемът. Лошите актуализации на състоянието обикновено имат този ефект.

Тази грешка произтича от неразбиране как да актуализирате състоянието, когато използвате съществуващото състояние. Разгледайте например следния код:

износпо подразбиранефункцияПриложение() {
конст [масив, setArray] = useState([1, 2, 3])
функцияaddNumberToStart() {
 array.unshift (число)
 setArray (масив)
 }
функцияaddNumberToEnd() {
 array.unshift (число)
 setArray (масив)
 }
връщане (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
конзола.log (масив)
 }}
 >
 Добавете 0 към Начало/Край
 </button>
 </>
 )
}

Ако изпълните горния код, ще забележите, че и двете функции добавят нула към началото и края на масива. Но не е добавил нулите към масива, отпечатан на страницата. Можете да продължите да щраквате върху бутона, но потребителският интерфейс остава същият.

Това е така, защото и в двете функции вие променяте състоянието си с array.push(). React изрично предупреждава, че състоянието трябва да бъде неизменно в React, което означава, че не можете да го промените изобщо. React използва референтни стойности със своето състояние.

Решението е да получите достъп до текущото състояние (currentArray), да направите копие на това състояние и да направите своите актуализации на това копие:

функцияaddNumberToStart(номер) {
 setArray((currentArray) => {
връщане [номер, ...текущ масив]
 })
}
функцияaddNumberToStart(номер) {
 setArray((currentArray) => {
връщане [...текущ масив, число]
 })
}

Това е правилният метод за актуализиране на състоянието в React. Сега, когато щракнете върху бутона, той добавя нула към началото и края на масива. Но най-важното е, че актуализациите ще се отразят незабавно на страницата.

Други важни концепции на JavaScript за React

Тази статия обхваща някои от често срещаните грешки, които трябва да избягвате при кодиране в React. И трите грешки, описани тук, произтичат от неразбиране на JavaScript правилно. Тъй като React е рамка на JavaScript, ще ви трябва солидно разбиране на JavaScript, за да работите с React. Това означава да научите важните концепции, които са свързани най-много с разработката на React.