reagoi.Komponentti

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}

componentWillUnmount()

componentWillUnmount()vedotaan välittömästi ennen kuin osa irrotetaan ja tuhotaan. Suorita kaikki tarvittavat puhdistukset tässä menetelmässä, kuten ajastimien mitätöinti, verkkopyyntöjen peruuttaminen tai componentDidMount()luotujen tilausten puhdistaminen.

setState() in componentWillUnmount(), koska komponenttia ei koskaan renderöidä uudelleen. Kun komponentti tapaus on irrotettu, se ei koskaan asentaa uudelleen.

harvoin käytetyt Elinkaarimenetelmät

tämän jakson menetelmät vastaavat melko harvinaisia käyttötapauksia. Ne ovat käteviä silloin tällöin, mutta suurin osa komponenteistasi ei luultavasti tarvitse niitä. Näet suurimman osan alla olevista menetelmistä tässä elinkaarikaaviossa, jos klikkaat” Näytä harvinaisemmat elinkaaret ” – valintaruutua sen yläosassa.

shouldComponentUpdate(nextProps, nextState)

käytä shouldComponentUpdate() reagoidaksesi, jos nykyinen tilan tai rekvisiitan muutos ei vaikuta komponentin ulostuloon. Oletuskäyttäytyminen on renderöidä jokaisen tilan muutoksen, ja useimmissa tapauksissa sinun pitäisi luottaa oletuskäyttäytymiseen.

shouldComponentUpdate() vedotaan ennen renderöintiä, kun vastaanotetaan uutta rekvisiittaa tai tilaa. Oletusarvo on true. Tätä menetelmää ei vaadita alkuperäiseen renderöintiin tai kun forceUpdate() käytetään.

tämä menetelmä on olemassa vain suorituskyvyn optimointina. Älä luota sen” estää ” renderöinti, koska tämä voi johtaa vikoja. Harkitse sisäänrakennetun PureComponent sen sijaan, että kirjoittaisit shouldComponentUpdate() käsin. PureComponent suorittaa pinnallisen rekvisiitan ja tilan vertailun, ja vähentää mahdollisuutta ohittaa välttämätön päivitys.

Jos olet varma, että haluat kirjoittaa sen käsin, voit verrata this.props kanssa nextProps ja this.state kanssa nextState ja palata false kertoakseen reagoivansa päivityksen voi ohittaa. Huomaa, että false palauttaminen ei estä lasten osia renderöimästä uudelleen, kun niiden tila muuttuu.

emme suosittele syvien tasa-arvotarkastusten tekemistä tai JSON.stringify() in shouldComponentUpdate(). Se on erittäin tehoton ja vahingoittaa suorituskykyä.

tällä hetkellä, jos shouldComponentUpdate() palauttaa false, niin UNSAFE_componentWillUpdate()render(), ja componentDidUpdate() ei vedota. Jatkossa React saattaa käsitellä shouldComponentUpdate() vihjeenä tiukan direktiivin sijaan, ja palauttaminen false saattaa vielä johtaa komponentin uudelleenrenderöintiin.

staattinen getderivedstateefromprops ()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps vedotaan juuri ennen renderöintimenetelmän kutsumista sekä ensimmäisellä kiinnityksellä että myöhemmissä päivityksissä. Sen pitäisi palauttaa objekti päivittääkseen tilan, tai null päivittääkseen mitään.

tämä menetelmä on olemassa harvinaisiin käyttötapauksiin, joissa tila riippuu rekvisiitan ajan myötä tapahtuvista muutoksista. Esimerkiksi, se voisi olla kätevä toteuttaa <Transition> komponentti, joka vertaa aikaisempia ja seuraavia lapsia päättää, kumpi heistä animoida sisään ja ulos.

derivoituva tila johtaa monisanaiseen koodiin ja tekee komponenteista vaikeasti ajateltavia.Varmista, että tunnet yksinkertaisemmat vaihtoehdot:

• Jos tarvitset rekvisiitan muutoksen vuoksi jonkin sivuvaikutuksen (esimerkiksi datan noutamisen tai animoinnin), käytä componentDidUpdate elinkaari sen sijaan.
• Jos haluat laskea joitakin tietoja uudelleen vasta kun rekvisiitta muuttuu, käytä sen sijaan memoization helperia.
• Jos haluat ”nollata” jonkin tilan, kun rekvisiitta muuttuu, harkitse joko komponentin muuttamista täysin kontrolloiduksi tai täysin hallitsemattomaksi key sen sijaan.

tällä menetelmällä ei ole pääsyä komponenttiesiintymään. Jos haluat, voit käyttää uudelleen jonkin koodin getDerivedStateFromProps() ja muiden luokkamenetelmien välillä erottamalla osan rekvisiitan ja tilan puhtaista toiminnoista luokkamäärityksen ulkopuolella.

huomaa, että tällä menetelmällä ammutaan jokaista renderöintiä, aiheuttajasta riippumatta. Tämä on toisin kuin UNSAFE_componentWillReceiveProps, joka laukeaa vain vanhemman aiheuttaessa uudelleenrenderöinnin eikä paikallisen setState.

getSnapshotBeforeUpdate ()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() vedotaan juuri ennen kuin viimeksi renderöity ulostulo sidotaan esim. Sen avulla komponentti voi kaapata joitakin tietoja DOM (esim. vieritys) ennen kuin se on mahdollisesti muuttunut. Kaikki tämän elinkaaren palauttamat arvot siirretään parametriksi componentDidUpdate().

tämä käyttötapaus ei ole yleinen, mutta se voi esiintyä UIs: ssa chat-langan tavoin, jonka täytyy käsitellä vierityspaikkaa erityisellä tavalla.

snapshot-arvo (tai null) tulee palauttaa.

esimerkiksi:

class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}

edellä mainituissa esimerkeissä on tärkeää lukea scrollHeight ominaisuus getSnapshotBeforeUpdate, koska ”renderöinnin” vaiheen elinkaarien välillä voi olla viiveitä (kuten render) ja ”commit” – vaiheen elinkaaret (kuten getSnapshotBeforeUpdate ja componentDidUpdate).

Virherajat

Virherajat ovat Reagointikomponentteja, jotka havaitsevat JavaScript-virheet missä tahansa niiden lapsikomponenttipuussa, kirjaavat nämä virheet ja näyttävät varauloskäynnin kaatuneen komponenttipuun sijaan. Virherajat havaitsevat virheitä renderöinnin aikana, elinkaarimenetelmissä ja niiden alapuolella olevan koko puun rakenteissa.

luokkakomponentista tulee virheraja, jos se määrittelee jommankumman (tai molemmat) elinkaarimenetelmistä static getDerivedStateFromError() tai componentDidCatch(). Päivittäminen tila näistä elinkaaren avulla voit kaapata käsittelemätön JavaScript virhe alla puu ja näyttää varauloskäynti UI.

käytä virherajoja vain odottamattomista poikkeuksista toipumiseen; älä yritä käyttää niitä virtauksen säätöön.

tarkemmat tiedot, Katso Virhekäsittely kohdasta React 16.

Huomautus

Virherajat vain nappaavat virheitä niiden alapuolella olevissa komponenteissa puussa. Virheraja ei saa kiinni virhettä itsessään.

staattinen getDerivedStateFromError ()

static getDerivedStateFromError(error)

tähän elinkaareen vedotaan laskijan heitettyä virheen component.It vastaanottaa parametrina heitetyn virheen ja palauttaa arvon päivitystilaan.

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

Note

getDerivedStateFromError()kutsutaan ”render”-vaiheen aikana, joten sivuvaikutukset eivät ole sallittuja.Näissä käyttötapauksissa käytetään sen sijaan componentDidCatch().

componentDidCatch ()

componentDidCatch(error, info)

tähän elinkaareen vedotaan laskijan heitettyä virheen component.It saa kaksi parametria:

1. error – heitetyn virheen.
2. info – objekti, jonka componentStack avain sisältää tiedon siitä, mikä komponentti heitti virheen.

componentDidCatch() kutsutaan” commit ” – vaiheen aikana, joten haittavaikutukset ovat permitted.It pitäisi käyttää asioita, kuten kirjausvirheet:

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

Reactin tuotanto-ja kehitysrakenteet eroavat hieman siinä, miten componentDidCatch() käsittelee virheitä.

kehityksessä virheet pulpahtavat aina window, tämä tarkoittaa, että mikä tahansa window.onerror tai window.addEventListener('error', callback) korjaa virheet, jotka ovat jääneet componentDidCatch().

tuotannossa virheet eivät sen sijaan pulpahda esiin, mikä tarkoittaa, että esi-isien virheiden käsittelijä saa vain virheitä, joita ei ole erikseen pyydetty componentDidCatch().

huomaa

virheen sattuessa voi tehdä varaliittymän componentDidCatch() soittamalla setState, mutta tämä vanhentuu tulevassa julkaisussa.Käytä static getDerivedStateFromError() vararenderöinnin hoitamiseen sen sijaan.

Vanhat Elinkaarimenetelmät

alla olevat elinkaarimenetelmät on merkitty ”vanhoiksi”. Ne toimivat edelleen, mutta emme suosittele niiden käyttöä uudessa koodissa. Voit oppia lisää siirtymisestä pois legacy lifecycle menetelmiä tässä blogikirjoitus.

UNSAFE_componentWillMount ()

UNSAFE_componentWillMount()

Huomautus

Tämä elinkaari oli aiemmin nimetty componentWillMount. Tämä nimi toimii versioon 17 asti. Käytä rename-unsafe-lifecycles codemod päivittääksesi komponentit automaattisesti.

UNSAFE_componentWillMount() vedotaan juuri ennen asennusta. Sitä kutsutaan ennen render(), joten kutsuminen setState() synkronisesti tässä menetelmässä ei aiheuta ylimääräistä renderöintiä. Yleisesti suosittelemme käyttämään constructor() sen sijaan alustustilan.

Vältä sivuvaikutusten tai tilausten käyttöä tässä menetelmässä. Näissä käyttötapauksissa käytetään sen sijaan componentDidMount().

Tämä on ainoa elinkaarimenetelmä, jota kutsutaan palvelimella renderöinniksi.

UNSAFE_componentWillReceiveProps ()

UNSAFE_componentWillReceiveProps(nextProps)

Huomautus

tämä elinkaari oli aiemmin nimetty componentWillReceiveProps. Tämä nimi toimii versioon 17 asti. Käytä rename-unsafe-lifecycles codemod päivittääksesi komponentit automaattisesti.

Huomautus:

tämän elinkaarimenetelmän käyttö johtaa usein virheisiin ja epäjohdonmukaisuuksiin

• Jos tarvitset jonkin sivuvaikutuksen (esimerkiksi tietojen nouto tai animaatio) vastauksena rekvisiitan muutokseen, käytä componentDidUpdate elinkaari sen sijaan.
• Jos käytit componentWillReceiveProps joidenkin tietojen uudelleenlaskentaan vain rekvisiitan muuttuessa, käytä sen sijaan muistioapulaista.
• Jos käytit componentWillReceiveProps jonkin tilan ”nollaamiseen”, kun rekvisiitta muuttuu, harkitse joko komponentin muuttamista täysin kontrolloiduksi tai täysin hallitsemattomaksi key sen sijaan.

muissa käyttötapauksissa kannattaa noudattaa tämän blogikirjoituksen suosituksia johdetusta tilasta.

UNSAFE_componentWillReceiveProps() vedotaan ennen kuin asennettu komponentti saa uutta rekvisiittaa. Jos tila on päivitettävä rekvisiittamuutosten vuoksi (esimerkiksi sen nollaamiseksi), voit verrata this.props ja nextProps ja suorittaa tilan siirtymät käyttämällä this.setState() tässä menetelmässä.

huomaa, että jos jokin vanhempi komponentti aiheuttaa komponenttisi uudelleenrenderöinnin, tätä menetelmää kutsutaan, vaikka rekvisiitta ei olisikaan muuttunut. Muista vertailla nykyisiä ja seuraavia arvoja, jos haluat vain käsitellä muutoksia.

React ei kutsu UNSAFE_componentWillReceiveProps() initial rekvisiitalla asennuksen aikana. Se vain kutsuu tätä menetelmää, jos jotkut osan rekvisiitta voi päivittää. Kutsuminen this.setState() ei yleensä laukaise UNSAFE_componentWillReceiveProps().

UNSAFE_componentWillUpdate ()

UNSAFE_componentWillUpdate(nextProps, nextState)

Huomautus

tämä elinkaari oli aiemmin nimetty componentWillUpdate. Tämä nimi toimii versioon 17 asti. Käytä rename-unsafe-lifecycles codemod päivittääksesi komponentit automaattisesti.

UNSAFE_componentWillUpdate() vedotaan juuri ennen renderöintiä, kun vastaanotetaan uutta rekvisiittaa tai tilaa. Käytä tätä mahdollisuutena suorittaa valmistelu ennen päivitystä. Tätä menetelmää ei vaadita alkuperäiseen renderöintiin.

huomaa, että et voi soittaa this.setState() tähän; eikä sinun pitäisi tehdä mitään muuta (esim.lähettää Redux-toiminto), joka laukaisisi päivityksen Reagointikomponenttiin ennen kuin UNSAFE_componentWillUpdate() palaa.

tyypillisesti tämä menetelmä voidaan korvata componentDidUpdate(). Jos luit DOM: stä tässä menetelmässä (esimerkiksi tallentaaksesi vierityspaikan), voit siirtää kyseisen logiikan getSnapshotBeforeUpdate().

Huomautus

UNSAFE_componentWillUpdate()ei vedota, josshouldComponentUpdate()palauttaa epätosi.

muut sovellusliittymät

toisin kuin yllä olevat elinkaarimenetelmät (jotka reagoivat kutsuihin puolestasi), alla olevat menetelmät ovat menetelmiä, joita voit kutsua komponenteistasi.

niitä on vain kaksi: setState() ja forceUpdate().

setState ()

setState(updater, )

setState() tiedustelee komponentin tilan muutoksia ja kertoo Reactille, että tämä komponentti ja sen lapset täytyy renderoida uudelleen päivitetyn tilan kanssa. Tämä on ensisijainen tapa päivittää käyttöliittymä vastauksena tapahtumankäsittelijöiden ja palvelimen vastauksia.

ajattele setState() pikemminkin pyyntönä kuin välittömänä käskynä päivittää komponentti. Paremman koetun suorituskyvyn saavuttamiseksi React voi viivyttää sitä ja päivittää useita komponentteja yhdellä syötöllä. React ei takaa, että valtion muutoksia sovelletaan välittömästi.

setState() ei aina Päivitä komponenttia välittömästi. Se voi eritellä tai lykätä päivitystä myöhempään. Tämä tekee lukemisesta this.state heti soitettuaan setState() mahdollisen sudenkuopan. Sen sijaan käytetään componentDidUpdate tai setState callback (setState(updater, callback)), joista jompikumpi varmasti ampuu päivityksen jälkeen. Jos haluat asettaa tilan edellisen tilan perusteella, Lue updater argumentti alta.

setState() johtaa aina uudelleen renderöintiin, ellei shouldComponentUpdate() palauta false. Jos käytetään mutabiileja olioita eikä ehdollista renderöintilogiikkaa voida toteuttaa shouldComponentUpdate(), kutsumalla setState() vain silloin, kun uusi tila eroaa edellisestä tilasta, vältetään turhat uudelleenrendit.

ensimmäinen argumentti on updater funktio, jolla on allekirjoitus:

(state, props) => stateChange

state on viittaus osan tilaan muutoksen toteutushetkellä. Sitä ei saa suoraan mutatoida. Sen sijaan muutokset tulisi esittää rakentamalla uusi kohde, joka perustuu state ja props. Oletetaan esimerkiksi, että haluamme kasvattaa tilan arvoa props.step:

this.setState((state, props) => { return {counter: state.counter + props.step};});

sekä state että props päivitysfunktion vastaanottamat ovat taatusti ajan tasalla. Updaterin ulostulo sulautuu matalasti state.

setState() toinen parametri on valinnainen takaisinkutsufunktio, joka suoritetaan, kun setState on suoritettu ja komponentti on renderoitu uudelleen. Yleisesti suosittelemme käyttämään componentDidUpdate() tällaista logiikkaa sen sijaan.

voit valinnaisesti siirtää objektin ensimmäiseksi argumentiksi setState() funktion sijaan:

setState(stateChange)

Tämä suorittaa stateChange uuden tilan, esim.kappalemäärä:

this.setState({quantity: 2})

tämä muoto setState() on myös asynkroninen, ja saman syklin aikana useita kutsuja voidaan lyödä yhteen. Esimerkiksi, jos yrität lisätä kohteen määrää useammin kuin kerran samassa syklissä, se johtaa ekvivalenttiin:

Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)

myöhemmät puhelut ohittavat saman syklin aikaisempien puhelujen arvot, joten määrää korotetaan vain kerran. Jos Seuraava tila riippuu nykyisestä tilasta, suosittelemme käyttämään updater-funktiolomaketta, sen sijaan:

this.setState((state) => { return {quantity: state.quantity + 1};});

component.forceUpdate(callback)

class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};

 render() { return <CustomButton /> ; // props.color will be set to blue }

 render() { return <CustomButton color={null} /> ; // props.color will remain null }