3 грешке почетника које реагују које могу уништити вашу апликацију

Као Реацт програмер, сигурно ћете направити неке грешке када кодирате са оквиром. Неке од ових грешака су прилично честе. А због њихове суптилне природе, можда ће вам бити тешко да идентификујете ове проблеме да бисте отклонили грешке у апликацији.

Откријте три најчешће Реацт грешке које програмери праве. Ове грешке можете направити као почетник, средњи или напредни Реацт програмер. Али учење о њима и њиховим импликацијама помоћи ће вам да их избегнете и решите.

1. Коришћење погрешног типа функције повратног позива

Руковање догађајима је уобичајена пракса у Реацт-у, преко Моћна ЈаваСцрипт функција слушања догађаја. Можда желите да промените боју дугмета када задржите показивач миша. Можда желите да пошаљете податке обрасца серверу приликом слања. У оба ова сценарија, требало би да проследите функцију повратног позива догађају да бисте извршили жељену реакцију. Овде неки Реацт програмери праве грешке.

Размотрите следећу компоненту, на пример:

извозУобичајенофункцијаАпликација() {
функцијахандлеСубмит(е) {
 е.превентДефаулт()
конзола.Пријава(„Образац је достављен!“)
 }
функцијапринт(број) {
конзола.Пријава("Одштампај", број)
 }
функцијадуплер(број) {
повратак() => {
конзола.Пријава("двоструко", број * 2)
 }
 }
повратак (
 <>
 {/* Код ће ићи овде */}
 </>
 )
}

Овде имате три одвојене функције. Док прве две функције не враћају ништа, трећа враћа другу функцију. Морате то имати на уму јер ће то бити кључно за разумевање онога што ћете следеће учити.

Сада, прелазећи на ЈСКС, почнимо са првим и најчешћим начином на који бисте проследили функцију као руковалац догађаја:

<формуонСубмит={хандлеСубмит}>
<улазнитип="текст"име="текст"задана вриједност="почетно"/>
<дугме>прихватидугме>
форму>

Овај пример прослеђује име функције догађају преко онСубмит пропа тако да Реацт позива хандлеСубмит када пошаљете образац. Унутар хандлеСубмит-а можете приступити објекту догађаја који вам даје приступ својствима као што је евент.таргет.валуе и методе попут евент.превентДефаулт().

Други начин да се проследи функција за руковање догађајима је да је позовете унутар функције повратног позива. У суштини, онЦлицк преносите функцију која за вас позива принт():

{[1, 5, 7].Мапа((број) => {
повратак (
 штампа (број)}>
 Одштампај {нумбер}
 </button>
 )
})}

Овај метод је користан у сценаријима у којима желите да проследите локалне податке функцији. Горњи пример прослеђује сваки број функцији принт(). Ако сте користили први метод, онда не бисте могли да пренесете аргументе у функцију.

Трећи метод је где многи програмери праве много грешака. Подсетимо се да функција удвостручавања враћа другу функцију:

функцијадуплер(број) {
повратак() => {
конзола.Пријава("двоструко", број * 2)
 }
}

Сада ако сте га користили у ЈСКС-у овако:

{[1, 5, 7].Мапа((број) => {
повратак (
 дуплер (број)}>
 дупли {нумбер}
 </button>
 )
})}

У овом случају, функција из које се враћате дупло() је оно што се додељује онЦлицк-у. То је у суштини исто као да копирате враћену функцију и налепите је у онЦлицк. Ова последња метода нема ниједан случај употребе. У већини случајева, боље је да додате функцију као променљиву (први метод) или да позовете функцију унутар повратног позива (други метод).

Све три технике су важеће јер, у свим случајевима, догађају прослеђујете функцију. У Реацт-у морате бити сигурни да сте проследили функцију својству догађаја. То може бити променљива, чврсто кодирана функција (инлине) или објекат/функција која враћа другу функцију.

2. Излаз нуле током лажне провере

Када си ти условно рендеровање елемента у Реацт-у, можете користити иф...елсе изјаву или технику кратког споја. Кратки спој укључује употребу двоструког амперсанда (&&). Ако се услов пре амперсанда процењује као тачан, онда претраживач покреће код који следи амперсанда. Ако није, онда претраживач не извршава никакав код.

Кратки спој је боља техника захваљујући својој сажетој синтакси, али долази са споредним ефектом који многи програмери не примећују. Ова грешка се дешава због неразумевања тачно како ЈСКС ради са погрешним вредностима.

Размотрите следећи код:

извозУобичајенофункцијаАпликација() {
конст низ = [1, 2, 3, 4]
повратак (


 {арраи.ленгтх && (


Низ ставке:</спан> {арраи.јоин(", ")}
 </div>
 )}
 </div>
 )
}

Све док низ има нешто у себи, Реацт ће одштампати сваку ставку на страници. Ово је због низ.дужина провера враћа истиниту вредност. Али шта се дешава ако је ваш низ празан? Прво, елементи који следе ће се приказати на страници, што бисте и очекивали. Међутим, на екрану би се појавила чудна нула.

Разлог томе је тај низ.дужина враћа нулу. Вредност нула је нетачна у ЈаваСцрипт-у. А проблем је што ЈСКС приказује нулу на екрану. Друге лажне вредности као што су нулл, фалсе и ундефинед се не приказују. Ово може довести до лошег корисничког искуства јер ће се нула увек појављивати на страници. Понекад нула може бити толико мала да је чак и не приметите.

Решење је да се побринете да вратите само нулл, ундефинед или фалсе. Ово радите тако што експлицитно проверавате нулу у услову уместо да се ослањате на лажну вредност:

извозУобичајенофункцијаАпликација() {
конст низ = [1, 2, 3, 4]
повратак (


 {арраи.ленгтх !== 0 && (


Низ ставке:</спан> {арраи.јоин(", ")}
 </div>
 )}
 </div>
 )
}

Сада се вредност нула неће приказати на екрану чак ни када је низ празан.

3. Неуспех правилног ажурирања државе

Када ажурирате стање у компоненти Реацт-а, морате то да урадите како треба да бисте избегли нежељене нежељене ефекте. Најгоре грешке су оне које не доведу ниједну грешку уместо вас. Они отежавају отклањање грешака и откривање у чему је проблем. Лоша ажурирања стања обично имају тај ефекат.

Ова грешка произилази из неразумевања како да ажурирате стање када користите постојеће стање. Размотрите следећи код на пример:

извозУобичајенофункцијаАпликација() {
конст [низ, сетАрраи] = усеСтате([1, 2, 3])
функцијааддНумберТоСтарт() {
 арраи.унсхифт (број)
 сетАрраи (низ)
 }
функцијааддНумберТоЕнд() {
 арраи.унсхифт (број)
 сетАрраи (низ)
 }
повратак (
 <>
 {арраи.јоин(", ")}


 онЦлицк={() => {
 аддНумберТоСтарт(0)
 аддНумберТоЕнд(0)
конзола.лог (низ)
 }}
 >
 Додати 0 до почетка/краја
 </button>
 </>
 )
}

Ако бисте покренули горњи код, приметили бисте да су обе функције додале нулу на почетак и крај низа. Али није додао нуле у низ одштампан на страници. Можете наставити да кликнете на дугме, али кориснички интерфејс остаје исти.

То је зато што у обе функције мутирате своје стање арраи.пусх(). Реацт изричито упозорава да стање мора бити непроменљиво у Реацт-у, што значи да га уопште не можете променити. Реацт користи референтне вредности са својим стањем.

Решење је да приступите тренутном стању (цуррентАрраи), направите копију тог стања и извршите ажурирање те копије:

функцијааддНумберТоСтарт(број) {
 сетАрраи((цуррентАрраи) => {
повратак [број, ...цуррентАрраи]
 })
}
функцијааддНумберТоСтарт(број) {
 сетАрраи((цуррентАрраи) => {
повратак [...цуррентАрраи, број]
 })
}

Ово је прави метод за ажурирање стања у Реацт-у. Сада када кликнете на дугме, додаје нулу на почетак и крај низа. Али што је најважније, ажурирања ће се одмах одразити на страници.

Други важни ЈаваСцрипт концепти за Реацт

Овај чланак је покрио неке од уобичајених грешака које треба избегавати приликом кодирања у Реацт-у. Све три грешке овде обухваћене потичу од неуспеха да се правилно разуме ЈаваСцрипт. Пошто је Реацт ЈаваСцрипт оквир, биће вам потребно добро разумевање ЈаваСцрипт-а да бисте радили са Реацт-ом. То значи учење важних концепата који се највише односе на развој Реацт-а.