Glossario dei termini React

Applicazione a pagina singola

Un'applicazione a pagina singola è un'applicazione che carica una singola pagina HTML e tutte le risorse necessarie (come JavaScript e CSS) richieste per l'esecuzione dell'applicazione. Qualsiasi interazione con la pagina o le pagine successive non richiede un viaggio di andata e ritorno al server, il che significa che la pagina non viene ricaricata.

Sebbene tu possa creare un'applicazione a pagina singola in React, non è un requisito. React può essere utilizzato anche per migliorare piccole parti di siti web esistenti con ulteriore interattività. Il codice scritto in React può coesistere pacificamente con il markup reso sul server da qualcosa come PHP o con altre librerie lato client. In effetti, questo è esattamente il modo in cui React viene utilizzato su Facebook.

ES6, ES2015, ES2016 e così via

Questi acronimi fanno tutti riferimento alle versioni più recenti dello standard ECMAScript Language Specification, di cui il linguaggio JavaScript è un'implementazione. La versione ES6 (nota anche come ES2015) include molte aggiunte alle versioni precedenti come: funzioni freccia, classi, letterali modello, istruzionileteconst. Puoi trovare ulteriori informazioni su versioni specifichequi.

Compilatori

Un compilatore JavaScript prende il codice JavaScript, lo trasforma e restituisce il codice JavaScript in un formato diverso. Il caso d'uso più comune è prendere la sintassi di ES6 e trasformarla in una sintassi che i browser meno recenti sono in grado di interpretare.Babelè il compilatore più comunemente usato con React.

Bundlers

I bundler accettano codice JavaScript e CSS scritto come moduli separati (spesso centinaia) e li combinano insieme in pochi file ottimizzati per i browser. Alcuni bundler comunemente usati nelle applicazioni React includonoWebpackeBrowserify.

Gestori di pacchetti

I gestori di pacchetti sono strumenti che ti consentono di gestire le dipendenze nel tuo progetto.npmeYarnsono due gestori di pacchetti comunemente usati nelle applicazioni React. Entrambi sono client per lo stesso registro dei pacchetti npm.

CDN

CDN è l'acronimo di Content Delivery Network. I CDN forniscono contenuto statico memorizzato nella cache da una rete di server in tutto il mondo.

JSX

JSX è un'estensione della sintassi di JavaScript. È simile a un linguaggio per modelli, ma ha tutta la potenza di JavaScript. JSX viene compilato inReact.createElement()chiamate che restituiscono semplici oggetti JavaScript chiamati "elementi React". Per ottenere un'introduzione di base a JSXvedere la documentazione quie trovare un tutorial più approfondito su JSXqui.

React DOM utilizza la convenzione di denominazione delle proprietà camelCase invece dei nomi degli attributi HTML. Ad esempio,tabindexdiventatabIndexin JSX. L'attributoclassè anche scritto comeclassNamepoichéclassè una parola riservata in JavaScript:

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

Elementi

Gli elementi React sono gli elementi costitutivi delle applicazioni React. Si potrebbero confondere gli elementi con un concetto più noto di "componenti". Un elemento descrive ciò che vuoi vedere sullo schermo. Gli elementi React sono immutabili.

const element = <h1>Hello, world</h1>;

In genere, gli elementi non vengono utilizzati direttamente, ma vengono restituiti dai componenti.

Componenti

I componenti React sono piccoli pezzi di codice riutilizzabili che restituiscono un elemento React da renderizzare alla pagina. La versione più semplice del componente React è una semplice funzione JavaScript che restituisce un elemento React:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

I componenti possono anche essere classi ES6:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

I componenti possono essere suddivisi in parti distinte di funzionalità e utilizzati all'interno di altri componenti. I componenti possono restituire altri componenti, array, stringhe e numeri. Una buona regola pratica è che se una parte della tua interfaccia utente viene utilizzata più volte (pulsante, pannello, avatar) o è abbastanza complessa da sola (app, feedStory, commento), è un buon candidato per essere un componente riutilizzabile . I nomi dei componenti dovrebbero inoltre iniziare sempre con una lettera maiuscola (<Wrapper/>non<wrapper/>). Vederequesta documentazioneper ulteriori informazioni sui componenti di rendering.

`props`

propssono input per un componente React. Sono dati trasmessi da un componente padre a un componente figlio.

Ricorda chepropssono di sola lettura. Non dovrebbero essere modificati in alcun modo:

// Wrong!
props.number = 42;

Se è necessario modificare un valore in risposta all'input dell'utente o a una risposta della rete, utilizzare invecestate.

`props.children`

props.childrenè disponibile su ogni componente. Contiene il contenuto tra i tag di apertura e chiusura di un componente. Ad esempio:

<Welcome>Hello world!</Welcome>

La stringaHello world!è disponibile inprops.childrennel componenteWelcome:

function Welcome(props) {
  return <p>{props.children}</p>;
}

Per i componenti definiti come classi, utilizzarethis.props.children:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

`state`

Un componente necessita distatequando alcuni dati ad esso associati cambiano nel tempo. Ad esempio, un componenteCheckboxpotrebbe richiedereisCheckednel suo stato e un componenteNewsFeedpotrebbe voler tenere traccia difetchedPostsnel suo stato.

La differenza più importante trastateepropsè chepropsvengono passati da un componente genitore, mastateè gestito dal componente stesso. Un componente non può cambiare il suoprops, ma può cambiare il suostate.

Per ogni particolare pezzo di dati che cambiano, dovrebbe esserci un solo componente che lo "possiede" nel suo stato. Non provare a sincronizzare gli stati di due diversi componenti. Invece,sollevaloal loro antenato condiviso più vicino e trasmettilo come sostegno a entrambi.

Metodi del ciclo di vita

I metodi del ciclo di vita sono funzionalità personalizzate che vengono eseguite durante le diverse fasi di un componente. Sono disponibili metodi quando il componente viene creato e inserito nel DOM (montaggio), quando il componente viene aggiornato e quando il componente viene smontato o rimosso dal DOM.

Componenti controllativs.Componenti non controllati

React ha due diversi approcci per gestire gli input del modulo.

Un elemento del modulo di input il cui valore è controllato da React è chiamato componente controllato. Quando un utente immette dati in un componente controllato, viene attivato un gestore di eventi di modifica e il codice decide se l'input è valido (eseguendo nuovamente il rendering con il valore aggiornato). Se non esegui nuovamente il rendering, l'elemento del modulo rimarrà invariato.

Uncomponente non controllatofunziona come gli elementi del modulo fanno al di fuori di React. Quando un utente inserisce dati in un campo modulo (una casella di input, un menu a discesa, ecc.), Le informazioni aggiornate vengono riflesse senza che React debba fare nulla. Tuttavia, questo significa anche che non puoi forzare il campo ad avere un certo valore.

Nella maggior parte dei casi dovresti utilizzare componenti controllati.

Tasti

Una "chiave" è un attributo stringa speciale che devi includere quando crei matrici di elementi. I tasti aiutano React a identificare quali elementi sono stati modificati, aggiunti o rimossi. Le chiavi dovrebbero essere fornite agli elementi all'interno di un array per dare agli elementi un'identità stabile.

Le chiavi devono essere univoche tra gli elementi di pari livello nello stesso array. Non è necessario che siano univoci nell'intera applicazione o anche in un singolo componente.

Non passare qualcosa comeMath.random()alle chiavi. È importante che le chiavi abbiano una "identità stabile" nei ri-rendering in modo che React possa determinare quando gli elementi vengono aggiunti, rimossi o riordinati. Idealmente, le chiavi dovrebbero corrispondere a identificatori univoci e stabili provenienti dai tuoi dati, comepost.id.

Rif

React supporta un attributo speciale che puoi collegare a qualsiasi componente. L'attributorefpuò essere un oggetto creato daReact.createRef()functiono una funzione di callback o una stringa (nell'API legacy). Quando l'attributorefè una funzione di callback, la funzione riceve l'elemento DOM sottostante o l'istanza di classe (a seconda del tipo di elemento) come argomento. Ciò consente di avere accesso diretto all'elemento DOM o all'istanza del componente.

Usa gli arbitri con parsimonia. Se ti ritrovi a utilizzare spesso i riferimenti per "far accadere le cose" nella tua app, prendi in considerazione l'idea di acquisire maggiore familiarità conflusso di dati dall'alto verso il basso.

Eventi

La gestione degli eventi con gli elementi React presenta alcune differenze sintattiche:

I gestori di eventi React sono denominati utilizzando camelCase, anziché minuscolo.
Con JSX passi una funzione come gestore di eventi, piuttosto che una stringa.

Riconciliazione

Quando le props o lo stato di un componente cambiano, React decide se è necessario un aggiornamento DOM effettivo confrontando l'elemento appena restituito con quello precedentemente renderizzato. Quando non sono uguali, React aggiornerà il DOM. Questo processo si chiama “riconciliazione”.

Reactjs

Reactjs 17.x / Glossario dei termini React