Кратки увод у сетСтате у Реацт.јс

Како ефикасно користити сетСтате и које замке треба избегавати

ТЛ; ДР - Ако сте визуелни ученик, пређите на видео који сам направио: РеацтЈС - Како функционише сетСтате

Или погледајте овде:

Увод у сетСтате

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

Постоје две варијације коришћења сетСтате: објектни приступ и функционални приступ.

Да видимо обе на делу. У процесу ћемо разумети проблем са објектно заснованим сетСтате.

Створимо једноставну апликацију.

class App extends React.Component { constructor() { super(); this.state = { value: 0, message: 'default click state' } } onClick = () => { this.setState({ value: this.state.value + 1 }); this.setState({ message: `click-state ${this.state.value}` }); } render(){ return( render->state={this.state.value} - {this.state.message} Click-setState ); }}

Сада ћемо монтирати ову апликацију на наш основни ДОМ чвор.

ReactDOM.render( , document.getElementById("root"));

Горњи код, када се изврши, приказује вредност и поруку из објекта стања, а такође приказује дугме.

Ако погледате руковатељ кликом, имамо две узастопне функције сетСтате које приступају вредности тхис.стате.

Понашање које очекујемо је да када се кликне на дугме, тачна вредност стања треба приказати у доњем див-у (извући за референцу):

 render->state={this.state.value} - {this.state.message} 

this.state.messageСадржи вредности изthis.state.value

Очекујемо да би обе вредности стања требале бити исте када се кликне на дугме.

Да видимо резултат овога.

Почетни излаз је приказан испод, јер је вредност 0 за почетак.

Након првог клика очекујемо доњи излаз:

render->state=1 -click-state 1

али уместо тога добијамо ово:

При другом клику, излаз се и даље не подудара као што је приказано доле.

До сада сте можда дремали или се чешкали по глави :)

Функција онЦлицк ()

Дакле, погледајмо функцију онЦлицк () да бисмо разумели проблем.

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

То ћемо поправити помоћу функционалног аспекта сетСтате.

Да бисмо демонстрирали поправак, креирајмо још једно дугме:

Click-setState fn

И додајте нови обрађивач кликова наЦлицкфн () као што је приказано доле

Горња метода користи функционални параметар у сетСтате.

То може бити функција стрелице као што је горе приказано или нормална ЕС5 функција.

Ова функција узима два параметра као аргументе: први је превСтате, а други је реквизити (у случају да су вам потребни и реквизити, који се прослеђују из родитељске компоненте). Овде истражујемо само превСтате.

Претходно стање изнад се односи на функцију сетСтате јер је последње ажурирано стање. Ово ће увек указивати на тачну вредност.

Погледајмо излаз након неколико кликова. Открићете да су вредности увек синхронизоване када кликнете на друго дугме.

У горњем примеру можете видети да се помоћу функционалног параметра сетСтате исправно подудара са претходним стањем и добијате предвидљиве вредности стања.

Још једно упозорење које морамо бити свјесни: сетСтате () узима још једну функцију повратног позива, која се извршава након успјешног ажурирања вриједности стања.

Ово је врло згодно у ситуацији када морате да извршите неку операцију након што се сетСтате успешно ажурира.

Да видимо последњи пример.

Претпоставимо да желимо да евидентирамо вредност стања након ажурирања, а код пишемо као испод. За ово ћу користити обрађивач онЦлицкфн ().

Али, да видимо console.logи проверимо да ли је вредност тачна или не. После три клика добијате следећи статус:

Приметићете да евидентирана вредност није последња ажурирана вредност. Поправимо ово и видимо излаз.

У горњем примеру користимо други параметар повратног позива сетСтате (). Овај повратни позив извршиће се када сетСтате () заврши своју операцију.

Погледајмо коначни излаз са горе модификованим кодом.

Окончање

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

Комплетни изворни код доступан је на јсбин.

Срећно кодирање!

Учи са мном @Леарнер + Фуллстацк Цоацх (@рајесхпиллаи): //твиттер.цом/рајесхпиллаи

Промоција: Специјални купон од 10 долара за средње читаоце за мој предстојећи РеацтЈС-Беионд тхе басиц курс о удеми-у за случај да желите да подржите наш курикулум отвореног кода Мастеринг фронтенд енгинееринг за 12 до 20 недеља