> 웹 프론트엔드 > JS 튜토리얼 > useCallback VS useMemo

useCallback VS useMemo

王林
풀어 주다: 2024-08-14 17:28:13
원래의
816명이 탐색했습니다.

useCallback VS useMemo

우리 모두 React.useCallback과 React.useMemo를 사용하는 방법을 알고 있지만 때로는 어떤 것을 선택해야 할지 혼란스러울 때가 있습니다.

여기에서는 특정 상황에서 어떤 후크 기능을 사용해야 하는지 이해하는 데 도움이 되는 몇 가지 사례를 보여 드리겠습니다.

import React, { useState } from 'react'

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

  return <div>{num1 + num2}</div>
}
로그인 후 복사

위의 간단한 예에서는 HTML 요소 부분에서 num1 + num2로 합계를 구할 수 있지만 좀 더 복잡한 계산 로직이 있는 경우에는 더 이상 그렇게 하면 안 됩니다.

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

로그인 후 복사

이 예제 코드 블록에서는 num1 + num2의 결과 값을 유지하기 위해 useMemo를 선택했지만 num1 또는 num2의 유형이 숫자일 것이라고 완전히 신뢰할 수 없기 때문에 몇 가지 유형 확인 논리를 추가합니다. 잘못되면 자리 표시자 텍스트가 표시됩니다.

이런 상황에서는 HTML 부분에서는 한 줄의 간단한 코드로는 이 효과를 구현할 수 없습니다. 물론 조건부 연산자를 사용하여 HTML 부분에 일부 논리 코드를 작성할 수 있지만(JSX에서는 이를 수행할 수 있음) 비용으로 인해 코드의 가독성이 희생됩니다.

그러므로 이 경우에는 useMemo가 좋은 선택입니다.

자, 한 가지 더 복잡한 사례를 살펴보겠습니다.

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

로그인 후 복사

보시다시피 여기에는 그 합을 렌더링하는 num3과 num4가 있습니다. num1 + num2의 논리도 재사용하려면 어떻게 해야 합니까? 물론 useMemo를 사용하여 하나의 sum2를 정의할 수 있지만 num 유형의 유효성을 검사하기 위해 논리를 재사용하는 것은 좋은 생각이 아닙니다. 따라서 useMemo에서 유효성 검사 로직을 분리해야 합니다. 그러면 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>
    </>
  )
}

로그인 후 복사

보시다시피 useCallback을 사용하여 num 유형의 유효성을 검사하고 합계를 계산하는 논리로 새 함수를 반환하고 HTML 부분에서 이 validteNumAndSum 함수를 쉽게 재사용합니다.

자, 결론 부분으로 가보겠습니다:

계산을 쉽게 할 수 있다면(수학이나 더 복잡한 상황) useMemo와 useCallback은 둘 다 필요하지 않습니다.

계산 논리가 복잡하고 한 번만 계산해야 하는 경우 useMemo 후크를 선택하여 계산 프로세스를 패키지하고 하나의 간단한 결과를 반환할 수 있습니다.

그러나 동일한 로직을 두 번 이상 사용하려는 경우 useCallback을 선택하여 기억된 함수를 반환하고 구성 요소에서 재사용할 수 있습니다.


useCallback 케이스에 대해 너무 죄송합니다. 언제 useCallback을 선택해야 하는지 설명하는 실수를 하여 나쁜 예시 사례를 만들었습니다.

여기서 다시 시도해 보겠습니다.

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

로그인 후 복사

위 코드에서는 하나의 기본 숫자를 또 다른 변수 데이터로 추가하고 모든 합계는 기본 값과 함께 추가되어야 하며 기본 값을 변경하는 입력이 있으므로 시간 기준이 변경될 때마다 sumFunc는 수정하면 이를 사용하여 올바른 결과를 계산할 수 있습니다.

그래서 useCallback에 대한 결론을 업데이트하겠습니다. 일부 로직만 재사용해야 하는 경우 이 로직을 함수로 패키징하고 구성 요소에서 유틸리티 함수로 분할하여 어디에서나 재사용할 수도 있습니다. 그리고 로직이 여전히 구성 요소의 일부 변수에 의존하는 경우 useCallback을 사용하여 로직을 패키징하고 기억된 새 함수를 반환할 수 있습니다.

위 내용은 useCallback VS useMemo의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿