reacționează.Component

această pagină conține o referință API detaliată pentru definiția clasei de componente React. Presupune că sunteți familiarizați cu conceptele fundamentale React, cum ar fi Componentele și recuzita, precum și starea și ciclul de viață. Dacă nu, citiți-le mai întâi.

Prezentare generală

React vă permite să definiți Componentele ca clase sau funcții. Componentele definite ca clase oferă în prezent mai multe caracteristici care sunt descrise în detaliu pe această pagină. Pentru a defini o clasă de componente React, trebuie să extindeți React.Component :

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}

singura metodă pe care trebuie să o definiți într-oReact.Componentsubclasă se numeșterender(). Toate celelalte metode descrise pe această pagină sunt opționale.

vă recomandăm insistent să nu creați propriile clase de componente de bază. În componentele React, reutilizarea codului se realizează în primul rând prin compoziție, mai degrabă decât prin moștenire.

notă:

React nu te obligă să folosești sintaxa clasei ES6. Dacă preferați să o evitați, puteți utiliza modululcreate-react-class sau o abstracție personalizată similară. Aruncați o privire la utilizarea React fără ES6 pentru a afla mai multe.

ciclul de viață al componentei

fiecare componentă are mai multe „metode de ciclu de viață” pe care le puteți suprascrie pentru a rula codul în anumite momente ale procesului. Puteți utiliza această diagramă a ciclului de viață ca o foaie de înșelăciune. În lista de mai jos, metodele ciclului de viață utilizate în mod obișnuit sunt marcate cu caractere aldine. Restul există pentru cazuri de utilizare relativ rare.

montare

aceste metode sunt numite în următoarea ordine atunci când o instanță a unei componente este creată și inserată în DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

notă:

aceste metode sunt considerate moștenite și ar trebui să le evitați în cod nou:

• UNSAFE_componentWillMount()

actualizarea

O actualizare poate fi cauzată de modificări ale recuzită sau de stat. Aceste metode sunt numite în următoarea ordine atunci când o componentă este redată din nou:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

notă:

aceste metode sunt considerate moștenite și ar trebui să le evitați în cod nou:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

demontarea

această metodă se numește atunci când o componentă este eliminat din DOM:

• componentWillUnmount()

manipularea erorilor

aceste metode sunt apelate atunci când există o eroare în timpul randării, într-o metodă a ciclului de viață sau în constructorul oricărei componente copil.

• static getDerivedStateFromError()
• componentDidCatch()

alte API-uri

fiecare componentă oferă și alte API-uri:

• setState()
• forceUpdate()

Proprietăți de clasă

• defaultProps
• displayName

proprietăți instanță

• props
• state

referință

metode utilizate în mod obișnuit ciclul de viață

metodele din această secțiune acoperă marea majoritate a cazurilor de utilizare veți întâlni crearea de componente react. Pentru o referință vizuală, consultați această diagramă a ciclului de viață.

render ()

render()

metodarender() este singura metodă necesară într-o componentă de clasă.

când este apelat, ar trebui să examinezethis.props șithis.state și să returneze unul dintre următoarele tipuri:

• React elements. De obicei creat prin JSX. De exemplu, <div /> și <MyComponent /> sunt elemente React care instruiesc React să randeze un nod DOM sau, respectiv, o altă componentă definită de utilizator.
• matrice și fragmente. Să vă întoarceți mai multe elemente din render. Consultați documentația privind fragmentele pentru mai multe detalii.
• portaluri. Să vă face copii într-un SUBARBOR diferit DOM. Consultați documentația privind portalurile pentru mai multe detalii.
• șir și numere. Acestea sunt redate ca noduri de text în DOM.
• Booleans saunull. Nu face nimic. (Există mai ales pentru a sprijini return test && <Child /> model, unde test este boolean.)

render() funcția ar trebui să fie pură, ceea ce înseamnă că nu Modifică starea componentelor, returnează același rezultat de fiecare dată când este invocat și nu interacționează direct cu browserul.

dacă trebuie să interacționați cu browserul, efectuați lucrările încomponentDidMount() sau în celelalte metode ale ciclului de viață. Păstrarearender() pure face Componentele mai ușor de gândit.

notă

render() nu va fi invocat dacăshouldComponentUpdate() returnează false.

constructor ()

constructor(props)

dacă nu inițializați starea și nu legați metode, nu trebuie să implementați un constructor pentru componenta React.

constructorul pentru o componentă React este apelat înainte de a fi montat. Când implementați constructorul pentru oReact.Component subclasă, ar trebui să apelațisuper(props) înainte de orice altă instrucțiune. În caz contrar, this.props va fi nedefinit în constructor, ceea ce poate duce la erori.

de obicei, în React constructorii sunt utilizați numai în două scopuri:

• inițializarea stării locale prin atribuirea unui obiectthis.state.
• legarea metodelor de tratare a evenimentelor la o instanță.

nu trebuie să apelați setState() în constructor(). În schimb, dacă componenta dvs. trebuie să utilizeze starea locală, atribuiți starea inițială this.state direct în constructor:

constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}

Constructor este singurul loc unde ar trebui să atribuiți this.state direct. În toate celelalte metode, trebuie să utilizați this.setState() în schimb.

evitați introducerea oricăror efecte secundare sau abonamente în constructor. Pentru aceste cazuri de utilizare, utilizați componentDidMount() în schimb.

notă

evitați copierea recuzită în stare! Aceasta este o greșeală comună:

constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}

problema este că este atât inutile (puteți utilizathis.props.color direct în loc), și creează bug-uri (actualizări lacolor propunerii nu va fi reflectată în starea).

utilizați acest model numai dacă doriți intenționat să ignorați actualizările propunerii. În acest caz, este logic să redenumiți recuzita pentru a fi numită initialColor sau defaultColor. Apoi puteți forța o componentă să-și” reseteze”starea internă modificând key atunci când este necesar.

citiți postarea noastră pe blog despre evitarea stării derivate pentru a afla ce trebuie să faceți dacă credeți că aveți nevoie de o stare care să depindă de recuzită.

componentDidMount ()

componentDidMount()

componentDidMount() este invocat imediat după montarea unei componente (introdusă în arbore). Inițializarea care necesită noduri DOM ar trebui să meargă aici. Dacă trebuie să încărcați date dintr-un punct final la distanță, acesta este un loc bun pentru a instantia cererea de rețea.

această metodă este un loc bun pentru a configura orice abonamente. Dacă faceți acest lucru, nu uitați să vă dezabonați în componentWillUnmount().

puteți apelasetState() imediat încomponentDidMount(). Aceasta va declanșa o redare suplimentară, dar se va întâmpla înainte ca browserul să actualizeze ecranul. Acest lucru garantează că, chiar dacă render() va fi apelat de două ori în acest caz, utilizatorul nu va vedea starea intermediară. Utilizați acest model cu prudență, deoarece cauzează adesea probleme de performanță. În majoritatea cazurilor, ar trebui să puteți atribui starea inițială în constructor() în schimb. Cu toate acestea, poate fi necesar pentru cazuri precum modalele și sfaturile de instrumente atunci când trebuie să măsurați un nod DOM înainte de a reda ceva care depinde de dimensiunea sau poziția sa.

componentDidUpdate ()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() este invocat imediat după actualizarea are loc. Această metodă nu este solicitată pentru randarea inițială.

utilizați acest lucru ca o oportunitate de a opera pe DOM atunci când componenta a fost actualizată. Acesta este, de asemenea, un loc bun pentru a face cereri de rețea, atâta timp cât comparați recuzita actuală cu recuzita anterioară (de ex. este posibil ca o solicitare de rețea să nu fie necesară dacă recuzita nu s-a schimbat).

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

puteți apela setState() imediat în componentDidUpdate() dar rețineți că trebuie să fie înfășurat într-o stare ca în exemplul de mai sus, sau veți provoca o buclă infinită. De asemenea, ar provoca o re-redare suplimentară care, deși nu este vizibilă pentru utilizator, poate afecta performanța componentei. Dacă încercați să” oglindiți ” o anumită stare într-o recuzită care vine de sus, luați în considerare utilizarea recuzitei direct. Citiți mai multe despre motivul pentru care copierea recuzitelor în stare provoacă erori.

dacă componenta dvs. implementeazăgetSnapshotBeforeUpdate() ciclul de viață (care este rar), valoarea returnată va fi transmisă ca al treilea parametru „instantaneu” lacomponentDidUpdate(). În caz contrar, acest parametru va fi nedefinit.

notă

componentDidUpdate() nu va fi invocat dacăshouldComponentUpdate() returnează false.

componentWillUnmount ()

componentWillUnmount()

componentWillUnmount() este invocat imediat înainte ca o componentă să fie demontată și distrusă. Efectuați orice curățare necesară în această metodă, cum ar fi invalidarea cronometrelor, anularea cererilor de rețea sau curățarea abonamentelor create în componentDidMount().

nu trebuie să apelațisetState() încomponentWillUnmount() deoarece componenta nu va fi niciodată redată. Odată ce o instanță componentă este demontată, nu va mai fi montată niciodată.

metode utilizate rar pentru ciclul de viață

metodele din această secțiune corespund unor cazuri de utilizare mai puțin frecvente. Sunt la îndemână din când în când, dar majoritatea componentelor dvs. probabil că nu au nevoie de niciuna dintre ele. Puteți vedea majoritatea metodelor de mai jos în această diagramă a ciclului de viață dacă faceți clic pe caseta de selectare „Afișați ciclurile de viață mai puțin frecvente” din partea de sus a acesteia.

shouldComponentUpdate ()

shouldComponentUpdate(nextProps, nextState)

utilizațishouldComponentUpdate() pentru a anunța React dacă ieșirea unei componente nu este afectată de modificarea curentă a stării sau a recuzitei. Comportamentul implicit este de a re-face pe fiecare schimbare de stat, și în marea majoritate a cazurilor ar trebui să se bazeze pe comportamentul implicit.

shouldComponentUpdate() este invocat înainte de redare atunci când recuzită noi sau de stat sunt primite. Implicit latrue. Această metodă nu este apelată pentru randarea inițială sau când se utilizează forceUpdate().

această metodă există doar ca o optimizare a performanței. Nu vă bazați pe ea pentru a „preveni” o redare, deoarece acest lucru poate duce la erori. Luați în considerare utilizarea built-in PureComponent în loc de a scrie shouldComponentUpdate() de mână. PureComponent efectuează o comparație superficială a recuzitei și a stării și reduce șansa de a sări peste o actualizare necesară.

dacă sunteți sigur că doriți să-l scrie de mână, puteți compara this.props cu nextProps și this.state cu nextState și să se întoarcă false pentru a spune react actualizarea poate fi omisă. Rețineți că returnarea false nu împiedică redarea componentelor copil atunci când starea lor se schimbă.

nu recomandăm efectuarea unor verificări profunde ale egalității sau utilizareaJSON.stringify() înshouldComponentUpdate(). Este foarte ineficient și va afecta performanța.

în prezent, dacă shouldComponentUpdate() returnează false, atunci UNSAFE_componentWillUpdate()render() și componentDidUpdate() nu va fi invocat. În viitor, React poate trata shouldComponentUpdate()mai degrabă ca un indiciu decât ca o directivă strictă, iar returnareafalse poate duce în continuare la o re-redare a componentei.

static getDerivedStateFromProps ()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps este invocat chiar înainte de a apela metoda de randare, atât pe montura inițială, cât și pe actualizările ulterioare. Ar trebui să returneze un obiect pentru a actualiza starea sau null pentru a actualiza nimic.

această metodă există pentru cazuri rare de utilizare în care starea depinde de schimbările de recuzită în timp. De exemplu, ar putea fi util pentru implementarea unei componente<Transition> care compară copiii anteriori și următorii pentru a decide care dintre ei să animeze și să iasă.

derivând de stat duce la cod verbose și face componentele dificil să se gândească.Asigurați-vă că sunteți familiarizați cu alternative mai simple:

• dacă trebuie să efectuați un efect secundar (de exemplu, preluarea datelor sau o animație) ca răspuns la o modificare a recuzitei, utilizațicomponentDidUpdate ciclul de viață.
• dacă doriți să re-calcula unele date numai atunci când un propunerii modificări, utilizați un ajutor memoization în schimb.
• dacă doriți să „resetați” o anumită stare atunci când o recuzită se schimbă, luați în considerare fie efectuarea unei componente complet controlate, fie complet necontrolate cu unkey în schimb.

această metodă nu are acces la instanța componentă. Dacă doriți, puteți reutiliza un cod între getDerivedStateFromProps() și celelalte metode de clasă prin extragerea funcțiilor pure ale recuzitei componente și starea în afara definiției clasei.

rețineți că această metodă este declanșată pe fiecare randare, indiferent de cauză. Acest lucru este în contrast cu UNSAFE_componentWillReceiveProps, care se declanșează numai atunci când părintele provoacă o re-randare și nu ca urmare a unui localsetState.

getSnapshotBeforeUpdate ()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() este invocat chiar înainte ca cea mai recentă ieșire randată să fie angajată, de ex.DOM. Acesta permite componentei dvs. să capteze unele informații din DOM (de exemplu, poziția de derulare) înainte de a fi modificată. Orice valoare returnată de acest ciclu de viață va fi transmisă ca parametru la componentDidUpdate().

acest caz de utilizare nu este comun, dar poate apărea în UIs ca un fir de chat care trebuie să se ocupe de poziția de defilare într-un mod special.

o valoare instantaneu (saunull) ar trebui să fie returnate.

de exemplu:

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> ); }}

în exemplele de mai sus, este important să citiți proprietatea scrollHeight în getSnapshotBeforeUpdate deoarece pot exista întârzieri între ciclurile de viață ale fazei „render” (cum ar fi render) și „comite” cicluri de viață de fază (cum ar fi getSnapshotBeforeUpdate și componentDidUpdate).

limitele de eroare

limitele de eroare sunt componente React care prind erori JavaScript oriunde în arborele lor de componente copil, înregistrează acele erori și afișează o interfață de rezervă în locul arborelui de componente care s-a prăbușit. Limitele de eroare captează erori în timpul redării, în metodele ciclului de viață și în Constructorii întregului copac de sub ele.

o componentă de clasă devine o limită de eroare dacă definește una (sau ambele) dintre metodele ciclului de viațăstatic getDerivedStateFromError() saucomponentDidCatch(). Actualizarea stării din aceste cicluri de viață vă permite să capturați o eroare JavaScript netratată în arborele de mai jos și să afișați o interfață de rezervă.

utilizați numai limitele de eroare pentru recuperarea de la excepții neașteptate; nu încercați să le utilizați pentru fluxul de control.

pentru mai multe detalii, consultați tratarea erorilor în React 16.

notă

limitele de eroare captează numai erorile din componentele de sub ele din arbore. O limită de eroare nu poate prinde o eroare în sine.

static getDerivedStateFromError ()

static getDerivedStateFromError(error)

acest ciclu de viață este invocat după ce o eroare a fost aruncată de un descendent component.It primește eroarea care a fost aruncată ca parametru și ar trebui să returneze o valoare pentru a actualiza starea.

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; }}

notă

getDerivedStateFromError() este apelat în timpul fazei de „render”, astfel încât efectele secundare nu sunt permise.Pentru aceste cazuri de utilizare, utilizați componentDidCatch() în schimb.

componentDidCatch ()

componentDidCatch(error, info)

acest ciclu de viață este invocat după ce o eroare a fost aruncată de un descendent component.It primește doi parametri:

1. error – eroarea care a fost aruncată.
2. info – un obiect cucomponentStack cheie care conține informații despre ce componentă a aruncat eroarea.

componentDidCatch() se numește în timpul fazei „commit” , deci efectele secundare sunt permitted.It ar trebui să fie utilizate pentru lucruri cum ar fi erori de logare:

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; }}

construcțiile de producție și dezvoltare ale React diferă ușor în modul în carecomponentDidCatch() gestionează Erorile.

la dezvoltare, erorile vor exploda până lawindow, ceea ce înseamnă că oricewindow.onerror sauwindow.addEventListener('error', callback) va intercepta Erorile care au fost capturate decomponentDidCatch().

la producție, în schimb, erorile nu vor exploda, ceea ce înseamnă că orice manipulator de erori strămoș va primi doar erori care nu sunt prinse în mod explicit decomponentDidCatch().

notă

în cazul unei erori, puteți face o interfață de rezervă cucomponentDidCatch() apelândsetState, dar acest lucru va fi depreciat într-o versiune viitoare.Utilizați static getDerivedStateFromError() pentru a gestiona în schimb redarea de rezervă.

metode ale ciclului de viață vechi

metodele ciclului de viață de mai jos sunt marcate ca „moștenire”. Încă funcționează, dar nu vă recomandăm să le folosiți în noul cod. Puteți afla mai multe despre migrarea departe de metodele ciclului de viață vechi în această postare pe blog.

UNSAFE_componentWillMount ()

UNSAFE_componentWillMount()

notă

acest ciclu de viață a fost denumit anteriorcomponentWillMount. Acest nume va continua să funcționeze până la versiunea 17. Utilizațirename-unsafe-lifecycles codemod pentru a actualiza automat componentele.

UNSAFE_componentWillMount() este invocat chiar înainte de montare. Se numește înainte render(), prin urmare apelarea setState() sincron în această metodă nu va declanșa o redare suplimentară. În general, vă recomandăm să utilizați constructor() în schimb pentru inițializarea stării.

evitați introducerea oricăror efecte secundare sau abonamente în această metodă. Pentru aceste cazuri de utilizare, utilizați componentDidMount() în schimb.

aceasta este singura metodă de ciclu de viață numită pe randarea serverului.

UNSAFE_componentWillReceiveProps ()

UNSAFE_componentWillReceiveProps(nextProps)

notă

acest ciclu de viață a fost denumit anteriorcomponentWillReceiveProps. Acest nume va continua să funcționeze până la versiunea 17. Utilizațirename-unsafe-lifecycles codemod pentru a actualiza automat componentele.

notă:

utilizarea acestei metode a ciclului de viață duce adesea la erori și inconsecvențe

• dacă trebuie să efectuați un efect secundar (de exemplu, preluarea datelor sau o animație) ca răspuns la o modificare a recuzitei, utilizațicomponentDidUpdate ciclul de viață în schimb.
• dacă ați folositcomponentWillReceiveProps pentru re-calcul unele date numai atunci când un propunerii modificări, utilizați un ajutor memoization în schimb.
• dacă ați folosit componentWillReceivePropspentru a „reseta” o anumită stare atunci când un recuzită se schimbă, luați în considerare fie efectuarea unei componente complet controlate, fie complet necontrolate cu un key în schimb.

pentru alte cazuri de utilizare, urmați recomandările din această postare pe blog despre starea derivată.

UNSAFE_componentWillReceiveProps() este invocat înainte ca o componentă montată să primească recuzită nouă. Dacă trebuie să actualizați starea ca răspuns la modificările propunerii (de exemplu, pentru a o reseta), puteți compara this.props și nextProps și puteți efectua tranziții de stare folosind this.setState() în această metodă.

rețineți că dacă o componentă părinte determină re-randarea componentei dvs., această metodă va fi apelată chiar dacă recuzita nu s-a schimbat. Asigurați-vă că comparați valorile curente și următoare dacă doriți doar să gestionați modificările.

React nu apeleazăUNSAFE_componentWillReceiveProps() cu recuzită inițială în timpul montării. Se numește această metodă numai dacă unele elemente de recuzită componente pot actualiza. Apelarea this.setState() în general nu declanșează UNSAFE_componentWillReceiveProps().

UNSAFE_componentWillUpdate ()

UNSAFE_componentWillUpdate(nextProps, nextState)

notă

acest ciclu de viață a fost denumit anteriorcomponentWillUpdate. Acest nume va continua să funcționeze până la versiunea 17. Utilizațirename-unsafe-lifecycles codemod pentru a actualiza automat componentele.

UNSAFE_componentWillUpdate() este invocat chiar înainte de redare atunci când recuzită noi sau de stat sunt primite. Utilizați acest lucru ca o oportunitate de a efectua pregătirea înainte de apariția unei actualizări. Această metodă nu este solicitată pentru randarea inițială.

rețineți că nu puteți apela this.setState() aici; nici nu ar trebui să faceți altceva (de exemplu, expediați o acțiune Redux) care ar declanșa o actualizare a unei componente React înainte de UNSAFE_componentWillUpdate() returnează.

De obicei, această metodă poate fi înlocuită cucomponentDidUpdate(). Dacă ați citit din DOM în această metodă (de exemplu, pentru a salva o poziție de defilare), puteți muta acea logică în getSnapshotBeforeUpdate().

notă

UNSAFE_componentWillUpdate() nu va fi invocat dacăshouldComponentUpdate() returnează false.

alte API-uri

spre deosebire de metodele ciclului de viață de mai sus (care reacționează apeluri pentru dvs.), metodele de mai jos sunt metodele pe care le puteți apela din componentele dvs.

există doar două dintre ele: setState() și forceUpdate().

setState ()

setState(updater, )

setState() cere modificări la starea componentei și spune React că această componentă și copiii săi trebuie să fie re-randat cu starea actualizată. Aceasta este metoda principală pe care o utilizați pentru a actualiza interfața cu utilizatorul ca răspuns la manipulatorii de evenimente și răspunsurile serverului.

gândiți-vă lasetState() ca o cerere mai degrabă decât o comandă imediată pentru actualizarea componentei. Pentru o performanță mai bună percepută, React o poate întârzia și apoi actualiza mai multe componente într-o singură trecere. React nu garantează că modificările de stat sunt aplicate imediat.

setState() nu actualizează întotdeauna imediat componenta. Se poate lot sau amâna actualizarea până mai târziu. Acest lucru face ca citirea this.state imediat după apelarea setState() să fie o capcană potențială. În schimb, utilizațicomponentDidUpdate sau unsetState apel invers (setState(updater, callback)), oricare dintre acestea fiind garantate să se declanșeze după aplicarea actualizării. Dacă trebuie să setați starea pe baza stării anterioare, citiți despre argumentul updater de mai jos.

setState() va duce întotdeauna la o re-randare, cu excepția cazului înshouldComponentUpdate() returneazăfalse. Dacă se folosesc obiecte mutabile și logica De redare condiționată nu poate fi implementată în shouldComponentUpdate(), apelarea setState() numai atunci când noua stare diferă de starea anterioară va evita redările inutile.

primul argument este oupdater funcție cu semnătura:

(state, props) => stateChange

state este o referință la starea componentei în momentul aplicării modificării. Nu trebuie mutat direct. În schimb, modificările ar trebui să fie reprezentate prin construirea unui obiect nou bazat pe intrarea de la state și props. De exemplu, să presupunem că am vrut să incrementăm o valoare în stare cu props.step:

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

ambele state și props primite de funcția de actualizare sunt garantate a fi actualizate. Ieșirea actualizatorului este fuzionată superficial cu state.

al doilea parametrusetState() este o funcție opțională de apel invers care va fi executată odată cesetState este finalizată și componenta este redată din nou. În general, vă recomandăm să utilizați componentDidUpdate() pentru o astfel de logică.

puteți transmite opțional un obiect ca prim argument setState() în loc de o funcție:

setState(stateChange)

aceasta realizează o îmbinare superficială a stateChange în noua stare, de exemplu, pentru a ajusta un coș de cumpărături cantitate element:

this.setState({quantity: 2})

această formă de setState() este, de asemenea, asincron, și mai multe apeluri în timpul aceluiași ciclu pot fi dozate împreună. De exemplu, dacă încercați să incrementați o cantitate de articol de mai multe ori în același ciclu, aceasta va duce la echivalentul a:

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

apelurile ulterioare vor suprascrie valorile apelurilor anterioare din același ciclu, astfel încât cantitatea va fi incrementată o singură dată. Dacă starea următoare depinde de starea curentă, vă recomandăm să utilizați formularul funcției updater, în schimb:

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

pentru mai multe detalii, consultați:

• starea și ghidul ciclului de viață
• în profunzime: când și de ce suntsetState() apeluri dozate?
• în profunzime: de ce nu este this.state actualizat imediat?

forceUpdate ()

component.forceUpdate(callback)

în mod implicit, când starea sau recuzita componentei dvs. se schimbă, componenta dvs. va fi redată. Dacă metoda render() depinde de alte date, puteți spune React că componenta are nevoie de re-randare apelând forceUpdate().

apelareaforceUpdate() va face carender() să fie apelată pe componentă, sărindshouldComponentUpdate(). Aceasta va declanșa metodele ciclului de viață normal pentru componentele copil, inclusiv metodashouldComponentUpdate() pentru fiecare copil. React va actualiza DOM numai dacă marcajul se modifică.

în mod normal, ar trebui să încercați să evitați toate utilizările forceUpdate() și să citiți numai din this.props și this.state în render().

Proprietăți de clasă

defaultProps

defaultProps poate fi definit ca o proprietate pe clasa componentă în sine, pentru a seta recuzita implicit pentru clasa. This is used for undefined props, but not for null props. For example:

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

If props.color is not provided, it will be set by default to 'blue':

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

If props.color is set to null, it will remain null:

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

displayName

The displayName string is used in debugging messages. De obicei, nu trebuie să o setați în mod explicit, deoarece este dedusă din numele funcției sau clasei care definește componenta. Poate doriți să o setați în mod explicit dacă doriți să afișați un nume diferit în scopuri de depanare sau când creați o componentă de ordin superior, consultați împachetarea numelui afișat pentru depanare ușoară pentru detalii.

proprietăți instanță

recuzită

this.props conține recuzita care au fost definite de apelantul acestei componente. A se vedea componente și recuzită pentru o introducere în recuzită.

în particular, this.props.children este o recuzită specială, definită de obicei de etichetele copil în expresia JSX, mai degrabă decât în eticheta în sine.

stare

Starea conține date specifice acestei componente care se pot modifica în timp. Starea este definită de utilizator și ar trebui să fie un obiect JavaScript simplu.

dacă o anumită valoare nu este utilizată pentru redare sau flux de date (de exemplu, un ID cronometru), nu trebuie să o puneți în stare. Astfel de valori pot fi definite ca câmpuri pe instanța componentă.

vezi starea și ciclul de viață pentru mai multe informații despre starea.

nu mutați niciodată this.state direct, deoarece apelarea setState() poate înlocui mutația pe care ați făcut-o. Tratați this.state ca și cum ar fi imuabil.