Reagoi elinkaari - Reaktorin elinkaaren eri vaiheet esimerkeillä

Johdanto reagoimaan elinkaareen

Koska tiedämme, että komponentit ovat reagoinnin perusrakenteita, on tärkeää tietää reaktio-komponentin elinkaaren eri vaiheista. Tässä artikkelissa kuvaamme komponentin elinkaareen liittyvät tapahtumat ja menetelmät. Aiomme myös kattaa joitain esimerkkejä, jotka antavat selkeän kuvan React-komponentin elinkaaresta.

Reaktorin elinkaaren vaiheet

Komponenttien elinkaari määritellään menetelmien sekvenssiksi, jota käytetään komponentin eri vaiheissa. Seuraavat ovat erilaisia ​​vaiheita, jotka liittyvät reagoivan komponentin elinkaareen:

1. Alustus

Tämä vaihe vaatii kehittäjää määrittelemään ominaisuudet ja komponentin alkutila. Tämä tehdään komponentin rakentajassa. Seuraava koodi näyttää reagoivan komponentin alustusvaiheen:

Koodi:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Asennus

Asennus on reaktion elinkaaren vaihe, joka tulee alustuksen jälkeen. Asennus tapahtuu, kun komponentti asetetaan DOM-säilöön ja komponentti renderoidaan verkkosivulle. Asennusvaiheessa on kaksi menetelmää, jotka ovat:

• compnentWillMount () : Tätä menetelmää kutsutaan juuri ennen komponentin asettamista DOM: iin, eli tätä toimintoa kutsutaan juuri ennen kuin renderöintitoiminto suoritetaan ensimmäistä kertaa.
• komponentDidMount () : Tätä menetelmää kutsutaan heti, kun komponentti on asetettu DOM: iin, eli tämä toiminto kutsutaan heti, kun renderöintitoiminto on suoritettu. Ensimmäistä kertaa.

Kahden yllä mainitun menetelmän nimestä olemme ymmärtäneet avainsanojen ”Will” ja “Did” merkityksen. Nyt on selvää, että ”tahtoa” käytetään ennen tiettyä tapahtumaa ja ”tehtiin” käytetään tietyn tapahtuman jälkeen.

3. Updation

Updatio on vaihe, jossa alusta ja sen alussa asuttuja ominaisuuksia muutetaan tarvittaessa joidenkin käyttäjän tapahtumien jälkeen. Seuraavat ovat erilaisia ​​toimintoja, joita päivitysvaiheessa käytetään:

• komponenttiWillReceptionProps (): Tämä toiminto on riippumaton komponentin tilasta. Tätä menetelmää kutsutaan ennen kuin DOM: iin asennettu komponentti saa rekvisiikansa uudelleen. Toiminto hyväksyy uusia rekvisiitta, jotka voivat olla identtisiä tai erilaisia ​​alkuperäisistä rekvisiitta. Tässä vaiheessa voidaan pääosin käyttää joitain esitystä edeltäviä tarkastuksia.
• shouldComponentUpdate (): Joskus on toivottavaa, että uutta rekvisiittaa ei näytetä tulostesivulla. Tämän saavuttamiseksi tämä menetelmä palauttaa väärät, mikä tarkoittaa, että äskettäin renderoituja rekvisiitta ei tule näyttää tulossivulla.
• komponenttiWillUpdate (): Tätä toimintoa kutsutaan ennen komponentin uusintaa, eli tätä menetelmää kutsutaan kerran ennen renderöintitoiminnon suorittamista päivityksen jälkeen.
• komponentDidUpdate (): Tätä toimintoa kutsutaan sen jälkeen, kun komponentti on renderoitu uudelleen, eli tätä menetelmää kutsutaan kerran sen jälkeen, kun renderöintitoiminto on suoritettu päivityksen jälkeen.

4. Irrottaminen

Tämä on komponentin elinkaaren viimeinen vaihe ja tässä vaiheessa komponentti irroitetaan DOM-säiliöstä . Seuraava menetelmä kuuluu tähän vaiheeseen.

• komponenttiWillUnmount (): Tämä toiminto käynnistetään ennen kuin komponentti lopullisesti irroitetaan DOM-säilöstä. Tätä menetelmää kutsutaan, kun komponentti poistetaan kokonaan sivulta ja tämä osoittaa sen elinkaaren lopun.

Esimerkki reagoida elinkaaren

Täällä näemme joitain koodiesimerkkejä, jotka osoittavat reagoivan komponentin elinkaaren.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Kun yllä oleva ohjelma suoritetaan alun perin, se näyttää alla olevan tuotoksen verkkosivulla.

Kun napsautat Napsauta tätä -aluetta, teksti muuttuu seuraavaksi:

Nyt konsolissa näet menetelmäsekvenssin nimeltä, konsoli näyttää alla olevan liitteen:

Napsauttamisen jälkeen näytöllä uudelleen renderointi tapahtuu ja se näyttää seuraavan konsolissa:

Yllä oleva konsolin lähtö antaa selkeän käsityksen reaktion elinkaaren menetelmistä, joihin reagointikomponentin elinkaaren aikana on vedottu.

johtopäätös

Kun on käsitelty yksityiskohdat reaktion elinkaaren eri vaiheista, on selvää, että on olemassa elinkaarimenetelmiä, joihin kutsutaan automaattisesti. Nämä elinkaarimenetelmät komponentin eri vaiheissa antavat meille vapauden suorittaa räätälöityjä tapahtumia, kun komponentti luodaan, päivitetään tai tuhotaan. Lisäksi näiden menetelmien avulla voimme käsitellä rekvisiitta- ja tilamuutoksia sekä integroida kolmansien osapuolien kirjastot helposti.

Suositellut artikkelit

Tämä on React-elinkaaren opas. Tässä keskustellaan esimerkin mukana reagoinnin elinkaaren vaiheista, kuten alustaminen, asentaminen, ylittäminen ja irrottaminen. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

1. Reagoi alkuperäiset vs. reagoi
2. Ketterä elinkaari
3. ITIL-elinkaari
4. Java-asennustyökalut
5. Opas nappiin reagoida alkuperäisessä