Cosa c'è dietro il leggendario Hooks? Di tanto in tanto, mi chiedo.

Dalla parte 1 , abbiamo esaminato Elementl'implementazione per spiegare il concetto di design generale.

Una Elementclasse wrapper gestisce l'inizializzazione, l'aggiornamento e lo smontaggio di Component.

A partire dalla parte 2 , useEffectviene esaminata in dettaglio tutti gli usi. In questa parte 3, vorremmo continuare e fare un tuffo a useState.

function Component() {
  const [value, setValue] = useState(initialValue);
  ...
  return (<div />)
}

Valore

Il valuefornito può essere utilizzato direttamente nella Componentdefinizione. E può essere ulteriormente inviato ai componenti dei bambini.

function Component() {
  const [value, setValue] = useState(initialValue)
  const onChange = e => {
    setValue(e.target.value)
  }
  return (
    <>
      value: {value}
      <input value={value} onChange={onChange} />
      <ChildComponent value={value} />
    </>
  )
}

const [value] = useState({ name, func, ...anything })

Sostituisci il valore con setValue, usa {} [] Object.assignper assicurarti di sostituire un oggetto.

setValue(name)
// replace property name
setValue({ ...value, name })
// append to array
setValue([ ...values, { name })

Se il valore deve essere risolto prima dell'impostazione, è possibile sostituirlo con una funzione.

const reducer = prev => prev + 1
setValue(reducer)

Una volta impostato il nuovo valore, richiede l' Elementaggiornamento. Nel prossimo ciclo, ui rifletterà questa modifica.

—

Per chiarire il design di cui sopra, di seguito è riportato il codice sorgente di useState.

constructor(initialValue) {
  this.updater = this.updater.bind(this)
  // for initial function value, resolve it
  if(typeof initialValue === 'function') {
    initialValue = initialValue()
  }
  this.makeArgs(initialValue)
}
update() {
 return this.args
}
updater(value) {
  // for function value, resolve the value
  if (typeof value === "function") {
    const updaterFn = value
    const [previousValue] = this.args
    value = updaterFn(previousValue)
  }
  this.makeArgs(value)
  // request element update
  this.el.update()
}
makeArgs(value) {
  // allocate value and setValue
  this.args = Object.freeze([value, this.updater])
}

useStatealloca un valore e consente di reimpostare il valore. Consente inoltre di utilizzare una funzione durante l'impostazione del valore.

Indice

• Parte 1, Elemento
• Parte 2, usaEffect
• Parte 3, useState <- SEI QUI
• Parte 4, renderizzare