Kynning á React: Mismunur á milli bekkjaþátta og virkni íhluta

Ertu ný í viðbrögðum? Viltu læra eitthvað nýtt eftir 5 mínútur eða minna? Við skulum læra um hvarfþáttinn.

Hvað er íhlutur?

Hnefi allra, áður en við förum djúpt í þetta efni, ættum við að vita fullkomlega hver hluti raunverulega er.

Hluti (í viðbrögðum) væri lýst sem reit eða hluta af appinu okkar sem gæti verið endurnýtt í öllu verkefninu (og aðrir, kannski), það er venjulega tengt við HÍ frumefni og hegðun þess.

Núna, miðað við að þú þekkir grunninn, skulum við athuga um tvenns konar hluti sem við getum búið til í React verkefni, Class Components og Functional Components.

Bekkahluti

Þetta er einnig kallað Basic Component. Síðan ECMAScript 2015 höfum við „flokk“ í JavaScript. React notar þessa setningafræði til að búa til ríkulegan þátt með líftíma. Ríkið er oft notað til að breyta hegðun íhluta okkar eða barna hans.

Við skulum springa þennan kóða. Hér höfum við „JS flokk“ sem erfa virkni frá React.Component, næst lýsum við eftir framkvæmdaaðila hans sem fengu leikmunina sem rök. Næst, við köllum frábær, til að koma gögnunum yfir í foreldraflokki íhluta, þetta er krafist þegar við búum til þessa tegund af íhluti.

„Leikmunirnir“ er hlutur sem fékk alla eiginleika sem við notum íhlutinn sem merki.

The lampi hluti er með grunn tillögu, það skila HTML reit með texta og hnappi.

Með því að smella á hnappinn rofi kveikja eða slökkva á lampanum, hérna kemur ástand okkar inn í leikinn, í línu 4, frumstilla við stöðu lampans og eftir það lýsum við yfir aðferðinni switchLight, það mun snúa ríkinu af lampanum okkar.

þetta „ástand“ er hlutur með einhverja eiginleika sem mun breytast á þeim tíma sem bekknum er hrundið af stað. Það ætti ekki að breyta beint heldur setState aðferðinni.

Þú getur breytt ástandinu á þennan hátt í:

Hagnýtur íhlutur

Ef við viljum byggja einhvern lágmarks, einfaldan og ríkisfangslausan þátt mun það hjálpa þér að draga úr magn af kóða sem notaður er og beita DRY meginreglunni auðveldara. Funcional-þátturinn er JavaScript-aðgerð sem skilar nokkrum Jxs-þáttum.

Við skulum athuga þetta dæmi um ljósaperuþátt.

Hérna, við höfum reglulega aðgerð, það fær eyðilögðan hlut með eign sem heitir lampState, það er snúið að staðbundinni breytu og við metum hvort það sé satt eða ósatt til að skila öðru img merki.

Nú getum við notað það í lampaþættinum til að sýna hvernig þeir geta virkað fínt saman.

Það er það, þegar þú smellir á rofahnappinn mun myndin af kveiktu perunni breytast.

Hvað með krókana?

Krókar eru væntanleg aðgerð sem gerir þér kleift að nota ástand í hagnýtur hluti. Það þarf að útskýra þetta með frekari upplýsingum, vegna þess að við þurfum að grafa dýpra í að bregðast við, og einnig held ég að það eigi skilið sína eigin grein.

Takk fyrir að lesa, ef þér líkar vel eða ekki, gefðu mér álit .-