Tipi di componenti di ReactJs nella programmazione

Cosa sono i componenti in ReactJs?

I componenti si riferiscono fondamentalmente all'unità fondamentale e ai blocchi costitutivi di React. Per renderlo più facile da capire, proprio come qualsiasi cosa al mondo è composta da atomi, i componenti sono solo i costituenti di ReactJS. Qualsiasi applicazione o sito Web sviluppato utilizzando ReactJS sarà costituito dalle diverse unità che sono chiamate componenti.

Nell'immagine mostrata sopra, puoi trovare diversi componenti sull'interfaccia utente del sito web. La barra dei menu è un componente mentre la colonna in primo piano a sinistra è un'altra. Anche il cookie box è un componente e il corpo principale che fornisce tutte le informazioni è di nuovo solo un altro. Quindi l'intera UI è composta dai diversi componenti per rendere il sito web utile per noi. L'interfaccia utente del sito Web può quindi essere considerata come il componente principale.

Tipi di componenti di ReactJs nella programmazione

1. Componente funzionale

I componenti funzionali possono essere creati semplicemente scrivendo le funzioni Javascript. Per essere precisi, i componenti funzionali sono quelle funzioni che accettano i Props e restituiscono il JSX. I componenti funzionali potrebbero o meno essere in grado di ricevere i dati sotto forma di parametri. Inoltre, i componenti funzionali non hanno i metodi o lo stato del ciclo di vita, tuttavia possono essere aggiunti semplicemente implementando i React Hooks. I componenti funzionali sono sempre facili da eseguire il debug, leggere e testare.

 // Functional Component Example import React from 'react'; const HelloWorld = () => { return ( <div> <p>Hello Emizen!</p> </div> ) } export default HelloEmizen;

Nell'immagine del codice sopra, è un semplice componente che trasporta la variabile costante "Hello Emizen". La variabile costante viene assegnata alla funzione freccia che restituisce JSX. I componenti funzionali non devono essere una funzione freccia e possono anche essere semplicemente dichiarati con le normali funzioni JavaScript. Allo stesso tempo, Props può anche essere passato alla funzione e quindi utilizzato per eseguire il rendering dei dati nel codice JSX.

2. Componente di classe

Il componente Class è il componente più utilizzato tra tutti i tipi. Il motivo è che il componente di classe ha la capacità di svolgere ogni funzione del componente funzionale e allo stesso tempo anche alcune capacità aggiuntive. Può utilizzare in modo efficiente anche le principali funzioni di React, props, state e metodi del ciclo di vita. Tuttavia, i componenti della classe sono relativamente più complessi rispetto a quelli dei componenti funzionali. I dati possono essere passati da un componente di classe a un altro componente di classe molto facilmente.

 // Class Component Exampleimport React from 'react';class HelloWorld estende React.Component {
   render() {
      Restituzione (
         <div>
            <p>Ciao Emizen!</p>
         </div>
      )
   }
}esporta predefinito HelloEmizen;

Nell'esempio precedente si può osservare che il componente di classe utilizza extends React.Component dopo la classe Hello Emizen . Quindi, richiede anche il metodo render() per restituire il codice JSX. Nel componente di classe, è possibile dichiarare uno stato, impostarlo sull'oggetto JavaScript e utilizzare props per essere nella fase iniziale e modificare lo stato nei metodi del ciclo di vita. Richiederà ai React Hooks di eseguire queste azioni per componente funzionale.

3. Componente puro

I componenti puri sono i componenti più semplici e veloci che qualcuno possa scrivere. Poiché i componenti puri non modificano o dipendono dallo stato di diverse variabili al di fuori del loro ambito, possono facilmente sostituire i semplici componenti funzionali. I componenti che restituiscono semplicemente la funzione di rendering sono più adeguati per i componenti puri. Il più grande caso d'uso del componente Pure è fornire ottimizzazioni.

La grande differenza tra React.Component e React.PureComponent è che il componente puro mostra un confronto superficiale sul cambiamento di stato. I componenti pure gestiscono automaticamente il shouldComponentUpdate() .

I componenti React vengono ridisegnati principalmente quando:

• setState() Viene chiamato
• forceUpdate() Viene chiamato
• props I valori sono aggiornati

4. Componenti di ordine superiore

I componenti di ordine superiore noti anche come HOC sono meno simili a un componente React e più simili a un pattern, il risultato della natura compositiva di React. Il caso d'uso principale di HOC è condividere la logica con altri componenti.

 // HOC Example import React from 'react'; import MyComponent from './components/MyComponent'; class HelloEmizen extends React.Component { render() { return( <div> {this.props.myArray.map((element) => ( <MyComponent data={element} key={element.key} /> ))} </div> ) } } export default HelloEmizen;

L'immagine di codice sopra ha il componente semplice per descrivere il componente di livello superiore. Qui il codice chiave è this.props.myArray.map((element) => (<MyComponent />) . Questa funzione restituisce i componenti. Il numero di componenti dipende semplicemente dal numero di elementi nell'array che sono chiamati HOC La funzione prende un array dallo stato e quindi mappa ogni elemento nell'array trasformando ogni elemento nel componente React.

Di seguito è riportato il riepilogo semplice del componente di ordine superiore:

1. Ottieni i dati dagli oggetti di scena o dallo stato
2. Mappare l'array e restituire il componente Reach per ogni elemento.

Come eseguire il rendering di un componente ReactJs?

È possibile seguire i seguenti passaggi per eseguire il rendering di un componente ReactJS:

• Innanzitutto viene creata una classe ES6 con lo stesso nome che estende React.Component .
• Viene aggiunto un singolo metodo vuoto noto come render() .
• Il corpo della funzione viene spostato nel metodo render() .
• Sostituisci gli props di scena con this.props in render() body.
• Alla fine, elimina la restante dichiarazione di funzione vuota.

Componenti di nidificazione di reazione

Una delle cose migliori di React è che i componenti possono annidarsi uno dentro l'altro. Questa funzione aiuta in modo significativo a creare un'interfaccia utente complessa. Qui, i componenti figlio sono nidificati all'interno dei componenti padre. L'annidamento di componenti l'uno nell'altro viene definito interno ed esterno.

• Esporta : quando un particolare modulo o file viene esportato e utilizzato in un altro modulo, viene chiamato Esporta.
• Import : quando un particolare modulo o file viene importato e utilizzato nel modulo esistente, viene chiamato import.

Reagire al ciclo di vita dei componenti

Le web app React sono fondamentalmente la raccolta dei diversi componenti che sono indipendenti e funzionano in base alle interazioni effettuate con essi. Ciascuno di questi componenti ha il proprio ciclo di vita. Il ciclo di vita si riferisce alla serie di metodi che si rievocano nelle diverse fasi dell'esistenza del componente.

Qualsiasi componente React ha fondamentalmente le tre fasi seguenti:

1. Montaggio

Una volta completata l'inizializzazione dei componenti, il componente viene quindi montato su DOM e visualizzato nella pagina Web. Qui, React segue la procedura di default solo per le Convenzioni di denominazione delle funzioni predefinite. Le funzioni che contengono “Volontà” rappresentano prima di qualche fase specifica. Allo stesso modo, la funzione che contiene "Did" rappresenta dopo il completamento della fase. La fase di montaggio dei componenti si compone delle seguenti due funzioni:

• componentWillMount() Function : questa funzione viene invocata prima che il componente venga montato su DOM.
• componentDidMount() Function : opposta alla precedente, questa funzione viene invocata dopo che il componente è stato montato sul DOM.

2. Aggiornamento

L'aggiornamento è fondamentalmente la fase in cui vengono aggiornati gli stati e le props di un componente seguito dall'evento o comando dell'utente come la pressione del tasto, il clic del mouse, ecc. Aiuta le pagine web attive a comportarsi in base alle esigenze e i comandi dei loro utenti.

3. Smontaggio

È la fase di completamento del ciclo di vita dei componenti. In questa fase i componenti vengono smontati dal DOM. La seguente funzione è l'unico membro di questa funzione:

componentWillUnmount() Function : la funzione viene invocata appena prima che il componente venga completamente smontato dal DOM. Si verifica prima che il componente venga rimosso dalla pagina e quindi questo dona la fine del ciclo di vita.

Ci auguriamo che questo post ti abbia dato un'idea di base sui tipi di componenti React e su come possono essere utilizzati. Emizentech è un'azienda leader nello sviluppo di app che sviluppa app mobili web, native e ibride. Quindi, se hai bisogno di sviluppatori ReactJs professionisti, contattaci.