useCallback VS useMemo

Nous savons tous comment utiliser React.useCallback et React.useMemo, mais parfois nous ne savons pas lequel choisir.

Ici, je vais vous montrer quelques cas pour vous aider à comprendre quelle fonction de hook nous devrions utiliser dans certaines situations spécifiques.

import React, { useState } from 'react'

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

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

Dans l'exemple simple ci-dessus, nous pouvons simplement obtenir la somme par num1 + num2 dans la partie élément HTML, mais si nous avons une logique de calcul plus complexe, nous ne devrions plus le faire.

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

Dans cet exemple de bloc de code, nous avons choisi useMemo pour conserver la valeur de résultat num1 + num2, mais nous ajoutons une logique de vérification de type, car nous ne pouvons pas totalement faire confiance au type de num1 ou num2 serait un nombre, donc quand le type se passe mal, nous afficherons le texte d'espace réservé.

Dans cette situation, vous ne pouvez pas réaliser cet effet dans la partie HTML avec un simple code sur une seule ligne. Bien sûr, vous pouvez écrire du code logique dans la partie HTML avec des opérateurs conditionnels (JSX vous permet de le faire), mais le coût sacrifie la lisibilité du code.

Donc, useMemo est un bon choix pour gérer ce cas.

Ok, passons à un autre cas complexe.

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

Comme vous pouvez le voir, nous avons ici num3 et num4 pour en restituer la somme. Si nous voulons également réutiliser la logique de num1 + num2, que devons-nous faire ? Bien sûr, nous pouvons toujours utiliser useMemo pour définir un sum2, mais ce n'est pas une bonne idée de réutiliser la logique pour valider le type du num. Nous devons donc séparer la logique de validation de useMemo. Puis useCallback apparaît !

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

Comme vous pouvez le voir, nous utilisons useCallback pour renvoyer une nouvelle fonction avec la logique de validation du type de num et de calcul de la somme, et nous réutilisons facilement cette fonction validteNumAndSum dans la partie HTML.

Ok, passons à la partie conclusion :

Si vous pouvez facilement faire un calcul (mathématiques ou situation plus complexe), vous n'avez pas besoin des deux useMemo et useCallback.

Si votre logique de calcul est complexe et ne doit être calculée qu'une seule fois, vous pouvez choisir le hook useMemo pour regrouper votre processus de calcul et renvoyer un résultat simple.

Mais si vous souhaitez utiliser la même logique plusieurs fois, vous pouvez choisir useCallback pour renvoyer une fonction mémorisée afin de la réutiliser dans votre composant.

---

Je suis vraiment désolé pour le cas useCallback. J'ai fait une erreur en expliquant quand choisir useCallback et j'ai créé un mauvais exemple de cas.

Ici, je vais réessayer.

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

Dans le code ci-dessus, nous ajoutons un numéro de base comme autre donnée variable, et chaque somme doit être ajoutée avec la valeur de base, et nous avons une entrée pour changer la valeur de base, donc chaque fois que la base est modifiée et sumFunc le ferait être modifié également, et nous pouvons l'utiliser pour calculer le bon résultat.

Je vais donc mettre à jour ma conclusion sur useCallback : si nous avons juste besoin de réutiliser une certaine logique, nous pouvons empaqueter cette logique dans une fonction et même la séparer du composant en tant que fonction util pour la réutiliser n'importe où. Et si notre logique repose toujours sur une variable du composant, nous pouvons utiliser useCallback pour empaqueter la logique et renvoyer une nouvelle fonction mémorisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!