Qu'y a-t-il derrière le légendaire Hooks? De temps en temps, je me demande.

À partir de la partie 1 , nous avons parcouru la Elementmise en œuvre pour expliquer le concept de conception général.

Une Elementclasse wrapper gère l'initialisation, la mise à jour et le démontage de Component.

À partir de la partie 2 , useEffectest examiné en détail sur toutes les utilisations. Dans cette partie 3, nous aimerions continuer et plonger dans useState.

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

Évaluer

Le valuefourni peut être utilisé directement dans la Componentdéfinition. Et il peut être ensuite envoyé dans les composants enfants.

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 })

Remplacez la valeur par setValue, utilisez {} [] Object.assignpour vous assurer que vous remplacez un objet.

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

Si la valeur doit être résolue avant d'être définie, vous pouvez la remplacer par une fonction.

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

Une fois la nouvelle valeur définie, il demande la Elementmise à jour. Au cours du prochain cycle, ui reflétera ce changement.

—

Pour clarifier la conception ci-dessus, voici le code source de 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])
}

useStatealloue une valeur et permet à la valeur d'être à nouveau définie. Il permet également d'utiliser une fonction lors du réglage de la valeur.

Indice

• Partie 1, élément
• Partie 2, useEffet
• Partie 3, useState <- VOUS ÊTES ICI
• Partie 4, rendu