¿Qué hay detrás de lo legendario Hooks? De vez en cuando, me pregunto.

Desde la Parte 1 , pasamos por Elementla implementación para explicar el concepto de diseño general.

Una Elementclase contenedora gestiona la inicialización, actualización y desmontaje de Component.

A partir de la Parte 2 , useEffectse examinan detalladamente todos los usos. En esta Parte 3, nos gustaría continuar y sumergirnos en useState.

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

Valor

Lo valueproporcionado se puede utilizar directamente en la Componentdefinición. Y se puede enviar más a los componentes secundarios.

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

Reemplace el valor con setValue, utilícelo {} [] Object.assignpara asegurarse de que está reemplazando un objeto.

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

Si es necesario resolver el valor antes de establecerlo, puede reemplazarlo con una función.

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

Una vez que se establece el nuevo valor, solicita la Elementactualización. En el próximo ciclo, ui reflejará este cambio.

—

Para aclarar el diseño anterior, a continuación se muestra el código fuente 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])
}

useStateasigna un valor y permite que el valor se establezca de nuevo. También permite utilizar una función al establecer el valor.

Índice

• Parte 1, Elemento
• Parte 2, use Effect
• Parte 3, useState <- USTED ESTÁ AQUÍ
• Parte 4, renderizar