useCallback VS useMemo

Wir alle wissen, wie man React.useCallback und React.useMemo verwendet, aber manchmal sind wir verwirrt darüber, welches wir wählen sollen.

Hier zeige ich euch einige Fälle, um euch zu helfen, zu verstehen, welche Hook-Funktion wir in bestimmten Situationen verwenden sollten.

import React, { useState } from 'react'

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)

  return <div>{num1 + num2}</div>
}

Im obigen einfachen Beispielfall können wir einfach die Summe von num1 + num2 im HTML-Elementteil erhalten, aber wenn wir eine komplexere Berechnungslogik haben, sollten wir das nicht mehr tun.

import React, { useState, useMemo } from 'react'

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)

  const sum = useMemo(() => {
    const _num1 = Number(num1),
      _num2 = Number(num2)
    if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
      return "check your num's type"
    }
    return _num1 + _num2
  }, [num1, num2])

  return <div>{sum}</div>
}

In diesem Beispielcodeblock haben wir useMemo ausgewählt, um den Ergebniswert von num1 + num2 beizubehalten, aber wir fügen eine Typprüflogik hinzu, da wir nicht völlig darauf vertrauen können, dass der Typ von num1 oder num2 Zahl wäre, also wenn der Typ Wenn etwas schief geht, wird der Platzhaltertext angezeigt.

In dieser Situation können Sie diesen Effekt im HTML-Teil nicht mit einfachem Code in einer Zeile realisieren. Natürlich können Sie im HTML-Teil Logikcode mit bedingten Operatoren schreiben (JSX ermöglicht Ihnen dies), aber die Kosten beeinträchtigen die Lesbarkeit des Codes.

UseMemo ist also eine gute Wahl, um diesen Fall zu bearbeiten.

Okay, lass uns einen komplexeren Fall angehen.

import React, { useState, useMemo } from 'react'

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sum1 = useMemo(() => {
    const _num1 = Number(num1),
      _num2 = Number(num2)
    if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
      return "check your num's type"
    }
    return _num1 + _num2
  }, [num1, num2])

  return (
    <>
      <div>{sum1}</div>
      <div>{num3 + num4}</div>
    </>
  )
}

Wie Sie sehen können, haben wir hier num3 und num4, um deren Summe darzustellen. Was sollen wir tun, wenn wir auch die Logik von num1 + num2 wiederverwenden möchten? Natürlich können wir useMemo immer noch verwenden, um eine sum2 zu definieren, aber es ist keine gute Idee, die Logik wiederzuverwenden, um den Typ der Zahl zu validieren. Daher müssen wir die Validierungslogik vom useMemo trennen. Dann erscheint useCallback!

import React, { useState, useCallback } from 'react'

const validteNumAndSum = (number1, number2) => {
  const _num1 = Number(number1),
    _num2 = Number(number2)
  if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
    return "check your num's type"
  }
  return _num1 + _num2
}

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sumFunc = useCallback(validteNumAndSum, [])

  return (
    <>
      <div>{sumFunc(num1, num2)}</div>
      <div>{sumFunc(num3, num4)}</div>
    </>
  )
}

Wie Sie sehen können, verwenden wir useCallback, um eine neue Funktion mit der Logik zur Validierung des Typs von num und zur Berechnung der Summe zurückzugeben, und wir verwenden diese validteNumAndSum-Funktion problemlos im HTML-Teil wieder.

Okay, kommen wir zum Schlussteil:

Wenn Sie leicht eine Berechnung durchführen können (Mathematik oder eine komplexere Situation), müssen Sie nicht beides verwenden: „Memo“ und „Callback“.

Wenn Ihre Berechnungslogik komplex ist und nur einmal berechnet werden muss, können Sie den useMemo-Hook auswählen, um Ihren Berechnungsprozess zu bündeln und ein einfaches Ergebnis zurückzugeben.

Wenn Sie jedoch dieselbe Logik mehr als einmal verwenden würden, können Sie „useCallback“ wählen, um eine gespeicherte Funktion zurückzugeben, um sie in Ihrer Komponente wiederzuverwenden.

---

Der useCallback-Fall tut mir so leid. Ich habe einen Fehler gemacht, nämlich zu erklären, wann useCallback gewählt werden soll, und einen schlechten Beispielfall erstellt.

Hier werde ich es noch einmal versuchen.

import React, { useState, useCallback } from 'react'

export default function App() {
  const [base, setBase] = useState(0)
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sumFunc = useCallback(
    (number1, number2) => {
      const _num1 = Number(number1),
        _num2 = Number(number2)
      if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
        return "check your num's type"
      }
      return _num1 + _num2 + base
    },
    [base],
  )

  return (
    <>
      <input
        type="number"
        value={base}
        onChange={e => {
          setBase(Number(e.target.value))
        }}
      />
      <div>{sumFunc(num1, num2)}</div>
      <div>{sumFunc(num3, num4)}</div>
    </>
  )
}

Im obigen Code fügen wir eine Basiszahl als weitere variable Daten hinzu, und jede Summe sollte mit dem Basiswert addiert werden, und wir haben eine Eingabe, um den Wert von Basis zu ändern, sodass sich die Basis jedes Mal ändert, und sumFunc würde dies tun geändert werden, und wir können daraus das richtige Ergebnis berechnen.

Deshalb werde ich meine Schlussfolgerung zu useCallback aktualisieren: Wenn wir nur eine Logik wiederverwenden müssen, können wir diese Logik in eine Funktion packen und sie sogar als Util-Funktion von der Komponente trennen, um sie überall wiederzuverwenden. Und wenn unsere Logik immer noch auf einer Variablen der Komponente basiert, können wir useCallback verwenden, um die Logik zu packen und eine gespeicherte neue Funktion zurückzugeben.

Das obige ist der detaillierte Inhalt vonuseCallback VS useMemo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!