Reazione: la differenza tra il componente di classe e il componente funzionale

Sei in una nuova relazione? Vuoi imparare qualcosa di nuovo in meno di 5 minuti? Scopriamo il componente di reazione.

Cos'è un componente?

Innanzitutto, prima di approfondire questo argomento, dobbiamo sapere esattamente quali sono i suoi componenti.

Il componente (reazione) è definito come un blocco o programma che può essere riutilizzato nell'intero programma (e non in altri), generalmente associato all'elemento dell'interfaccia utente e al suo comportamento.

Ora che conosci le basi, diamo un'occhiata a due tipi di componenti che puoi creare in React, Class Component e Functional Components.

Il componente di classe

Questo è chiamato il componente principale. Abbiamo una "classe" in javascript da ECMAScript 2015. React utilizza questa sintassi per creare un componente di stato con un ciclo di vita. Lo stato viene spesso utilizzato per modificare il comportamento dei nostri elettori o dei loro figli.

Rompiamo questo codice. Qui abbiamo una "classe JS" che eredita la funzione da React.Component, quindi dichiariamo un costruttore che accetta oggetti di scena come argomento. Successivamente, chiamiamo i dati, ci viene richiesto di creare questo tipo di componente per passare i dati ai componenti della classe genitore.

"Requisite" è un oggetto che riceve tutti gli attributi che utilizziamo come tag componente.

Il componente lampada ha una proposta di base che fornisce un blocco HTML con testo e pulsanti.

Premendo l'interruttore di accensione o spegnimento, la nostra posizione è in gioco. della nostra lampada.

questo "stato" è un oggetto con alcune proprietà che cambiano durante l'esecuzione del corso. Non dovrebbe essere modificato direttamente, ma con il metodo setState.

È possibile modificare lo stato come segue:

Componente funzionale

Ora, se vogliamo creare un componente minimo, semplice e stateless, questo ti aiuterà a ridurre la quantità di codice utilizzato e rendere più semplice il principio DRY. Il componente funzionale è una funzione JavaScript che restituisce alcuni Jx.

Considera un esempio di un componente lampadina.

Qui abbiamo una funzione costante che ottiene un oggetto danneggiato chiamato lampState, diventa una variabile locale e valuta se il ritorno di un altro tag immagine è corretto.

Lo useremo ora per mostrare come il componente Lampada può lavorare insieme.

Questo cambierà l'immagine della lampadina quando premi il pulsante.

Che ne dici di ganci?

I hook sono una funzionalità imminente che consente di utilizzare la posizione in un componente funzionale. Questo deve essere spiegato in modo più dettagliato in quanto dobbiamo approfondire la reazione e penso che meriti un suo articolo.

Grazie per la lettura, e se ti piace o no, fammi sapere cosa ne pensi. -