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

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

Научите како можете да рефакторишете свој код да бисте користили локално стање и зашто је то увек добра идеја.

Основни пример стања у Реацт-у

Ево веома једноставна шалтерска апликација то показује како се стање обично обрађује у Реацт-у:

увоз {усеСтате} из'реаговати'
увоз {Цоунтер} из'цоунтер'
функцијаАпликација(){
конст [цоунт, сетЦоунт] = усеСтате(0)
повратак<Цоунтерцоунт={цоунт}сетЦоунт={сетЦоунт} />
}
извозУобичајено Апликација

У редовима 1 и 2 увозите усеСтате() кука за стварање државе, и Цоунтер саставни део. Ви дефинишете цоунт држава и сетЦоунт метод за ажурирање стања. Онда оба прослеђујете на Цоунтер саставни део.

Тхе Цоунтер компонента затим приказује цоунт и позива сетЦоунт да повећате и смањите број.

функцијаЦоунтер({цоунт, сетЦоунт}) {
повратак (

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

Проблем са глобалним државама

Проблем са коришћењем глобалног стања је у томе што чувате стање у надређеној компоненти (или родитељу надређене), а затим преносећи га као реквизите компоненти где је то стање заправо потребно.

Понекад је ово у реду када имате стање које се дели на много компоненти. Али у овом случају, ниједна друга компонента не брине о томе цоунт држава осим за Цоунтер саставни део. Зато је боље да се држава пресели у Цоунтер компонента где се заправо користи.

Пребацивање државе на компоненту детета

Када преместите стање у Цоунтер компонента, то би изгледало овако:

увоз {усеСтате} из'реаговати'
функцијаЦоунтер() {
конст [цоунт, сетЦоунт] = усеСтате(0)
повратак (

Затим унутар вашег Апликација компоненту, не морате ништа да преносите на Цоунтер саставни део:

// импортс
функцијаАпликација(){
повратак<Цоунтер />
}

Бројач ће радити потпуно исто као и раније, али велика разлика је у томе што су све ваше државе локално унутар овог Цоунтер саставни део. Дакле, ако треба да имате још један бројач на почетној страници, онда бисте имали два независна бројача. Сваки шалтер је самосталан и води рачуна о свом сопственом стању.

Руковање стањем у сложенијим апликацијама

Друга ситуација у којој бисте користили глобално стање је са обрасцима. Тхе Апликација компонента испод прослеђује податке обрасца (е-адреса и лозинка) и метод подешавања доле Образац за пријаву саставни део.

увоз { усеСтате } из"реаговати";
увоз { Образац за пријаву } из"./Образац за пријаву";
функцијаАпликација() {
конст [формДата, сетФормДата] = усеСтате({
 емаил: "",
 Лозинка: "",
 });


функцијаупдатеФормДата(невДата) {
 сетФормДата((прев) => {
повратак { ...претходно, ...невДата };
 });
 }


функцијаонСубмит() {
конзола.лог (формДата);
 }
повратак (
 дата={формДата}
 упдатеДата={упдатеФормДата}
 онСубмит={онСубмит}
 />
 );
}

Тхе Образац за пријаву компонента преузима информације за пријаву и приказује их. Када пошаљете образац, он позива упдатеДата функција која се такође преноси од надређене компоненте.

функцијаОбразац за пријаву({ онСубмит, дата, упдатеДата }) {
функцијахандлеСубмит(е) {
 е.превентДефаулт();
 онСубмит();
 }
повратак (

Уместо да управљате стањем на родитељској компоненти, боље је преместити стање у ЛогинФорм.јс, где ћете користити код. На тај начин свака компонента постаје самостална и не зависи од друге компоненте (тј. родитеља) за податке. Ево модификоване верзије Образац за пријаву:

увоз { усеРеф } из"реаговати";
функцијаОбразац за пријаву({ онСубмит }) {
конст емаилРеф = усеРеф();
конст пассвордРеф = усеРеф();

функцијахандлеСубмит(е) {
 е.превентДефаулт();
 онСубмит({
 емаил: емаилРеф.цуррент.валуе,
 лозинка: пассвордРеф.цуррент.валуе,
 });
 }
повратак (

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

У родитељској компоненти (Апп.јс), можете уклонити и глобално стање и упдатеФормДата() метод јер вам више није потребан. Једина преостала функција је онСубмит(), који позивате изнутра Образац за пријаву компоненту за логовање детаља за пријаву на конзолу.

функцијаАпликација() {
функцијаонСубмит(формДата) {
конзола.лог (формДата);
 }
повратак (
 дата={формДата}
 упдатеДата={упдатеФормДата}
 онСубмит={онСубмит}
 />
 );
}

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

Твоје Образац за пријаву компонента је такође постала једноставнија јер нисте морали да бринете о ажурирању стања. Уместо тога, само пратите два реф, и то је то.

Руковање заједничким стањем

Постоји један проблем са приступом покушаја да се држава учини што је могуће локалнијом. Често бисте наишли на сценарије у којима родитељска компонента не користи стање, али га прослеђује на више компоненти.

Пример је имати а ТодоЦонтаинер родитељска компонента са две подређене компоненте: ТодоЛист и ТодоЦоунт.

функцијаТодоЦонтаинер() {
конст [тодос, сетТодос] = усеСтате([])
повратак (
 <>


 </>
 )
}

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

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

За велике апликације, управљање стањем само са усеСтате() кука може бити тешка. У таквим случајевима, можда ћете морати да се одлучите за Реацт Цонтект АПИ или Реацт Редук да ефикасно управља државом.

Сазнајте више о Реацт Хоокс

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

Ако желите да постанете вешти у развоју апликација са Реацт-ом, онда морате да знате како да користите ове куке у својој апликацији.