Questa pagina contiene un riferimento API dettagliato per la definizione della classe componente React. Presuppone che tu abbia familiarità con i concetti fondamentali di React, come Componenti e oggetti di scena, nonché lo stato e il ciclo di vita. Se non lo sei, leggili prima.
Panoramica
React consente di definire i componenti come classi o funzioni. I componenti definiti come classi attualmente forniscono più funzionalità descritte in dettaglio in questa pagina. Per definire una classe di componenti React, è necessario estendere React.Component:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}L’unico metodo da definire in una sottoclasseReact.Componentsi chiamarender(). Tutti gli altri metodi descritti in questa pagina sono facoltativi.
Si consiglia vivamente di non creare le proprie classi di componenti di base. Nei componenti React, il riutilizzo del codice viene ottenuto principalmente attraverso la composizione piuttosto che l’ereditarietà.
Nota:
React non ti obbliga ad usare la sintassi della classe ES6. Se si preferisce evitarlo, è possibile utilizzare il modulo
create-react-classo un’astrazione personalizzata simile. Dai un’occhiata all’uso di React senza ES6 per saperne di più.
Il ciclo di vita del componente
Ogni componente ha diversi “metodi del ciclo di vita” che è possibile sovrascrivere per eseguire il codice in momenti particolari del processo. È possibile utilizzare questo diagramma del ciclo di vita come un cheat sheet. Nell’elenco seguente, i metodi del ciclo di vita comunemente utilizzati sono contrassegnati in grassetto. Il resto di essi esiste per casi d’uso relativamente rari.
Montaggio
Questi metodi vengono chiamati nell’ordine seguente quando un’istanza di un componente è stato creato e inserito nel DOM:
constructor()static getDerivedStateFromProps()render()componentDidMount()
Nota:
Questi metodi sono considerati legacy e si dovrebbe evitare di loro nel nuovo codice:
UNSAFE_componentWillMount()
Aggiornamento
Un aggiornamento può essere causato da cambiamenti di costumi o di stato. Questi metodi vengono chiamati nell’ordine seguente quando un componente è in fase di ri-renderizzati:
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
Nota:
Questi metodi sono considerati legacy e si dovrebbe evitare di loro nel nuovo codice:
UNSAFE_componentWillUpdate()UNSAFE_componentWillReceiveProps()
Smontare
Questo metodo viene chiamato quando un componente viene rimosso da DOM:
componentWillUnmount()
Gestione degli errori
Questi metodi vengono chiamati quando c’è un errore durante il rendering, in un ciclo di vita di un metodo o nel costruttore di qualsiasi componente figlio.
-
static getDerivedStateFromError() -
componentDidCatch()
Altre API
Ogni componente fornisce anche altre API:
setState()forceUpdate()
Proprietà
defaultPropsdisplayName
le Proprietà di Istanza
propsstate
Riferimento
Comunemente Utilizzati Metodi del Ciclo di vita
I metodi di questa sezione riguardano la stragrande maggioranza dei casi d’uso si incontrano creazione di Reagire componenti. Per un riferimento visivo, controlla questo diagramma del ciclo di vita.
render ()
render()Ilrender() metodo è l’unico metodo richiesto in un componente di classe.
Quando viene chiamato, dovrebbe esaminare this.props e this.state e restituire uno dei seguenti tipi:
- React elements. Tipicamente creato tramite JSX. Ad esempio,
<div />e<MyComponent />sono elementi React che istruiscono React a rendere rispettivamente un nodo DOM o un altro componente definito dall’utente. - Array e frammenti. Consente di restituire più elementi dal rendering. Vedere la documentazione sui frammenti per maggiori dettagli.
- Portali. Consente di rendere i bambini in un sottoalbero DOM diverso. Vedere la documentazione sui portali per maggiori dettagli.
- Stringa e numeri. Questi sono resi come nodi di testo nel DOM.
- Booleani o
null. Non rendete nulla. (Principalmente esiste per supportarereturn test && <Child />pattern, dovetestè booleano.)
La funzionerender() deve essere pura, il che significa che non modifica lo stato del componente, restituisce lo stesso risultato ogni volta che viene richiamato e non interagisce direttamente con il browser.
Se hai bisogno di interagire con il browser, esegui il tuo lavoro incomponentDidMount() o negli altri metodi del ciclo di vita. Mantenererender() puro rende i componenti più facili da pensare.
Nota
render()non verrà richiamato seshouldComponentUpdate()restituisce false.
constructor ()
constructor(props)Se non si inizializza lo stato e non si legano i metodi, non è necessario implementare un costruttore per il componente React.
Il costruttore di un componente React viene chiamato prima di essere montato. Quando si implementa il costruttore per una sottoclasseReact.Component, è necessario chiamaresuper(props) prima di qualsiasi altra istruzione. Altrimenti, this.props non sarà definito nel costruttore, il che può portare a bug.
In genere, in React i costruttori vengono utilizzati solo per due scopi:
- Inizializzando lo stato locale assegnando un oggetto a
this.state. - Associazione dei metodi del gestore di eventi a un’istanza.
Non si deve chiamare setState()nel constructor(). Invece, se il componente deve utilizzare lo stato locale, assegnare lo stato iniziale a this.state direttamente nel costruttore:
constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}Il costruttore è l’unico posto in cui è necessario assegnare this.state direttamente. In tutti gli altri metodi, è necessario utilizzare this.setState().
Evitare di introdurre effetti collaterali o sottoscrizioni nel costruttore. Per questi casi d’uso, utilizzare invece componentDidMount().
Nota
Evitare di copiare oggetti di scena in stato! Questo è un errore comune:
constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}Il problema è che non è necessario (puoi usare direttamente
this.props.color) e crea bug (gli aggiornamenti al propcolornon si rifletteranno nello stato).Utilizzare questo modello solo se si desidera ignorare intenzionalmente gli aggiornamenti prop. In tal caso, ha senso rinominare il puntello da chiamare
initialColorodefaultColor. È quindi possibile forzare un componente a “resettare”il suo stato interno modificando il suokeyquando necessario.Leggi il nostro post sul blog su come evitare lo stato derivato per sapere cosa fare se pensi di aver bisogno di uno stato per dipendere dagli oggetti di scena.
componentDidMount ()
componentDidMount() componentDidMount() viene richiamato immediatamente dopo il montaggio di un componente (inserito nell’albero). L’inizializzazione che richiede i nodi DOM dovrebbe andare qui. Se è necessario caricare i dati da un endpoint remoto, questo è un buon posto per istanziare la richiesta di rete.
Questo metodo è un buon posto per impostare eventuali sottoscrizioni. Se lo fai, non dimenticare di annullare l’iscrizione in componentWillUnmount().
Puoi chiamare setState() immediatamente in componentDidMount(). Si attiverà un rendering in più, ma accadrà prima che il browser aggiorna lo schermo. Ciò garantisce che anche se render() verrà chiamato due volte in questo caso, l’utente non vedrà lo stato intermedio. Utilizzare questo modello con cautela perché spesso causa problemi di prestazioni. Nella maggior parte dei casi, dovresti essere in grado di assegnare lo stato iniziale nel constructor(). Può, tuttavia, essere necessario per casi come modali e tooltip quando è necessario misurare un nodo DOM prima di eseguire il rendering di qualcosa che dipende dalla sua dimensione o posizione.
componentDidUpdate ()
componentDidUpdate(prevProps, prevState, snapshot)componentDidUpdate() viene richiamato immediatamente dopo l’aggiornamento. Questo metodo non viene chiamato per il rendering iniziale.
Utilizzare questo come un’opportunità per operare sul DOM quando il componente è stato aggiornato. Questo è anche un buon posto per fare richieste di rete finché si confrontano gli oggetti di scena attuali con oggetti di scena precedenti (ad esempio una richiesta di rete potrebbe non essere necessaria se gli oggetti di scena non sono cambiati).
componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}Puoi chiamaresetState()immediatamente incomponentDidUpdate() ma nota che deve essere avvolto in una condizione come nell’esempio sopra, altrimenti causerai un ciclo infinito. Causerebbe anche un ulteriore re-rendering che, sebbene non visibile all’utente, può influire sulle prestazioni del componente. Se stai cercando di” rispecchiare ” uno stato su un puntello proveniente dall’alto, considera invece di utilizzare direttamente il puntello. Per saperne di più sul perché la copia di oggetti di scena in stato provoca bug.
Se il componente implementa il ciclo di vitagetSnapshotBeforeUpdate()(che è raro), il valore restituito verrà passato come terzo parametro “snapshot” acomponentDidUpdate(). Altrimenti questo parametro non sarà definito.
Nota
componentDidUpdate()non verrà richiamato seshouldComponentUpdate()restituisce false.
componentWillUnmount ()
componentWillUnmount() componentWillUnmount() viene richiamato immediatamente prima che un componente venga smontato e distrutto. Eseguire qualsiasi pulizia necessaria in questo metodo, ad esempio invalidare i timer, annullare le richieste di rete o ripulire le sottoscrizioni create in componentDidMount().
Non si deve chiamare setState() in componentWillUnmount() perché il componente non verrà mai ri-renderizzato. Una volta che un’istanza componente viene smontata, non verrà mai più montata.
Metodi del ciclo di vita usati raramente
I metodi in questa sezione corrispondono a casi d’uso non comuni. Sono a portata di mano una volta ogni tanto, ma la maggior parte dei tuoi componenti probabilmente non ne ha bisogno. Puoi vedere la maggior parte dei metodi di seguito in questo diagramma del ciclo di vita se fai clic sulla casella di controllo “Mostra cicli di vita meno comuni” nella parte superiore di esso.
shouldComponentUpdate ()
shouldComponentUpdate(nextProps, nextState)UsashouldComponentUpdate() per far sapere a React se l’output di un componente non è influenzato dalla modifica corrente di stato o oggetti di scena. Il comportamento predefinito è quello di ri-renderizzare su ogni modifica di stato e nella stragrande maggioranza dei casi è necessario fare affidamento sul comportamento predefinito.
shouldComponentUpdate() viene richiamato prima del rendering quando vengono ricevuti nuovi oggetti di scena o stato. Il valore predefinito è true. Questo metodo non viene chiamato per il rendering iniziale o quando viene utilizzato forceUpdate().
Questo metodo esiste solo come ottimizzazione delle prestazioni. Non fare affidamento su di esso per “prevenire” un rendering, in quanto ciò può portare a bug. Si consiglia di utilizzare il built-in PureComponent invece di scrivere shouldComponentUpdate() a mano. PureComponent esegue un confronto superficiale di oggetti di scena e stato, e riduce la possibilità che si salta un aggiornamento necessario.
Se si è certi che si desidera scrivere a mano, si possono confrontare i this.props con nextProps e this.state con nextState e ritorno false per dire a Reagire l’aggiornamento può essere ignorato. Si noti che la restituzione difalse non impedisce il rendering dei componenti figlio quando il loro stato cambia.
Non è consigliabile eseguire controlli di uguaglianza profondi o utilizzareJSON.stringify()inshouldComponentUpdate(). È molto inefficiente e danneggerà le prestazioni.
Attualmente, se shouldComponentUpdate() torna false, quindi UNSAFE_componentWillUpdate()render() e componentDidUpdate() non sarà richiamato. In futuro React potrebbe trattare shouldComponentUpdate() come un suggerimento piuttosto che una direttiva rigorosa, e restituire false potrebbe ancora comportare un re-rendering del componente.
static getDerivedStateFromProps ()
static getDerivedStateFromProps(props, state)getDerivedStateFromProps viene richiamato subito prima di chiamare il metodo render, sia sul mount iniziale che sugli aggiornamenti successivi. Dovrebbe restituire un oggetto per aggiornare lo stato ,o null per aggiornare nulla.
Questo metodo esiste per casi d’uso rari in cui lo stato dipende dai cambiamenti negli oggetti di scena nel tempo. Ad esempio, potrebbe essere utile per implementare un componente <Transition> che confronta i suoi figli precedenti e successivi per decidere quale di essi animare dentro e fuori.
Lo stato di derivazione porta al codice dettagliato e rende difficile pensare ai componenti.Assicurati di avere familiarità con alternative più semplici:
- Se è necessario eseguire un effetto collaterale (ad esempio, il recupero dei dati o un’animazione) in risposta a una modifica degli oggetti di scena, utilizzare invece
componentDidUpdatelifecycle. - Se vuoi ricalcolare alcuni dati solo quando cambia un prop, usa invece un helper di memoizzazione.
- Se si desidera “resettare” uno stato quando un prop cambia, considerare di rendere un componente completamente controllato o completamente incontrollato con un
keyinvece.
Questo metodo non ha accesso all’istanza del componente. Se lo desideri, puoi riutilizzare del codice tra getDerivedStateFromProps() e gli altri metodi di classe estraendo funzioni pure degli oggetti di scena e dello stato del componente al di fuori della definizione della classe.
Si noti che questo metodo viene attivato su ogni rendering, indipendentemente dalla causa. Questo è in contrasto con UNSAFE_componentWillReceiveProps, che si attiva solo quando il genitore causa un re-render e non come risultato di un locale setState.
getSnapshotBeforeUpdate ()
getSnapshotBeforeUpdate(prevProps, prevState)getSnapshotBeforeUpdate() viene richiamato proprio prima che l’output renderizzato più recente venga eseguito il commit ad esempio per il DOM. Consente al componente di acquisire alcune informazioni dal DOM (ad esempio posizione di scorrimento) prima che venga potenzialmente modificato. Qualsiasi valore restituito da questo ciclo di vita verrà passato come parametro a componentDidUpdate().
Questo caso d’uso non è comune, ma può verificarsi in UI come un thread di chat che deve gestire la posizione di scorrimento in un modo speciale.
Un valore di snapshot (onull) deve essere restituito.
Per esempio:
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> ); }}Negli esempi di cui sopra, è importante leggere il scrollHeight proprietà getSnapshotBeforeUpdate perché ci possono essere dei ritardi tra il “rendering” fase di ciclo di vita (come render) e “commit” fase di ciclo di vita (come getSnapshotBeforeUpdate e componentDidUpdate).
Limiti di errore
I limiti di errore sono componenti React che catturano errori JavaScript ovunque nel loro albero dei componenti figlio, registrano tali errori e visualizzano un’interfaccia utente di fallback anziché l’albero dei componenti che si è arrestato. I limiti di errore rilevano errori durante il rendering, nei metodi del ciclo di vita e nei costruttori dell’intero albero sottostante.
Un componente di classe diventa un limite di errore se definisce uno (o entrambi) dei metodi del ciclo di vitastatic getDerivedStateFromError() ocomponentDidCatch(). L’aggiornamento dello stato da questi cicli di vita consente di acquisire un errore JavaScript non gestito nell’albero sottostante e visualizzare un’interfaccia utente di fallback.
Usa solo i limiti di errore per il ripristino da eccezioni impreviste; non provare a usarli per il flusso di controllo.
Per ulteriori dettagli, vedere Gestione degli errori in React 16.
Nota
I limiti di errore catturano solo gli errori nei componenti sottostanti nell’albero. Un limite di errore non può rilevare un errore all’interno di se stesso.
static getDerivedStateFromError ()
static getDerivedStateFromError(error)Questo ciclo di vita viene richiamato dopo che un discendente ha generato un errore component.It riceve l’errore che è stato generato come parametro e dovrebbe restituire un valore allo stato di aggiornamento.
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; }}Nota
getDerivedStateFromError()viene chiamato durante la fase di “rendering”, quindi gli effetti collaterali non sono consentiti.Per questi casi d’uso, utilizzare invececomponentDidCatch().
componentDidCatch()
componentDidCatch(error, info)il ciclo di vita viene richiamato dopo che un errore è stato gettato da una discendente componente.Riceve due parametri:
-
errorL’errore che è stato gettato. -
info– Un oggetto con una chiavecomponentStackcontenente informazioni su quale componente ha generato l’errore.
componentDidCatch() viene chiamato durante la fase di “commit”, quindi gli effetti collaterali sono permitted.It dovrebbe essere usato per cose come errori di registrazione:
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; }}Le build di produzione e sviluppo di React differiscono leggermente nel modo in cui componentDidCatch() gestisce gli errori.
In fase di sviluppo, gli errori saranno bolla fino awindow, questo significa che qualsiasiwindow.onerrorowindow.addEventListener('error', callback)intercetterà gli errori che sono stati catturati dacomponentDidCatch().
In produzione, invece, gli errori non verranno visualizzati, il che significa che qualsiasi gestore di errori antenato riceverà solo errori non rilevati esplicitamente dacomponentDidCatch().
Nota
In caso di errore, è possibile eseguire il rendering di un’interfaccia utente di fallback con
componentDidCatch()chiamandosetState, ma questo sarà deprecato in una versione futura.Utilizzarestatic getDerivedStateFromError()per gestire invece il rendering di fallback.
Metodi del ciclo di vita legacy
I metodi del ciclo di vita riportati di seguito sono contrassegnati come “legacy”. Funzionano ancora, ma non è consigliabile utilizzarli nel nuovo codice. Puoi saperne di più sulla migrazione dai metodi del ciclo di vita legacy in questo post del blog.
UNSAFE_componentWillMount ()
UNSAFE_componentWillMount()Nota
Questo ciclo di vita era precedentemente denominato
componentWillMount. Quel nome continuerà a funzionare fino alla versione 17. Utilizzare il codemodrename-unsafe-lifecyclesper aggiornare automaticamente i componenti.
UNSAFE_componentWillMount() viene richiamato appena prima del montaggio. Viene chiamato prima dirender(), quindi chiamaresetState() in modo sincrono in questo metodo non attiverà un rendering aggiuntivo. In generale, si consiglia di utilizzare il constructor() invece per l’inizializzazione dello stato.
Evitare di introdurre effetti collaterali o sottoscrizioni in questo metodo. Per questi casi d’uso, utilizzare invece componentDidMount().
Questo è l’unico metodo del ciclo di vita chiamato sul rendering del server.
UNSAFE_componentWillReceiveProps ()
UNSAFE_componentWillReceiveProps(nextProps)Nota
Questo ciclo di vita era precedentemente denominato
componentWillReceiveProps. Quel nome continuerà a funzionare fino alla versione 17. Utilizzare il codemodrename-unsafe-lifecyclesper aggiornare automaticamente i componenti.
Nota:
l’Utilizzo di questo metodo del ciclo di vita spesso porta a errori e incongruenze
- Se avete bisogno di eseguire un effetto collaterale (per esempio, il recupero di dati o di un’animazione) in risposta ad un cambiamento nel puntelli, utilizzare
componentDidUpdateciclo di vita, invece.- Se hai usato
componentWillReceivePropsper ricalcolare alcuni dati solo quando un prop cambia, usa invece un helper di memoizzazione.- Se hai usato
componentWillReceivePropsper “resettare” alcuni stati quando un prop cambia, considera di rendere un componente completamente controllato o completamente incontrollato con unkey.Per altri casi d’uso, segui le raccomandazioni in questo post sul blog sullo stato derivato.
UNSAFE_componentWillReceiveProps() viene richiamato prima che un componente montato riceva nuovi oggetti di scena. Se è necessario aggiornare lo stato in risposta alle modifiche prop (ad esempio, per ripristinarlo), è possibile confrontare this.props e nextProps ed eseguire transizioni di stato utilizzando this.setState() in questo metodo.
Si noti che se un componente genitore causa il rendering del componente, questo metodo verrà chiamato anche se gli oggetti di scena non sono cambiati. Assicurati di confrontare i valori corrente e successivo se vuoi solo gestire le modifiche.
React non chiama UNSAFE_componentWillReceiveProps() con i puntelli iniziali durante il montaggio. Chiama questo metodo solo se alcuni degli oggetti di scena del componente possono aggiornarsi. Chiamare this.setState() generalmente non attiva UNSAFE_componentWillReceiveProps().
UNSAFE_componentWillUpdate ()
UNSAFE_componentWillUpdate(nextProps, nextState)Nota
Questo ciclo di vita era precedentemente denominato
componentWillUpdate. Quel nome continuerà a funzionare fino alla versione 17. Utilizzare il codemodrename-unsafe-lifecyclesper aggiornare automaticamente i componenti.
UNSAFE_componentWillUpdate() viene richiamato appena prima del rendering quando vengono ricevuti nuovi oggetti di scena o stato. Utilizzare questo come un’opportunità per eseguire la preparazione prima che si verifichi un aggiornamento. Questo metodo non viene chiamato per il rendering iniziale.
Nota che non puoi chiamarethis.setState() qui; né dovresti fare nient’altro (ad esempio inviare un’azione Redux) che attiverebbe un aggiornamento a un componente React prima cheUNSAFE_componentWillUpdate() ritorni.
In genere, questo metodo può essere sostituito dacomponentDidUpdate(). Se stavi leggendo dal DOM in questo metodo (ad esempio per salvare una posizione di scorrimento), puoi spostare quella logica su getSnapshotBeforeUpdate().
Nota
UNSAFE_componentWillUpdate()non verrà richiamato seshouldComponentUpdate()restituisce false.
Altre API
A differenza dei metodi del ciclo di vita sopra (che React chiama per te), i metodi seguenti sono i metodi che puoi chiamare dai tuoi componenti.
Ce ne sono solo due: setState() e forceUpdate().
setState ()
setState(updater, )setState() accoda le modifiche allo stato del componente e dice a React che questo componente e i suoi figli devono essere ri-renderizzati con lo stato aggiornato. Questo è il metodo principale utilizzato per aggiornare l’interfaccia utente in risposta ai gestori di eventi e alle risposte del server.
Pensa a setState() come una richiesta piuttosto che un comando immediato per aggiornare il componente. Per prestazioni percepite meglio, React può ritardarlo e quindi aggiornare diversi componenti in un singolo passaggio. React non garantisce che le modifiche di stato vengano applicate immediatamente.
setState() non sempre aggiorna immediatamente il componente. Può batch o rinviare l’aggiornamento a più tardi. Ciò rende la lettura dithis.state subito dopo aver chiamatosetState() una potenziale trappola. Invece, utilizzarecomponentDidUpdate o unsetState callback (setState(updater, callback)), entrambi i quali sono garantiti per il fuoco dopo l’aggiornamento è stato applicato. Se è necessario impostare lo stato in base allo stato precedente, leggere l’argomentoupdater di seguito.
setState() porterà sempre a un re-render a meno che shouldComponentUpdate()restituisce false. Se vengono utilizzati oggetti mutabili e la logica di rendering condizionale non può essere implementata inshouldComponentUpdate(), chiamaresetState() solo quando il nuovo stato differisce dallo stato precedente eviterà re-render non necessari.
Il primo argomento è una funzione updater con la firma:
(state, props) => stateChange state è un riferimento allo stato del componente al momento dell’applicazione della modifica. Non dovrebbe essere direttamente mutato. Invece, le modifiche dovrebbero essere rappresentate costruendo un nuovo oggetto basato sull’input da state e props. Ad esempio, supponiamo di voler incrementare un valore in stato di props.step:
this.setState((state, props) => { return {counter: state.counter + props.step};});Siastatecheprops ricevuti dalla funzione updater sono garantiti per essere aggiornati. L’output del programma di aggiornamento viene unito superficialmente constate.
Il secondo parametro disetState() è una funzione di callback opzionale che verrà eseguita una volta completatosetState e il componente viene ri-renderizzato. Generalmente si consiglia di utilizzare componentDidUpdate() per tale logica invece.
È possibile passare un oggetto come primo argomento setState() invece di una funzione:
setState(stateChange)in Questo modo si esegue una profonda unione di stateChange nel nuovo stato, ad esempio, per regolare un carrello quantità:
this.setState({quantity: 2})Questa forma di setState() è asincrona, e più chiamate durante lo stesso ciclo possono essere raggruppati insieme. Ad esempio, se si tenta di incrementare la quantità di un articolo più di una volta nello stesso ciclo,:
Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)Le chiamate successive sovrascriveranno i valori delle chiamate precedenti nello stesso ciclo, quindi la quantità verrà incrementata solo una volta. Se lo stato successivo dipende dallo stato corrente, si consiglia di utilizzare il modulo funzione updater, invece:
this.setState((state) => { return {quantity: state.quantity + 1};});Per maggiori dettagli, vedere:
- State and Lifecycle guide
- In depth: Quando e perché
setState()chiamate in batch? - In profondità: perché
this.statenon viene aggiornato immediatamente?
forceUpdate ()
component.forceUpdate(callback)Per impostazione predefinita, quando lo stato o gli oggetti di scena del componente cambiano, il componente verrà nuovamente renderizzato. Se il tuo metodorender() dipende da altri dati, puoi dire a React che il componente ha bisogno di un nuovo rendering chiamandoforceUpdate().
Chiamare forceUpdate()causerà la chiamata dirender()sul componente, saltandoshouldComponentUpdate(). Ciò attiverà i normali metodi del ciclo di vita per i componenti figlio, incluso il metodoshouldComponentUpdate() di ogni figlio. React aggiornerà comunque il DOM solo se il markup cambia.
Normalmente si dovrebbe cercare di evitare tutti gli usi diforceUpdate() e leggere solo dathis.props ethis.state inrender().
Proprietà della classe
defaultProps
defaultProps può essere definita come una proprietà sulla classe componente stessa, per impostare gli oggetti di scena predefiniti per la classe. 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. Di solito, non è necessario impostarlo esplicitamente perché è dedotto dal nome della funzione o della classe che definisce il componente. È possibile impostarlo esplicitamente se si desidera visualizzare un nome diverso per scopi di debug o quando si crea un componente di ordine superiore, vedere Avvolgere il nome visualizzato per il debug facile per i dettagli.
Proprietà istanza
props
this.props contiene gli props definiti dal chiamante di questo componente. Vedere Componenti e oggetti di scena per un’introduzione agli oggetti di scena.
In particolare, this.props.children è un puntello speciale, tipicamente definito dai tag figlio nell’espressione JSX piuttosto che nel tag stesso.
stato
Lo stato contiene dati specifici per questo componente che possono cambiare nel tempo. Lo stato è definito dall’utente e dovrebbe essere un semplice oggetto JavaScript.
Se un valore non viene utilizzato per il rendering o il flusso di dati (ad esempio, un ID timer), non è necessario inserirlo nello stato. Tali valori possono essere definiti come campi nell’istanza del componente.
Vedere Stato e ciclo di vita per ulteriori informazioni sullo stato.
Non mutare maithis.state direttamente, poiché chiamaresetState() in seguito può sostituire la mutazione che hai fatto. Tratta this.state come se fosse immutabile.