Le 50 migliori domande e risposte dell'intervista React da sapere

Gli sviluppatori ReactJS sono molto ricercati e c'è una buona ragione per questo. Ma dovrai dimostrare la tua competenza nel framework per ottenere il lavoro.

Di seguito vengono poste domande frequenti sullo sviluppo di React e le relative risposte di cui dovresti essere a conoscenza. Include tutto, dalle basi agli argomenti più avanzati.

1. Che cos'è React?

React è un servizio gratuito e open-source Libreria JavaScript per lo sviluppo dell'interfaccia utente, che utilizza componenti per creare output per applicazioni a pagina singola. React è stato sviluppato da Facebook (Meta) ed è gestito da una comunità di sviluppatori.

2. Elenca le caratteristiche importanti di React

Le caratteristiche più importanti di React includono:

1. Facilità d'uso
2. Sviluppo rapido
3. L'uso dei componenti
4. JSX
5. Il DOM virtuale
6. Alte prestazioni
7. Associazione dati unidirezionale

3. Dov'è il repository del progetto di React?

React è un mono-repository che vive a https://github.com/facebook/react. Essere un repository mono significa che tutto il suo codice e altre fonti sono archiviati nello stesso posto per uno sviluppo e una gestione più facili.

4. Qual è l'attuale versione stabile di React?

La versione stabile più recente di React dal 14 giugno 2022 è la 18.2.0.

5. Indica le differenze tra React Native e ReactJS

React e ReactJS sono gli stessi, mentre React Native è basato su React. Per le loro differenze, React viene utilizzato nella creazione di interfacce utente dinamiche e reattive per applicazioni Web, mentre React Native è progettato per la creazione di applicazioni come app mobili.

6. Qual è la differenza tra un elemento e un componente?

Un elemento React è un oggetto semplice e immutabile creato per rappresentare un nodo DOM. Essere immutabile significa che non può essere modificato una volta creato, poiché esegue il rendering sul DOM. Un componente React, d'altra parte, è mutabile e produce un output JSX una volta renderizzato.

7. Come si crea un componente?

Esistono due modi per creare un componente in React: 1.) Componenti di funzione e 2.) Componenti di classe. Come suggeriscono i nomi, un componente di funzione viene creato utilizzando una dichiarazione di funzione, mentre un componente di classe viene creato utilizzando una dichiarazione di classe.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Elenca le 4 fasi di un componente React

Un componente React subisce le seguenti 4 fasi nel suo ciclo di vita:

1. Stato iniziale – Costruzione del componente nello stato di default con props iniziali
2. Fase di montaggio – Rendering JSX del componente
3. Fase di aggiornamento – Modifiche allo stato dei componenti e ridisegno dell'applicazione
4. Fase di smontaggio – Rimozione dei componenti dal DOM

9. Spiega cosa significa un Componente di ordine superiore

Un componente di ordine superiore (HOC) è una metodologia React per la creazione di componenti. Utilizza un componente esistente per crearne uno nuovo con funzionalità extra. In altre parole, un HOC è una funzione che prende un componente come argomento e restituisce un nuovo componente con funzionalità aggiunte.

10. Cosa sono i componenti controllati e non controllati?

Un componente controllato è un componente React che prende il suo valore attraverso gli oggetti di scena e notifica al sistema eventuali modifiche tramite callback. È controllato da un componente padre che lo gestisce stato e passa i valori come prop al componente controllato. Un componente non controllato, invece, gestisce il suo stato e dovrai interrogare il DOM utilizzando ref per ottenerne il valore.

11. Cosa sono gli oggetti di scena in reazione?

Props in React è solo un modo semplice per dire proprietà e, con ciò, ti riferisci alle proprietà di un componente. I prop vengono utilizzati per passare i dati da un componente padre a uno o più componenti figlio e sono di sola lettura al componente figlio.

12. Cosa sono gli oggetti di scena.bambini?

L'attributo Props.children contiene informazioni su tutti i contenuti di un componente che ha un tag di apertura e chiusura. Questi figli si riferiscono a tutti gli elementi definiti all'interno del componente corrente e possono essere uno, molti o nessuno.

13. Puoi aggiornare gli oggetti di scena in React?

No, gli oggetti di scena in React sono top-down e immutabili. Ciò significa che un componente può inviare qualsiasi proprietà gli piace ai suoi figli, ma non può aggiornare i suoi oggetti di scena. Solo il suo genitore può aggiornare i suoi oggetti di scena.

14. Cos'è JSX?

JSX sta per JavaScript XML. È un'estensione della sintassi JavaScript che consente di scrivere HTML all'interno del codice di reazione. Il browser non comprende comunque JSX, quindi React deve renderlo in codice HTML leggibile.

15. Qual è la differenza tra un componente e un elemento

Un elemento è una definizione stateless e immutabile di un nodo DOM virtuale. Contiene sia un tipo che una proprietà, ma non ha metodi come un componente. Questa mancanza di metodi lo rende veloce.

16. Che cos'è uno stato in React?

Uno stato in React si riferisce a un oggetto integrato in un componente che viene utilizzato per contenere e gestire le informazioni su quel componente. Uno stato può cambiare nel tempo e quindi attiverà un nuovo rendering di quel componente. È necessario definire lo stato nel metodo di costruzione del componente, altrimenti il ​​componente diventa senza stato.

17. Che cos'è un Componente apolide?

Un componente React senza stato non ha uno stato. Ciò significa che non puoi né impostarne lo stato con this.setState() metodo né averlo reso. Tuttavia, un componente senza stato può avere oggetti di scena.

18. Come si aggiorna uno stato in React

Aggiorna lo stato di un componente chiamandolo this.setState() metodo.

19. Spiega la modalità rigorosa di React

La modalità rigorosa di React è uno strumento che aiuta lo sviluppatore a scoprire potenziali problemi nell'applicazione attivando controlli di livello più approfondito sui componenti ed evidenziando più avvisi. La modalità rigorosa è disponibile solo in modalità sviluppo.

20. Cosa significa Lifting State Up in React?

Significa consentire ai componenti figlio di condividere uno stato comune dal genitore, in quanto ciò rende le cose più facili da gestire rispetto alla gestione individuale dello stato comune di ciascun componente figlio.

21. Come trasmetti i dati in risposta?

Passi i dati in React usando oggetti di scena e callback. Gli oggetti di scena di React sono unidirezionali, consentendo alle proprietà di passare solo dai componenti principali ai loro figli. Per passare i dati da un componente figlio a un genitore, devi utilizzare una funzione di callback.

22. Definisci Flusso in Reagire

Flux è un concetto unidirezionale per dirigere il flusso di dati in un'applicazione. Essere unidirezionali significa che i dati possono passare solo dai componenti padre a quelli figli. Flux può anche includere più archivi dati per app.

23. Definisci Redux in Reagire

Redux è un'utile libreria JavaScript open source per la gestione di stati complessi in un'applicazione. È indipendente e può essere utilizzato in altri framework come Angular. A differenza di Flux, Redux centralizza la gestione dello stato di un'applicazione, semplificando così la creazione di interfacce utente complesse.

24. Quando dovresti usare Redux?

Non tutte le app necessitano di Redux. Ma è utile nelle seguenti condizioni:

1. Quando nell'app sono presenti grandi quantità di stati dell'applicazione
2. Quando la logica dell'app è complessa
3. Quando la tua app ha una base di codice di grandi dimensioni
4. Quando devi aggiornare frequentemente l'app
5. Quando hai molte persone che lavorano sull'app

25. Qual è la principale differenza tra Redux e Flux?

La principale differenza tra i due è che Redux gestisce tutti i dati dell'applicazione da un singolo negozio, mentre puoi avere più negozi in Flux.

26. Elenca i componenti di Redux

Ci sono 4 parti principali di Redux:

1. Negozio – Qui è dove si memorizza lo stato dell'applicazione.
2. Action – Questi sono eventi che fanno sì che l'app invii dati allo store Redux.
3. Reducer – Questa è una funzione che accetta lo stato corrente dell'app e un'azione come argomenti, quindi restituisce un nuovo stato come risultato.
4. middleware – Questa funzione consente a uno sviluppatore di acquisire tutte le azioni da un componente prima che raggiungano la funzione di riduzione.

27. Cosa sono i React Hook?

Gli hook di React sono una funzionalità dei componenti della funzione che consentono di accedere a diverse funzionalità di React, come i dati di stato e gli aggiornamenti di rendering. È stato introdotto in React 16.8.

28. Elenca il tipo di Hook in React

Ci sono più di 15 hook in React, a partire dagli hook di base come useState, useEffect e useContext ad altri hook come useCallback, useReducer, useMemo, useRef e così via.

29. Cosa sono i frammenti?

Un frammento React è un modo conveniente per raggruppare più elementi figlio in un componente, senza aggiungerli al DOM. Definisci semplicemente il tag usando:

<>

or

e carica tutti gli elementi figlio che desideri all'interno. L'unica differenza è che la versione abbreviata <> non accetta chiavi e attributi, mentre la versione lunga sì.

30. Elenca i metodi principali del pacchetto react-dom

Sono createPortal() per il rendering dei bambini in un DOM esterno e flushSync() per lo svuotamento degli aggiornamenti. Ci sono anche i metodi render() e hydrate(), che sono stati sostituiti da createRoot() e hydrateRoot() da React 18.

31. Cosa sono le chiavi di reazione?

Le chiavi sono identificatori univoci che vengono utilizzati al meglio per gestire gli elenchi. I tasti consentono di identificare facilmente i singoli elementi in un elenco e di sapere quando ogni elemento è stato aggiornato, eliminato o modificato in qualsiasi modo.

32. Perché le chiavi di reazione sono importanti?

Le chiavi sono importanti in React perché aiutano nel rendering efficiente del vero DOM. React è utile perché cerca di ridurre al minimo i componenti che esegue nuovamente il rendering dopo un evento e l'utilizzo di chiavi in ​​un elenco impedisce a React di dover eseguire nuovamente il rendering di interi elenchi, il che può essere un problema con elenchi di grandi dimensioni.

33. Che cos'è un evento in reazione?

Un evento è qualsiasi azione in un'app che proviene dall'utente o dal sistema. Un evento può variare da un clic del mouse o un tocco su dispositivi mobili a un ridimensionamento di una finestra, pressione di un tasto, trascinamento, messa a fuoco e così via.

34. Spiega cosa Evento sintetico Si intende

Un evento sintetico è un wrapper attorno agli eventi nativi di un browser, con il problema che browser diversi denominano i loro eventi in modo diverso. React utilizza eventi sintetici per evitare il problema di dover creare più implementazioni e metodi per tutti i diversi browser disponibili. In questo modo, React mantiene nomi comuni per tutti i diversi eventi del browser come API unificata.

35. Che cos'è Webpack?

Webpack è un sistema di raggruppamento di moduli utilizzato per combinare e ridurre al minimo i file JavaScript e CSS. È basato su Node.js ed è utile quando si lavora con un numero elevato di file o risorse non di codice come immagini e caratteri.

36. Che cos'è l'app create-react?

Create-react-app è uno strumento che ti aiuta a creare un'applicazione React a pagina singola nel tuo ambiente Node.js. Genera tutti i file e le cartelle di cui hai bisogno per avviare un'app di base e da lì la prendi. Richiede Node dalla versione 14.0.0 in poi e npm dalla ver. 5.6.

L'utilizzo è semplice:

npx create-react-app miaNuovaApp

cd miaNuovaApp

inizio npm

37. Puoi eseguire il rendering lato server con React?

Sì, puoi, anche se può richiedere un uso intensivo delle risorse per progetti di grandi dimensioni. Il rendering lato server è utile in quanto migliora l'esperienza dell'utente e Gestione SEO. Avrai bisogno di un ambiente Node.js, un bundler come Webpack e un framework come Next.js esterni Remix per eseguire il rendering delle app React in fase di runtime. Una soluzione all'utilizzo intensivo delle risorse consiste nell'utilizzare a generatore di siti statici, come quello basato su Next.js Gatsby.

38. Spiega cosa fa una funzione freccia

Una funzione freccia è semplicemente un modo più breve per definire le funzioni. È una scorciatoia ES6 che sostituisce:

= funzione() con ()=>.

Per esempio:

prova = funzione(){

restituire "Questa è una prova";

}

allora diventa:

prova = () => {

restituire "Questo è un test";

}

o per dichiarazioni a riga singola:

test = () => “Questo è un test”;

39. Cos'è un Reagire Router?

React router è una libreria che fornisce funzionalità di routing in un'app React. Semplifica l'inclusione e l'utilizzo di componenti di navigazione avanzati, che possono essere molto utili per progetti grandi o complessi.

40. Quali sono i principali vantaggi dell'utilizzo di React Router?

Crea percorsi URL diversi per la tua app e fornisce valori window.location e un oggetto cronologia.

41. Che cos'è ComponentWillUnmount()?

Questo è un metodo del componente che viene chiamato ogni volta che React sta per distruggere il componente. È un bel posto per ripulire le cose, cancellare i timer, annullare le richieste di rete e gestire altri importanti problemi di deinizializzazione.

42. Che cos'è The Constructor()?

Il costruttore è il metodo del componente che viene chiamato durante l'inizializzazione del componente. Viene in genere utilizzato per inizializzare gli stati locali e per l'associazione di metodi di gestione degli eventi.

43. Che cos'è il DOM virtuale?

Il DOM virtuale di React è una copia leggera del DOM del documento HTML effettivo. Viene utilizzato per una gestione efficiente e l'aggiornamento delle modifiche sul DOM reale.

44. Quali sono i vantaggi del DOM virtuale rispetto al DOM reale?

Il DOM virtuale è leggero e più veloce da renderizzare rispetto al DOM reale, e questo rende più efficiente il rendering prima sul DOM virtuale e apportando modifiche al DOM reale solo quando è necessario. Ogni nodo sul DOM reale ha un componente corrispondente sul DOM virtuale e, una volta apportate modifiche a un componente virtuale dopo il rendering, React sa esattamente quale nodo HTML reale aggiornare o eliminare.

45. Spiega il termine Riconciliazione in Reagire

La riconciliazione è il metodo di React per aggiornare il DOM reale solo quando necessario, controllando le versioni aggiornate del DOM virtuale tramite differenze e aggiornando solo i nodi esatti che sono cambiati sul DOM reale.

46. Spiega il termine Profiler in Reagire

Profiler è uno strumento React che aiuta a ottimizzare un'app misurando quante volte un'applicazione esegue il rendering e quanto tempo impiega ogni componente per il rendering. Questo aiuta lo sviluppatore a identificare le parti dell'applicazione che potrebbero richiedere l'ottimizzazione.

47. Spiega il termine Contesto in Reagire

Il contesto è un metodo per passare i dati tra i componenti di React a molti livelli senza dover passare i dati attraverso ogni livello di annidamento usando gli oggetti di scena. È meglio utilizzato per una facile condivisione dei dati con molti componenti che non necessitano di aggiornamenti costanti, come le informazioni sul tema e i dati dell'utente. Il suo svantaggio è che può rendere difficile il riutilizzo dei componenti.

48. Spiega il termine Montaggio in Reagire

Il montaggio in React è il processo di collegamento di un componente come nodo al DOM. Lo smontaggio è l'opposto.

49. Spiega il termine Rendering in Reagire

Il rendering è il processo di disegno di un componente. Di solito si verifica quando lo stato del componente cambia e React deve ridisegnare l'interfaccia utente. Se un componente viene ridisegnato durante il rendering, anche i suoi componenti figlio vengono ridisegnati.

50. Spiega il termine Limite di errore in Reagire

Il limite di errore si riferisce a un componente React che rileva gli errori JavaScript dai suoi componenti figlio, registra gli errori e visualizza un'interfaccia utente di fallback al posto dei nodi che si sono arrestati in modo anomalo. I limiti di errore sono stati introdotti in React 16.

Conclusione

Abbiamo raggiunto la fine di questo elenco delle 50 domande più importanti dell'intervista React e si spera che dovresti avere una buona idea di cosa puoi aspettarti ormai.

Dovresti anche notare che nulla rimane lo stesso e il tuo colloquio può prendere qualsiasi direzione Pertanto, dovresti continuare a studiare e rimanere aggiornato.