useCallback VS useMemo

Kita semua tahu cara menggunakan React.useCallback dan React.useMemo, tetapi kadangkala kita akan keliru tentang yang mana satu harus kita pilih.

Di sini saya akan menunjukkan kepada anda beberapa kes untuk membantu anda memahami fungsi cangkuk yang harus kami gunakan dalam beberapa situasi tertentu.

import React, { useState } from 'react'

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

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

Dalam kes contoh mudah di atas, kita hanya boleh mendapatkan jumlah dengan num1 + num2 dalam bahagian elemen HTML, tetapi jika kita mempunyai logik pengiraan yang lebih kompleks, kita tidak sepatutnya berbuat demikian lagi.

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

Dalam blok kod contoh ini, kami memilih useMemo untuk mengekalkan nilai hasil num1 + num2, tetapi kami menambah beberapa logik semak jenis, kerana kami tidak boleh mempercayai sepenuhnya jenis num1 atau num2 adalah nombor, jadi apabila jenis menjadi salah, kami akan menunjukkan teks pemegang tempat.

Dalam situasi ini, anda tidak dapat merealisasikan kesan ini dalam bahagian HTML dengan kod ringkas dalam satu baris. Sudah tentu, anda boleh menulis beberapa kod logik dalam bahagian HTML dengan pengendali bersyarat (JSX membenarkan anda melakukannya), tetapi kosnya mengorbankan kebolehbacaan kod tersebut.

Jadi, useMemo ialah pilihan yang baik untuk mengendalikan kes ini.

Ok, mari kita sambung satu kes yang lebih kompleks.

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

Seperti yang anda lihat, kami mempunyai num3 dan num4 di sini untuk memaparkan jumlahnya. Jika kita juga ingin menggunakan semula logik num1 + num2, apakah yang perlu kita lakukan? Sudah tentu kita masih boleh menggunakan useMemo untuk menentukan satu jumlah2, tetapi bukan idea yang baik untuk menggunakan semula logik untuk mengesahkan jenis num. Jadi kita perlu memisahkan logik pengesahan daripada useMemo. Kemudian useCallback muncul!

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

Seperti yang anda lihat, kami menggunakan useCallback untuk mengembalikan fungsi baharu dengan logik mengesahkan jenis num dan mengira jumlahnya, dan kami menggunakan semula fungsi validteNumAndSum ini dalam bahagian HTML dengan mudah.

Ok, mari kita ke bahagian kesimpulan:

Jika anda boleh membuat pengiraan dengan mudah (matematik atau situasi yang lebih kompleks), anda tidak memerlukan kedua-duanya menggunakanMemo dan useCallback.

Jika logik pengiraan anda rumit dan hanya perlu dikira sekali sahaja, anda boleh memilih cangkuk useMemo untuk membungkus proses pengiraan anda dan mengembalikan satu hasil mudah.

Tetapi jika anda akan menggunakan logik yang sama lebih daripada satu kali, anda boleh memilih useCallback untuk mengembalikan fungsi yang dihafal untuk menggunakannya semula dalam komponen anda.

---

Saya minta maaf tentang useCallback case. Saya membuat kesilapan iaitu menerangkan bila hendak memilih useCallback dan mencipta contoh kes yang buruk.

Di sini saya akan cuba lagi.

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

Dalam kod di atas, kami menambah satu nombor asas sebagai data pembolehubah lain, dan setiap jumlah perlu ditambah dengan nilai asas, dan kami mempunyai input untuk menukar nilai asas, jadi setiap kali asas ditukar dan sumFunc akan diubah suai juga, dan kita boleh menggunakannya untuk mengira hasil yang betul.

Jadi saya akan mengemas kini kesimpulan saya tentang useCallback: jika kita hanya perlu menggunakan semula beberapa logik, kita boleh membungkus logik ini ke dalam fungsi dan juga memisahkannya daripada komponen sebagai fungsi util untuk menggunakannya semula di mana-mana sahaja. Dan jika logik kita masih bergantung pada beberapa pembolehubah komponen, kita boleh menggunakan useCallback untuk membungkus logik dan mengembalikan fungsi baharu yang dihafal.

Atas ialah kandungan terperinci useCallback VS useMemo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!