You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,9 +28,9 @@ Nei post React Labs scriviamo dei progetti in ricerca e sviluppo attivi. Abbiamo
28
28
29
29
React Compiler non è più un progetto di ricerca: il compiler ora alimenta instagram.com in produzione e stiamo lavorando per distribuirlo su altre superfici in Meta e per preparare il primo rilascio open source.
30
30
31
-
Come discusso nel nostro [post precedente](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler), React può *a volte* renderizzare troppo quando lo state cambia. Fin dai primi giorni di React la nostra soluzione per questi casi è stata la memoization manuale. Nelle API attuali, questo significa applicare [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback) e [`memo`](/reference/react/memo) per regolare manualmente quanto React renderizza al cambiamento dello state. Ma la memoization manuale è un compromesso. Appesantisce il codice, è facile sbagliare e richiede lavoro extra per restare aggiornata.
31
+
Come discusso nel nostro [post precedente](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler), React può *a volte* renderizzare troppo quando lo state cambia. Fin dai primi giorni di React la nostra soluzione per questi casi è stata la memorizzazione manuale. Nelle API attuali, questo significa applicare [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback) e [`memo`](/reference/react/memo) per regolare manualmente quanto React renderizza al cambiamento dello state. Ma la memorizzazione manuale è un compromesso. Appesantisce il codice, è facile sbagliare e richiede lavoro extra per restare aggiornata.
32
32
33
-
La memoization manuale è un compromesso ragionevole, ma non ci accontentavamo. La nostra visione è che React *automaticamente* renderizzi solo le parti giuste dell'UI quando lo state cambia, *senza compromettere il modello mentale di React*. Crediamo che l'approccio di React — UI come semplice funzione dello state, con valori e idiomi JavaScript standard — sia una parte fondamentale del perché React sia stato accessibile a così tanti sviluppatori. Per questo abbiamo investito nella costruzione di un compiler ottimizzante per React.
33
+
La memorizzazione manuale è un compromesso ragionevole, ma non ci accontentavamo. La nostra visione è che React *automaticamente* renderizzi solo le parti giuste dell'UI quando lo state cambia, *senza compromettere il modello mentale di React*. Crediamo che l'approccio di React — UI come semplice funzione dello state, con valori e idiomi JavaScript standard — sia una parte fondamentale del perché React sia stato accessibile a così tanti sviluppatori. Per questo abbiamo investito nella costruzione di un compiler ottimizzante per React.
34
34
35
35
JavaScript è un linguaggio notoriamente difficile da ottimizzare, grazie alle sue regole permissive e alla natura dinamica. React Compiler riesce a compilare codice in sicurezza modellando sia le regole di JavaScript *sia* le "regole di React". Ad esempio, i componenti React devono essere idempotenti — restituire lo stesso valore a parità di input — e non possono mutare props o valori dello state. Queste regole limitano ciò che gli sviluppatori possono fare e aiutano a definire uno spazio sicuro in cui il compiler può ottimizzare.
Perl'elenco completo delle modifiche, consulta il [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md#1900-december-5-2024).
758
758
759
759
---
760
760
761
-
Graziea [AndrewClark](https://twitter.com/acdlite), [Eli White](https://twitter.com/Eli_White), [Jack Pope](https://github.com/jackpope), [Jan Kassens](https://github.com/kassens), [Josh Story](https://twitter.com/joshcstory), [Matt Carroll](https://twitter.com/mattcarrollcode), [Noah Lemen](https://twitter.com/noahlemen), [Sophie Alpert](https://twitter.com/sophiebits), and [Sebastian Silbermann](https://twitter.com/sebsilbermann) per la revisione e l'editing di questo post.
761
+
Graziea [AndrewClark](https://twitter.com/acdlite), [Eli White](https://twitter.com/Eli_White), [Jack Pope](https://github.com/jackpope), [Jan Kassens](https://github.com/kassens), [Josh Story](https://twitter.com/joshcstory), [Matt Carroll](https://twitter.com/mattcarrollcode), [Noah Lemen](https://twitter.com/noahlemen), [Sophie Alpert](https://twitter.com/sophiebits) e [Sebastian Silbermann](https://twitter.com/sebsilbermann) per la revisione e l'editing di questo post.
Copy file name to clipboardExpand all lines: src/content/blog/2024/10/21/react-compiler-beta-release.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: "React Compiler: rilascio Beta"
3
3
author: Lauren Tan
4
4
date: 2024/10/21
5
-
description: A React Conf 2024 abbiamo annunciato il rilascio sperimentale di React Compiler, uno strumento build-time che ottimizza la tua app React tramite memoization automatica. In questo post condividiamo i prossimi passi per l'open source e i progressi sul compiler.
5
+
description: A React Conf 2024 abbiamo annunciato il rilascio sperimentale di React Compiler, uno strumento build-time che ottimizza la tua app React tramite memorizzazione automatica. In questo post condividiamo i prossimi passi per l'open source e i progressi sul compiler.
6
6
translationStatus: ai-draft
7
7
---
8
8
@@ -36,7 +36,7 @@ Il team React è entusiasta di condividere nuovi aggiornamenti:
36
36
37
37
---
38
38
39
-
A [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), abbiamo annunciato il rilascio sperimentale di React Compiler, uno strumento build-time che ottimizza la tua app React tramite memoization automatica. [Puoi trovare un'introduzione a React Compiler qui](/learn/react-compiler).
39
+
A [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), abbiamo annunciato il rilascio sperimentale di React Compiler, uno strumento build-time che ottimizza la tua app React tramite memorizzazione automatica. [Puoi trovare un'introduzione a React Compiler qui](/learn/react-compiler).
40
40
41
41
Dal primo rilascio, abbiamo corretto numerosi bug segnalati dalla community React, ricevuto diversi fix e contributi di alta qualità[^1] al compiler, reso il compiler più resiliente alla vasta diversità di pattern JavaScript e continuato a distribuirlo più ampiamente in Meta.
42
42
@@ -90,7 +90,7 @@ Il nostro rilascio iniziale era focalizzato sull'identificare problemi principal
90
90
91
91
React Compiler può anche essere usato per compilare librerie. Poiché React Compiler deve girare sul codice sorgente originale prima di qualsiasi trasformazione, non è possibile che la pipeline di build di un'applicazione compili le librerie che usa. Quindi, la nostra raccomandazione è che i maintainer di librerie compilino e testino indipendentemente le proprie librerie con il compiler e distribuiscano codice compilato su npm.
92
92
93
-
Poiché il tuo codice è pre-compilato, gli utenti della tua libreria non dovranno avere il compiler abilitato per beneficiare della memoization automatica applicata alla libreria. Se la tua libreria punta ad app non ancora su React 19, specifica un `target` minimo e aggiungi `react-compiler-runtime` come dipendenza diretta. Il pacchetto runtime userà l'implementazione corretta delle API a seconda della versione dell'applicazione e polyfill le API mancanti se necessario.
93
+
Poiché il tuo codice è pre-compilato, gli utenti della tua libreria non dovranno avere il compiler abilitato per beneficiare della memorizzazione automatica applicata alla libreria. Se la tua libreria punta ad app non ancora su React 19, specifica un `target` minimo e aggiungi `react-compiler-runtime` come dipendenza diretta. Il pacchetto runtime userà l'implementazione corretta delle API a seconda della versione dell'applicazione e polyfill le API mancanti se necessario.
@@ -108,7 +108,7 @@ A [React Conf](/blog/2024/05/22/react-conf-2024-recap), abbiamo condiviso che il
108
108
109
109
Abbiamo visto miglioramenti significativi delle performance su tutte queste app. Man mano che distribuiamo, continuiamo a vedere risultati dell'ordine di [i guadagni che abbiamo condiviso in precedenza a ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). Queste app erano già state pesantemente ottimizzate a mano da ingegneri Meta ed esperti React nel corso degli anni, quindi anche miglioramenti dell'ordine di qualche percento sono una grande vittoria per noi.
110
110
111
-
Ci aspettavamo anche guadagni di produttività degli sviluppatori da React Compiler. Per misurarlo, abbiamo collaborato con i nostri partner data science in Meta[^2] per condurre un'analisi statistica approfondita dell'impatto della memoization manuale sulla produttività. Prima del rollout del compiler in Meta, abbiamo scoperto che solo circa l'8% delle pull request React usava memoization manuale e che queste pull request richiedevano il 31-46% in più di tempo per essere scritte[^3]. Questo ha confermato la nostra intuizione che la memoization manuale introduce overhead cognitivo, e prevediamo che React Compiler porterà a scrittura e revisione del codice più efficienti. In particolare, React Compiler assicura anche che *tutto* il codice sia memoizzato per impostazione predefinita, non solo l'8% (nel nostro caso) in cui gli sviluppatori applicano esplicitamente la memoization.
111
+
Ci aspettavamo anche guadagni di produttività degli sviluppatori da React Compiler. Per misurarlo, abbiamo collaborato con i nostri partner data science in Meta[^2] per condurre un'analisi statistica approfondita dell'impatto della memorizzazione manuale sulla produttività. Prima del rollout del compiler in Meta, abbiamo scoperto che solo circa l'8% delle pull request React usava memorizzazione manuale e che queste pull request richiedevano il 31-46% in più di tempo per essere scritte[^3]. Questo ha confermato la nostra intuizione che la memorizzazione manuale introduce overhead cognitivo, e prevediamo che React Compiler porterà a scrittura e revisione del codice più efficienti. In particolare, React Compiler assicura anche che *tutto* il codice sia memorizzato per impostazione predefinita, non solo l'8% (nel nostro caso) in cui gli sviluppatori applicano esplicitamente la memorizzazione.
112
112
113
113
## Roadmap verso Stable {/*roadmap-to-stable*/}
114
114
@@ -123,7 +123,7 @@ Intendiamo distribuire un Release Candidate del compiler nel prossimo futuro dop
123
123
124
124
Questi rilasci includono anche il plugin ESLint del compiler, che espone diagnostiche analizzate staticamente dal compiler. Prevediamo di combinare l'esistente plugin eslint-plugin-react-hooks con il plugin ESLint del compiler, così serve installare un solo plugin.
125
125
126
-
Dopo Stable, prevediamo di aggiungere altre ottimizzazioni e miglioramenti al compiler. Questo include sia miglioramenti continui alla memoization automatica sia nuove ottimizzazioni, con modifiche minime o nulle al codice di prodotto. L'upgrade a ogni nuovo rilascio del compiler è pensato per essere semplice, e ogni upgrade continuerà a migliorare le performance e ad aggiungere una gestione migliore di pattern JavaScript e React diversi.
126
+
Dopo Stable, prevediamo di aggiungere altre ottimizzazioni e miglioramenti al compiler. Questo include sia miglioramenti continui alla memorizzazione automatica sia nuove ottimizzazioni, con modifiche minime o nulle al codice di prodotto. L'upgrade a ogni nuovo rilascio del compiler è pensato per essere semplice, e ogni upgrade continuerà a migliorare le performance e ad aggiungere una gestione migliore di pattern JavaScript e React diversi.
127
127
128
128
Durante questo processo, prevediamo anche di prototipare un'estensione IDE per React. È ancora molto presto nella ricerca, quindi prevediamo di poter condividere più risultati in un futuro post React Labs.
Copy file name to clipboardExpand all lines: src/content/blog/2024/12/05/react-19.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -566,7 +566,7 @@ function Search({deferredValue}) {
566
566
}
567
567
````
568
568
569
-
Quando <CodeStep step={2}>initialValue</CodeStep> è fornito, `useDeferredValue` lo restituirà come `value` per il render iniziale del componente e pianificherà un re-renderin background con il <CodeStep step={1}>deferredValue</CodeStep> restituito.
569
+
Quando <CodeStep step={2}>initialValue</CodeStep> è fornito, `useDeferredValue` lo restituirà come `value` per il render iniziale del componente e pianificherà una ri-renderizzazionein background con il <CodeStep step={1}>deferredValue</CodeStep> restituito.
570
570
571
571
Per approfondire, consulta [`useDeferredValue`](/reference/react/useDeferredValue).
572
572
@@ -728,7 +728,7 @@ Per maggiori dettagli consulta le [Resource Preloading APIs](/reference/react-do
728
728
729
729
Abbiamo migliorato l'hydration per tenere conto di script di terze parti ed estensioni del browser.
730
730
731
-
Durante l'hydration, se un elemento renderizzato sul client non corrisponde all'elemento trovato nell'HTML dal server, React forzerà un re-render client per correggere il contenuto. In precedenza, se un elemento veniva inserito da script di terze parti o estensioni del browser, scatenava un errore di mismatch e un render client.
731
+
Durante l'hydration, se un elemento renderizzato sul client non corrisponde all'elemento trovato nell'HTML dal server, React forzerà una ri-renderizzazione lato client per correggere il contenuto. In precedenza, se un elemento veniva inserito da script di terze parti o estensioni del browser, scatenava un errore di mismatch e una renderizzazione lato client.
732
732
733
733
In React 19, i tag inaspettati in `<head>` e `<body>` verranno saltati, evitando errori di mismatch. Se React deve re-renderizzare l'intero documento a causa di un hydration mismatch non correlato, lascerà in place gli stylesheet inseriti da script di terze parti ed estensioni del browser.
0 commit comments