[React Hook] useState

Stranamente, l'ambiente React adora le cose con 'use' attaccato.

useServer, useCallback, useState, useMemo, ecc.

Anche gli hook personalizzati hanno tutti 'use' attaccato.

Da dove è iniziato?

useState è un hook famoso.

Memorizza i valori dello stato e, quando cambiano, esegue il re-rendering. È molto semplice.

È l'esempio che tutti conoscono.

Si dice che il re-rendering avvenga quando il valore dello stato cambia, ma quale è l'ambito del re-rendering?

Solo il tag p? O anche il tag button?

La risposta è che l'intero componente in cui useState è chiamato viene re-renderizzato.

ExampleComponent viene re-renderizzato, ma

si dice che utilizzi il Virtual DOM per confrontare i valori e modificare solo le parti diverse del DOM.

useState viene chiamato ad ogni re-rendering, ma come fa a mantenere i valori?

La risposta sta nella struttura di useState.

Questo è il codice reale di useState di React.

Ottiene il dispatcher dall'oggetto globale ed esegue useState.

Da questo non si capisce la struttura.

Scavando più a fondo, troviamo il seguente codice.

Ottiene l'hook e assegna la funzione set direttamente alla coda (queue) dell'hook tramite bind.

(bind lega this alla funzione esistente, utilizza gli altri argomenti come argomenti della funzione e restituisce una nuova funzione con this legato).

Neanche così si riesce a capire il motivo.

Scaviamo ancora più a fondo.

Si può vedere che il valore iniziale viene assegnato ogni volta. Questo non spiega come lo stato venga mantenuto.

Scaviamo ancora più a fondo. L'hook sembra sospetto.

currentlyRenderingFiber e workInProgressHook sono variabili globali.

Utilizzando l'assegnazione da destra a sinistra, implementa una linked list.

Quindi, si prevede che l'hook abbia la seguente struttura.

I valori vengono aggiunti continuamente all'inizio.

Tuttavia, la spiegazione non è ancora chiara. Dopo aver visto altre implementazioni di useState,

ho scoperto che non chiamano tutte mountState, ma chiamano updateState e rerenderState durante il re-rendering.

Pertanto, la struttura è quella sopra descritta e si dice che diverse funzioni vengano chiamate in base all'evento.

Se vuoi vedere il codice direttamente, puoi fare riferimento a react/packages/react-reconciler/src/ReactFiberHooks.js.