Novità nella libreria React JavaScript UI

Ora disponibile nella versione di produzione, la versione 16.8 della libreria React JavaScript UI ha la capacità di hook, per usare lo stato e altre funzionalità di React senza dover scrivere una classe.

Dove scaricare React

È possibile scaricare il prodotto sulla versione di React da GitHub.

Versione attuale: nuove funzionalità in React 16.8

Rilasciato a febbraio 2019, React 168 fornisce un'implementazione di hook per DOM, server DOM, renderer di test e renderer superficiale di React. Gli hook sono supportati in React DevTools. Gli sviluppatori possono creare i propri hook per condividere la logica stateful riutilizzabile tra i componenti. Ma Facebook consiglia agli sviluppatori di dedicare del tempo a questa funzionalità, non raccomandando agli sviluppatori di riscrivere le applicazioni per utilizzare gli hook "dall'oggi al domani".

Non ci sono piani per rimuovere classi da React, quindi gli sviluppatori dovrebbero provare gli hook in alcuni nuovi componenti. Il codice che utilizza gli hook della leva funzionerà insieme al codice esistente che utilizza le classi.

Versione precedente: nuove funzionalità in React 16.7

Rilasciato a dicembre 2018, React 16.7 aggiunge la funzionalità hooks, per utilizzare lo stato e altre funzionalità di React senza scrivere una classe.

Gli hook sono funzioni che si collegano allo stato di React e alle caratteristiche del ciclo di vita dai componenti della funzione. Attualmente lavorano fianco a fianco con il codice esistente, consentendo l'adozione graduale. Non ci sono piani per rimuovere effettivamente le classi da React. Gli hook risolvono una varietà di problemi in React, tra cui:

  • La mancanza di un modo per associare un comportamento riutilizzabile a un componente. Ci sono stati modelli come oggetti di rendering e componenti di ordine superiore che cercano di risolvere questo problema, ma questi richiedono la ristrutturazione dei componenti, che può essere ingombrante e rendere più difficile seguire il codice. Utilizzando gli hook, gli sviluppatori possono estrarre la logica stateful da un componente per test e riutilizzo indipendenti.
  • I componenti complessi sono diventati troppo difficili da capire. Con gli hook, i componenti possono essere suddivisi in funzioni più piccole basate su parti correlate, come l'impostazione di un abbonamento o il recupero dei dati. Questo viene fatto invece di forzare una divisione basata sui metodi del ciclo di vita.
  • Le classi possono confondere sia le persone che le macchine e sono viste come la più grande barriera all'apprendimento di React. Gli hook consentono agli sviluppatori di utilizzare più funzionalità di React senza classi. I ganci abbracciano le funzioni, ma senza sacrificare lo spirito di React. L'accesso è fornito ai portelli di fuga imperativi. Gli sviluppatori non devono apprendere complesse tecniche di programmazione funzionale o reattiva.

Versione precedente: nuove funzionalità in React 16.6

Rilasciato nell'ottobre 2018, React 16.6 offre diversi miglioramenti.

  • Con memo, gli sviluppatori possono salvarsi dal rendering con componenti funzione, in modo simile a come i componenti di classe possono salvarsi dal rendering quando gli oggetti di scena di input sono gli stessi usando PureComponentso shouldComponentUpdate.
  • Con lazy, gli sviluppatori possono utilizzare il Suspensecomponente per la suddivisione del codice racchiudendo un'importazione dinamica nella chiamata a React.lazy(). Nota: la funzione non è ancora disponibile per il rendering lato server.
  • La comoda API è stata introdotta per utilizzare un valore di contesto dall'interno di un componente di classe. Gli sviluppatori si sono lamentati del fatto che l'adozione della nuova API render prop da React 16.3 potrebbe essere difficile nei componenti di classe.
  • Un metodo di errore getDerivedStatefromError(),, esegue il rendering dell'interfaccia utente di fallback prima del completamento di un rendering. Nota: non è ancora disponibile per il rendering lato server, ma gli sviluppatori possono iniziare a prepararsi.
  • Due StrictmodeAPI sono state deprecate: findDOMNode()e il contesto legacy che utilizza contextType e getChildContext. Gli sviluppatori sono incoraggiati a eseguire l'aggiornamento alla nuova contextTypeAPI.

Versione precedente: nuove funzionalità in React 16.4

La versione 16.4 di React, rilasciata alla fine di maggio 2018, aggiunge il supporto per gli eventi del puntatore, una funzionalità spesso richiesta, nonché un miglioramento per un'imminente funzionalità di rendering asincrono. I browser che supportano gli eventi del puntatore includono le versioni di Google Chrome, Mozilla Firefox, Microsoft Edge e Microsoft Internet Explorer.

Gli eventi puntatore sono eventi DOM attivati ​​per un dispositivo di puntamento, progettati per fornire un singolo modello di evento per gestire dispositivi come un mouse o un tocco.

Con il supporto per gli eventi del puntatore, React aggiunge il supporto per i tipi di eventi che includono:

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

Altre nuove funzionalità in React 16.4 includono:

  • Compatibilità migliorata con una modalità di rendering asincrona pianificata. Per fare ciò, la versione presenta una correzione di bug per getDerivedStatefromProps, che ora viene chiamata ogni volta che è necessario un componente indipendentemente dal motivo per cui si sta verificando l'aggiornamento. Era stato chiamato solo se un componente era stato sottoposto a rendering da un genitore e non si sarebbe attivato come risultato di un locale setState. La correzione non influisce sulla maggior parte delle app ma, in rari casi, potrebbe causare problemi con un numero limitato di componenti.
  • È stato aggiunto un componente profiler sperimentale, chiamato unstable_Profiler, per misurare le prestazioni.
  • Un riconciliatore sperimentale, per la creazione di renderer personalizzati, presenta una nuova forma di configurazione host che è piatta e non utilizza oggetti nidificati.
  • Le correzioni al DOM React includono la riparazione di un bug che impediva la propagazione del contesto in alcuni casi, nonché una situazione in cui alcuni attributi venivano rimossi erroneamente dai nodi dell'elemento personalizzato.

La capacità sperimentale di restituzione della chiamata è stata eliminata nella versione 16.4 di React perché influiva sulla dimensione del pacchetto e l'API non era abbastanza buona. Aspettiamolo indietro a un certo punto in un'altra forma, dice Facebook.

Versione precedente: nuove funzionalità in React 16.3

La versione 16.3 di marzo 2018 di React apporta modifiche al ciclo di vita e un'API per il contesto.

Cambiamenti del ciclo di vita in React 16.3

Per il ciclo di vita del componente, l'imminente modalità di rendering asincrono estende il modello API del componente di classe, che viene utilizzato in modi non previsti originariamente. Quindi, sono stati aggiunti nuovi cicli di vita, tra cui getDerivedStateFromProps, come alternativa più sicura per il ciclo di vita legacy, componentWillReceiveProps. Inoltre è stato aggiunto getSnapshotBeforeUpdate, per supportare la lettura sicura delle proprietà, come il DOM prima che vengano effettuati gli aggiornamenti.

React 16.3 aggiunge anche il prefisso "unsafe" ad alcuni di questi cicli di vita, come to componentWillMounte componentWillReceiveUpdate. In questi casi, "unsafe" non si riferisce alla sicurezza ma al fatto che il codice che utilizza questi cicli di vita ha maggiori probabilità di avere bug nelle versioni future di React.

Con la versione React 16.3, gli sviluppatori non devono fare nulla sui metodi legacy. Il rilascio ha lo scopo di richiedere ai manutentori del progetto open source di aggiornare le loro librerie prima degli avvisi di deprecazione, che non saranno abilitati fino a una futura versione nella riga 16.x

La versione 16.3 aggiunge il StrictModecomponente, che identifica i componenti con cicli di vita non sicuri. StrictMode, che viene eseguito solo in modalità di sviluppo, avverte anche dell'utilizzo dell'API di riferimento stringa legacy e rileva effetti collaterali imprevisti. Attiva controlli aggiuntivi per i discendenti. Ulteriori funzionalità verranno aggiunte in seguito.

L'API Context supporta il controllo del tipo statico e gli aggiornamenti approfonditi

La nuova API di contesto supporta il controllo del tipo statico e gli aggiornamenti approfonditi. Questa API è anche più efficiente della precedente versione sperimentale dell'API, ha affermato Brian Vaughn, membro del core team React JS di Facebook. Il contesto consente ai dati di passare attraverso un albero di componenti senza la necessità di passare manualmente gli oggetti di scena, alcuni dei quali includono la preferenza della locale e il tema dell'interfaccia utente. La vecchia API continuerà a funzionare per le versioni di React 16.x, dando agli utenti il ​​tempo di migrare.

Novità anche in React 16.3:

  • Un'API migliorata, chiamata createrefAPI, per la gestione dei ref, che fornisce un modo per accedere ai nodi DOM o agli elementi React sviluppati nel metodo render.
  • L' forwardRefAPI, che aiuta con l'uso di componenti di ordine superiore che promuovono il riutilizzo del codice.

Versione precedente: nuove funzionalità in React 16.2

La versione di novembre 2017 di React 16.2 offre la funzionalità dei frammenti per migliorare il supporto per la visualizzazione di più figli da un metodo di rendering dei componenti. I frammenti, che assomigliano a tag JSX vuoti, consentono agli sviluppatori di raggruppare un elenco di figli senza aggiungere nodi al DOM.

È possibile installare la versione 16.2 dal registro di NPM. Per installare con il gestore di pacchetti Yarn, esegui yarn add [email protected]^16.2.0 [email protected]^16.2.0. Per installarlo con NPM, esegui npm install --save [email protected]^16.2.0 [email protected]^16.2.0.

Versione precedente: nuove funzionalità in React 16.0

Soprannominato "React Fiber" durante il suo sviluppo, React 16.0 di settembre 2017 è una riscrittura del core React, migliorando la reattività percepita per applicazioni complesse tramite un nuovo algoritmo di riconciliazione. Le caratteristiche principali di React 16 includono:

  • Errori che presentano un'analisi dello stack dei componenti per semplificarne il debug.
  • Restituzione di stringhe / array direttamente dai metodi di rendering dei componenti.
  • Un nuovo renderer lato server più veloce e in streaming.
  • Prestazioni delle applicazioni più simili a quelle native.
  • Il passaggio dalla controversa licenza BSD + Patents alla più appetibile licenza MIT.

Sebbene gli interni di React siano stati completamente riscritti in React 16, l'API pubblica è "sostanzialmente invariata", ha affermato Sophie Alpert, responsabile tecnico di Facebook per React. L'intento era quello di evitare agli sviluppatori di dover riscrivere i componenti esistenti costruiti con React.

Il nuovo codice di React 16 è stato scritto insieme al vecchio codice nel repository GitHub, come da pratica familiare su Facebook. I passaggi tra i due sono stati eseguiti con il useFiberflag della funzione booleana . Il processo ha consentito a Facebook di iniziare a creare la sua nuova implementazione senza influire sugli utenti esistenti e di continuare a correggere i bug della vecchia base di codice.

Dopo alcuni mesi di risoluzione dei bug, Facebook ha deciso di fornire un unico prodotto per ridurre il possibile set di bug, piuttosto che mantenere aggiornate due versioni di React.