Mga Compact ng React - Mga Props at Estado sa ReactJS na may Mga Halimbawa

'Sa React, lahat ay bahagi'

Kung pamilyar ka sa React, dapat mong narinig o nabasa ang pariralang ito nang maraming beses. Ngunit alam mo ba kung ano ang eksaktong kahulugan nito at kung paano ito ginagamit? Kung hindi mo ginawa, pagkatapos basahin ang blog na ito upang malaman ang lahat tungkol sa mga bahagi ng React at ang iba't ibang mga phase sa lifecycle. Sigurado ako sa oras na matapos ka sa pagbabasa ng blog na ito magkakaroon ka ng isang kumpletong pag-unawa tungkol sa mga bahagi ng React at ang mga konseptong nakapalibot dito. Ngunit bago magpatuloy, tingnan mo nang mabilis ang mga paksang tatalakayin ko:

pagsamahin ang pag-uuri ng c ++ code

• Ano ang Mga Component ng React?
• Mga Kalamangan ng Mga Compact ng React
• Mga Props
• Mga Estado
• Mga Estado vs Props
• React Component Lifecycle

Ano ang Mga Component ng React?

Mas maaga ang mga developer ay kailangang magsulat ng 1000 mga linya ng code para sa pagbuo ng isang simpleng solong pahina ng application. Karamihan sa mga application na iyon ay sinundan ang tradisyunal na istraktura ng DOM at ang paggawa ng mga pagbabago sa kanila ay napakahirap at isang nakakapagod na gawain para sa mga developer.Manu-manong kinailangan nilang maghanap para sa elemento na kailangan ng pagbabago at i-update ito nang naaayon. Kahit na ang isang maliit na pagkakamali ay hahantong sa pagkabigo ng aplikasyon. Bukod dito, ang pag-update sa DOM ay napakamahal. Kaya, ipinakilala ang diskarte na batay sa sangkap. Sa pamamaraang ito, ang buong aplikasyon ay nahahati sa mga lohikal na tipak na tinatawag na Mga Bahagi. Ang react ay isa sa mga balangkas na nagpasya para sa pamamaraang ito.Kung nagpaplano kang buuin ang iyong karera sa pag-unlad sa web, ang maagang pagsisimula ay magbubukas ng maraming mga pagkakataon para sa iyo.

Unawain natin ngayon kung ano ang mga sangkap na ito.

Ang mga bahagi ng reaksyon ay isinasaalang-alang bilang mga bloke ng gusali ng User Interface. Ang bawat isa sa mga sangkap na ito ay umiiral sa loob ng parehong espasyo ngunit nagsasagawa nang nakapag-iisa mula sa bawat isa. Ang mga bahagi ng reaksyon ay may kani-kanilang istraktura, pamamaraan pati na rin ang mga API. Ang mga ito ay magagamit muli at maaaring ma-injected sa mga interface ayon sa pangangailangan. Upang magkaroon ng isang mas mahusay na pag-unawa, isaalang-alang ang buong UI bilang isang puno.Dito ang panimulang sangkap ay nagiging ugat at ang bawat isa sa mga independiyenteng piraso ay nagiging mga sanga, na kung saan ay nahahati sa mga sub-branch.

Pinapanatili nitong nakaayos ang aming UI at pinapayagan ang data at mga pagbabago sa estado na lohikal na dumaloy mula sa ugat patungo sa mga sanga at pagkatapos ay sa mga sub-branch. Ang mga bahagi ay tumatawag sa server nang direkta mula sa client-side na nagbibigay-daan sa DOM na mag-update ng pabago-bago nang hindi nagre-refresh ng pahina. Ito ay dahil ang mga bahagi ng react ay binuo sa konsepto ng mga kahilingan sa AJAX. Ang bawat bahagi ay may sariling interface na maaaring tumawag sa server at mai-update ang mga ito. Tulad ng mga sangkap na ito ay malaya sa isa't isa, ang bawat isa ay maaaring mag-refresh nang hindi nakakaapekto sa iba o sa UI bilang isang buo.

Gumagamit kami React.createClass () pamamaraan upang lumikha ng isang bahagi. Ang pamamaraang ito ay dapat na ipasa sa isang argumento ng bagay na tutukoy sa sangkap ng React. Ang bawat bahagi ay dapat maglaman ng eksaktong isa ibigay () paraan Ito ang pinakamahalagang pag-aari ng isang bahagi na responsable para sa pag-parse ng HTML sa JavaScript, JSX. Ito ibigay () ibabalik ang representasyon ng HTML ng bahagi bilang isang node ng DOM. Samakatuwid, ang lahat ng mga HTML tag ay dapat na nakapaloob sa isang nakapaloob na tag sa loob ng ibigay () .

Ang sumusunod ay isang sample na code para sa paglikha ng isang bahagi.

i-import ang React mula sa 'react' import ReactDOM mula sa 'react-dom' na klase na MyComponent ay umaabot sa React.Component {render () {return (
Ang iyong Id ay {this.state.id}
)}} ReactDOM.render (, document.getElementById ('nilalaman'))

Mga Estado vs Props

React Component Lifecycle

Nagbibigay ang react ng iba`t ibang mga pamamaraan kung saan aabisuhan kapag nangyari ang isang tiyak na yugto sa lifecycle ng isang bahagi. Ang mga pamamaraang ito ay tinatawag na lifecycle na pamamaraan. Ang mga pamamaraang lifecycle na ito ay hindi masyadong kumplikado. Maaari mong isipin ang mga pamamaraang ito bilang dalubhasang mga handler ng kaganapan na tinatawag sa iba't ibang mga punto sa panahon ng isang bahagi ng buhay. Maaari ka ring magdagdag ng iyong sariling code sa mga pamamaraang ito upang maisagawa ang iba't ibang mga gawain. Pinag-uusapan ang tungkol sa lifecycle ng bahagi, ang lifecycle ay nahahati sa 4 na phase. Sila ay:

1. Unang bahagi
2. Pag-update ng Phase
3. Binabago ng Props ang Phase
4. Unmounting Phase

Ang bawat isa sa mga yugto na ito ay naglalaman ng ilang mga pamamaraan ng lifecycle na tukoy lamang sa kanila. Kaya alamin natin ngayon kung ano ang nangyayari sa bawat isa sa mga phase na ito.

a. Unang bahagi - Ang unang yugto ng lifecycle ng isang bahagi ng React ay ang paunang yugto o paunang yugto ng pag-render. Sa yugtong ito,ang sangkap ay sisimulan na ang paglalakbay nito at patungo sa DOM. Ang yugto na ito ay binubuo ng mga sumusunod na pamamaraan na tinawag sa isang paunang natukoy na pagkakasunud-sunod.

1. getDefaultProps (): Ang pamamaraang ito ay ginagamit upang tukuyin ang default na halaga ng ito.props . Tatawagan ito bago pa nilikha ang iyong bahagi o ang anumang mga props mula sa magulang ay naipapasa dito.
2. getInitialState (): Ang pamamaraang ito ay ginagamit upangtukuyin ang default na halaga ng ito.state bago nilikha ang iyong sangkap.
3. componentWillMount (): Ito ang huling pamamaraan na maaari mong tawagan bago mai-render ang iyong bahagi sa DOM. Pero kung tatawag ka setState () sa loob ng pamamaraang ito ang iyong bahagi ay hindi muling bibigyan.
4. ibigay (): Th ang paraan ay responsable para sa pagbabalik ng isang solong ugat ng HTML node at dapat na tinukoy sa bawat bahagi. Maaari kang bumalik wala o hindi totoo kung sakaling ayaw mong mag-render ng anuman.
5. componentDidMount (): Kapag na-render ang sangkap at inilagay sa DOM, ito ang pamamaraan ay tinawag. Dito maaari mong gampanan ang anumang mga pagpapatakbo sa pag-query ng DOM.

b. Pag-update ng Phase - Kapag naidagdag ang sangkap sa DOM, maaari lamang silang mag-update at muling mag-render kapag nangyari ang isang pagbabago sa estado. Sa tuwing magbabago ang estado, tatawagin ito ng sangkap ibigay () muli Anumang sangkap, na umaasa sa output ng sangkap na ito ay tatawagan din nito ibigay () muli Tapos na ito, upang matiyak na ang aming sangkap ay nagpapakita ng pinakabagong bersyon ng sarili nito. Kaya upang matagumpay na mai-update ang mga bahagi ay isinasaad ang mga sumusunod na pamamaraan ay tinawag sa ibinigay na pagkakasunud-sunod:

1. dapatComponentUpdate (): Gamit ang pamamaraang ito maaari mong makontrol ang pag-uugali ng iyong bahagi ng pag-update ng sarili nito. Kung ibabalik mo ang isang totoo mula sa pamamaraang ito,mag-a-update ang sangkap. Iba pa kung ang pamamaraan na ito ay nagbabalik ahindi totoo, laktawan ng sangkap ang pag-update.
2. componentWillUpdate (): Tang kanyang pamamaraan ay tinawag just bago mag-update ang iyong bahagi. Sa pamamaraang ito, hindi mo mababago ang estado ng iyong sangkap sa pamamagitan ng pagtawag ito.setState .
3. ibigay (): Kung nagbabalik ka ng hindi totoo sa pamamagitan ng dapatComponentUpdate () , ang code sa loob ibigay () mahihiling muli upang matiyak na ang iyong sangkap ay nagpapakita ng maayos ang sarili nito.
4. componentDidUpdate (): Kapag ang sangkap ay na-update at na-render, pagkatapos ay ang pamamaraang ito ay tinawag. Maaari kang maglagay ng anumang code sa loob ng pamamaraang ito, na nais mong ipatupad sa sandaling na-update ang bahagi.

c. Prase Change Phase - Pagkatapos ang sangkap ay nai-render sa DOM, ang iba pang oras na mag-a-update ang bahagi, bukod sa pagbabago ng estado ay kapag nagbago ang halaga ng prop. Praktikal na ang yugto na ito ay gumagana katulad ng nakaraang yugto, ngunit sa halip ng estado, nakikipag-usap ito sa mga prop. Sa gayon, ang yugtong ito ay mayroon lamang isang karagdagang pamamaraan mula sa Phase ng Pag-update.

1. componentWillReceiveProps (): Ibinabalik ng pamamaraang ito ang isang argumento na naglalaman ng bagong halaga ng prop na malapit nang italaga sa bahagi.
   Ang natitirang mga pamamaraan ng lifecycle ay kumikilos nang magkapareho sa mga pamamaraan na nakita natin sa nakaraang yugto.
   
2. dapatComponentUpdate ()
3. componentWillUpdate ()
4. ibigay ()
5. componentDidUpdate ()

d.Ang Unmounting Phase -Ito ang huling yugto ng siklo ng buhay ng mga sangkap kung saan ang sangkap ay nawasak at inalis mula sa DOM nang buo. Naglalaman lamang ito ng isang pamamaraan:

1. componentWillUnmount (): Kapag na-invoke ang pamamaraang ito, permanenteng tinanggal ang iyong sangkap mula sa DOM.Sa pamamaraang ito, Ymaaari kang magsagawa ng anumang mga kaugnay na gawain tulad ng pag-alis ng mga tagapakinig ng kaganapan, pagtigil sa mga timer, atbp.

Ang sumusunod ay ang buong diagram ng ikot ng buhay:

Dinadala tayo nito sa pagtatapos ng blog sa Mga React Component. Inaasahan ko sa blog na ito na malinaw kong naipaliwanag kung ano ang Mga React Component, kung paano ito ginagamit. Maaari kang mag-refer sa aking blog sa , kung sakaling nais mong malaman ang higit pa tungkol sa ReactJS.

Kung nais mong sanayin sa React at nais na bumuo ng mga kagiliw-giliw na UI sa iyong sarili, pagkatapos suriin ang ni Edureka, isang pinagkakatiwalaang kumpanya sa pag-aaral sa online na may isang network na higit sa 250,000 nasiyahan na mga nag-aaral na kumalat sa buong mundo.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento at babalikan ka namin.