Was steckt hinter dem Legendären Hooks? Ab und zu frage ich mich.

Ab Teil 1 haben wir die ElementImplementierung durchlaufen, um das allgemeine Designkonzept zu erläutern.

Eine ElementWrapper-Klasse verwaltet die Initialisierung, Aktualisierung und den Abbau von Component.

Ab Teil 2 wird useEffectausführlich auf alle Verwendungen eingegangen. In diesem Teil 3 möchten wir weitermachen und einen Tauchgang machen useState.

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

Wert

Das valuebereitgestellte kann direkt in der ComponentDefinition verwendet werden. Und es kann weiter in die untergeordneten Komponenten gesendet werden.

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

Ersetzen Sie den Wert durch setValue, verwenden {} [] Object.assignSie um sicherzustellen, dass Sie ein Objekt ersetzen.

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

Wenn der Wert vor dem Festlegen aufgelöst werden muss, können Sie ihn durch eine Funktion ersetzen.

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

Sobald der neue Wert festgelegt ist, fordert Elementer die Aktualisierung an. Im nächsten Zyklus wird ui diese Änderung widerspiegeln.

—

Um das obige Design zu verdeutlichen, ist unten der Quellcode von 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])
}

useStateordnet einen Wert zu und ermöglicht das erneute Setzen des Wertes. Es ermöglicht auch die Verwendung einer Funktion beim Einstellen des Werts.

Index

• Teil 1, Elemente
• Teil 2, useEffect
• Teil 3, useState <- SIE SIND HIER
• Teil 4, rendern