Skip to content

Commit 5f86799

Browse files
docs: apply suggestions from code review
Co-authored-by: Mattia Sanfilippo <[email protected]>
1 parent 7547898 commit 5f86799

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

src/content/learn/state-a-components-memory.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ L'event handler `handleClick` sta aggiornando una variabile locale, `index`. Ma
159159
Per aggiornare un componente con nuovi dati, devono accadere due cose:
160160

161161
1. **Conservare** i dati tra le renderizzazioni.
162-
2. **Triggerare** React per renderizzare il componente con nuovi dati (re-renderizzazione).
162+
2. **Triggerare** React per renderizzare il componente con nuovi dati (ri-renderizzazione).
163163

164164
L'Hook [`useState`](/reference/react/useState) offre queste due cose:
165165

@@ -341,7 +341,7 @@ Lo State è solo una di queste funzionalità, ma incontrerai gli altri Hook più
341341

342342
<Pitfall>
343343

344-
**Gli Hook (funzioni che iniziano per `use`) possono essere chiamati solo al livello superiore del tuo componente o [dei tuoi Hook.](/learn/reusing-logic-with-custom-hooks)** Non è possibile chiamare gli Hook all'interno di condizioni, cicli o altre funzioni nidificate. Gli Hook sono funzioni, ma è di aiuto considerarli come dichiarazioni incondizionate sulle necessità del tuo componente. "Usi" le funzionalità di React in cima al tuo componente in modo simile a come "importi" i moduli in cima al tuo file.
344+
**Gli Hook (funzioni che iniziano per `use`) possono essere chiamati solo al livello superiore del tuo componente o [dei tuoi Hook.](/learn/reusing-logic-with-custom-hooks)** Non è possibile chiamare gli Hook all'interno di condizioni, cicli o altre funzioni nidificate. Gli Hook sono funzioni, ma è di aiuto considerarli come dichiarazioni incondizionate sulle necessità del tuo componente. "Usi" le funzionalità di React in cima al tuo componente in modo simile a come "importi" i moduli in cima al tuo file.
345345

346346
</Pitfall>
347347

@@ -526,11 +526,11 @@ button {
526526

527527
#### Come fa React a sapere quale state ritornare? {/*how-does-react-know-which-state-to-return*/}
528528

529-
Avrai notato che la chiamata `useState` non riceve alcuna informazione circa *quale* variabile di stato prendere come riferimento. Non viene passato alcun "identificatore" a `useState`, quindi come fa a sapere quale delle variabili di stato restituire? Fa affidamento su qualche magia come il parsing delle tue funzioni? La risposta è no.
529+
Avrai notato che la chiamata `useState` non riceve alcuna informazione circa *quale* variabile di state prendere come riferimento. Non viene passato alcun "identificatore" a `useState`, quindi come fa a sapere quale delle variabili di state restituire? Fa affidamento su qualche magia come il parsing delle tue funzioni? La risposta è no.
530530

531531
Invece, per consentire la loro sintassi concisa, gli Hook **si basano su un ordine di chiamata stabile a ogni renderizzazione dello stesso componente.** Questo funziona bene in pratica perché se segui la regola sopra ("chiamare solo gli Hook al livello superiore"), gli Hook verranno sempre chiamati nello stesso ordine. Inoltre, un [plugin linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) rileva la gran parte degli errori.
532532

533-
Internamente, React mantiene un array di coppie di stato per ogni componente. Mantiene anche l'indice della coppia corrente, che viene impostato su `0` prima della renderizzazione. Ogni volta che chiami `useState`, React ti fornisce la coppia di stato successiva e incrementa l'indice. Puoi leggere di più su questo meccanismo in [React Hook: Non Magia, Solo Array.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
533+
Internamente, React mantiene un array di coppie di state per ogni componente. Mantiene anche l'indice della coppia corrente, che viene impostato su `0` prima della renderizzazione. Ogni volta che chiami `useState`, React ti fornisce la coppia di state successiva e incrementa l'indice. Puoi leggere di più su questo meccanismo in [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
534534

535535
Questo esempio **non utilizza React** ma ti dà un'idea di come `useState` funzioni internamente:
536536

@@ -1059,7 +1059,7 @@ img { width: 120px; height: 120px; }
10591059

10601060
<Solution>
10611061

1062-
Questo codice aggiunge una condizione in entrambi gli event handlers e disabilita i pulsanti quando necessario:
1062+
Questo codice aggiunge una condizione in entrambi gli event handler e disabilita i pulsanti quando necessario:
10631063

10641064
<Sandpack>
10651065

@@ -1219,7 +1219,7 @@ img { width: 120px; height: 120px; }
12191219

12201220
</Sandpack>
12211221

1222-
Nota come `hasPrev` e `hasNext` vengono usati *sia* per il JSX ritornato che per gli event handlers! Questo comodo pattern funziona perché le funzioni event handlers ["chiudono sopra"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) qualsiasi variabile dichiarata durante la renderizzazione.
1222+
Nota come `hasPrev` e `hasNext` vengono usati *sia* per il JSX ritornato che per gli event handler! Questo comodo pattern funziona perché le funzioni event handler ["chiudono sopra"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) qualsiasi variabile dichiarata durante la renderizzazione.
12231223

12241224
</Solution>
12251225

@@ -1274,7 +1274,7 @@ h1 { margin-top: 10px; }
12741274

12751275
<Solution>
12761276

1277-
Per prima cosa, importa `useState` da React. Poi sostituisci `firstName` e `lastName` con delle variabili state dichiarate chiamando `useState`. Infine, sostituisci ogni assegnazione come `firstName = ...` con `setFirstName(...)`, e fai lo stesso per `lastName`. Non dimenticare di aggiornare anche `handleReset` in modo che il pulsante di reset funzioni.
1277+
Per prima cosa, importa `useState` da React. Poi sostituisci `firstName` e `lastName` con delle variabili state dichiarate chiamando `useState`. Infine, sostituisci ogni assegnazione come `firstName = ...` con `setFirstName(...)` e fai lo stesso per `lastName`. Non dimenticare di aggiornare anche `handleReset` in modo che il pulsante di reset funzioni.
12781278

12791279
<Sandpack>
12801280

@@ -1446,7 +1446,7 @@ export default function FeedbackForm() {
14461446

14471447
Prova a spostare la seconda chiamata di `useState` dopo la condizione `if` e nota come questo rompe nuovamente il codice.
14481448

1449-
Se il tuo liner è [configurato per React](/learn/editor-setup#linting), dovresti vedere un errore lint quando commetti uno sbaglio del genere. Se non vedi un errore quando provi il codice difettoso localmente, devi impostare un linter per il tuo progetto.
1449+
Se il tuo linter è [configurato per React](/learn/editor-setup#linting), dovresti vedere un errore lint quando commetti uno sbaglio del genere. Se non vedi un errore quando provi il codice difettoso localmente, devi impostare un linter per il tuo progetto.
14501450

14511451
</Solution>
14521452

0 commit comments

Comments
 (0)