Change language
Python.Engineering Wiki Setstate In Javascript

Setstate In Javascript

__del__ | __main__ Python module | array Python module | code Python module | COM PHP module | copy Python module | dis Python module | DOM PHP module | Ev PHP module | FFI PHP module | gc Python module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | operator Python module | os Python module | PS PHP module | pty Python module | Python functions | re Python module | resource Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

Tenere traccia dello stato di un’applicazione è il modo in cui un’applicazione a pagina singola (SAP) registra le modifiche e le rende all’utente. A differenza di un framework model, view, controller (MVC), i SAP non reindirizzano l’utente e quindi necessitano di un modo per gestire le modifiche provenienti dal lato client. Per rivedere i framework MVC, fare riferimento a questa guida.

In React, i componenti stessi possono gestire il proprio stato e rifare il rendering di conseguenza. Questo viene fatto tramite i metodi del ciclo di vita, che sono discussi in modo approfondito qui. Ai fini di questo articolo, daremo un’occhiata a come cambiare lo stato usando setState.

Questa guida presuppone una familiarità di base con React. Per rivedere o apprendere le basi di React, questo articolo elenca alcune delle migliori risorse di apprendimento di React.

Cos’è React setState?

Il metodo React setState è come modificare lo stato di un componente con stabilità. Ci sono alcune linee guida specifiche per cambiare stato in React.

  1. setState può essere chiamato solo all’interno di un componente di classe. I componenti della classe chiamano il metodo constructor() e impostano uno stato iniziale. Quindi possiamo cambiare lo stato più in basso chiamando setState.

    Ci sono due diversi tipi di componenti in React. C’è la componente funzionale e la componente di classe. Per i nostri scopi, ci riferiamo solo ai componenti della classe. Per un’ulteriore revisione, consulta questo articolo sulle differenze tra componenti funzionali e di classe.
  2. Chiamando solo setState in un componente di classe, possiamo fare riferimento direttamente al componente stesso usando la parola chiave this. Chiamare this.setState()è la migliore pratica e garantisce che il tuo codice non si interrompa.
  3. Non modificare direttamente lo stato. La modifica diretta dello stato non si registrerà su React per eseguire nuovamente il rendering. Il punto centrale del cambiamento di stato è attivare un re-rendering di quel componente per riflettere le modifiche all’utente.

Ora diamo un’occhiata alla sintassi nel contesto di queste linee guida.

Sintassi di setState React

Partendo dalla prima linea guida, vedi che possiamo usare solo setState all’interno di un componente di classe. Ad esempio, supponiamo di avere un’app per lo shopping e di voler implementare un carrello della spesa. Potremmo impostare un componente di classe chiamato Cart. Questo componente sarà responsabile della gestione del proprio stato quando un utente aggiunge un articolo al carrello.

Scomponendo il codice sopra, dichiariamo il componente di classe Cart. Come tutti i componenti di classe , estendiamo React.Component. Questa è la sintassi standard di React.

Poiché vogliamo per assegnare lo stato a questo componente, dobbiamo chiamare il metodo del costruttore. Quindi, il costruttore di base viene chiamato con super(props). è possibile vedere il costruttore di base non chiamato con props. La documentazione ufficiale di React sostiene che il metodo del costruttore di base dovrebbe essere sempre chiamato con props.

Ora che abbiamo fatto attraverso la sintassi React richiesta di costruire un componente di classe per mantenere lo stato, siamo pronti per assegnare il nostro stato iniziale. Questa è l’unica volta che possiamo fare riferimento direttamente allo stato. Assegnare lo stato chiamando this.state = {shoppingCart: [] }ci permette di impostare lo stato iniziale del nostro carrello su un array vuoto.

Esempio di React setState

Nella sezione precedente, abbiamo esaminato la sintassi coinvolta nella dichiarazione di uno stato iniziale. Una volta impostato lo stato nel metodo del costruttore, possiamo eseguire il rendering come al solito:

Il tuo carrello

); } } ReactDOM.render( , document.getElementById(’root’) );

Qui abbiamo un componente di classe Cart con il suo stato iniziale impostato e sta visualizzando il carrello nell’istruzione return del metodo render. Vediamo come possiamo utilizzare setState per aggiornare il nostro carrello.

Definiamo una funzione che aggiungerà un nuovo articolo al nostro carrello conservando gli elementi aggiunti in precedenza.Utilizziamo l’operatore spread di JavaScript (‚Ķ) per fare una copia dello stato iniziale e aggiornarlo con il nuovo stato. In questo modo, il carrello conterrà tutti gli articoli aggiunti.

La funzione addItem può essere utilizzata all’interno dell’attributo onClick di React di un pulsante se vogliamo che l’utente sia in grado di aggiungere quell’elemento una volta che viene fatto clic su un pulsante. Per i nostri scopi, vedere come utilizzare setState nel il contesto di una funzione è sufficiente.

Questo articolo vuole essere un’introduzione per capire come usare setState e non è affatto esaustivo.

Conclusione

In questo articolo abbiamo appreso cos’è setState, alcune linee guida su come usarlo, la sintassi e un breve esempio. Questo è pensato per essere un articolo di base per incoraggiarti a scavare più a fondo e fare pratica nell’aggiornamento di uno stato dei componenti da solo.

Il documentazione ufficiale di React contiene ulteriori esempi che forniranno maggiori opportunità per esercitarsi. Ricorda che nelle applicazioni a pagina singola, tenere traccia dello stato di un componente è essenziale per rendere le modifiche all’utente.