useCallback против useMemo и когда их использовать - PullRequest
Новая
       15

useCallback против useMemo и когда их использовать

3 голосов
/ 02 мая 2019

В чем основная разница между useCallback и useMemo?И когда использовать useCallback React Hooks?

1 Ответ

1 голос
/ 02 мая 2019

Оба они принимают функцию и массив зависимостей в качестве параметров типа 'useEffect'.Возвращаемое значение функции будет изменено только при изменении одного из значений зависимостей - в противном случае будет возвращено кэшированное значение.

Обратите внимание, что передача пустого массива зависимостей или вообще никакого массива приведет к тому, что Hook вернетзапоминаемое значение при каждом вызове.

Основное различие между ними состоит в том, что useCallback возвращает запомненный обратный вызов, а useMemo возвращает запомненное значение, являющееся результатом параметра функции.

Если вам нужно обработать много данных, «useMemo» является идеальным хуком, поскольку он выполнит работу один раз при первом рендеринге, а затем вернет кэшированную версию при каждом другом рендере.

'useCallback', однако, используется по-разному.Возьмите, например, родительский компонент, который часто перерисовывается.Внутри родителя у нас есть дочерний компонент, который принимает функцию-проп.При каждом повторном рендеринге ребенок будет бесполезно повторять свою функцию.Однако если вы передадите «useCallback» в качестве реквизита с массивом зависимостей, это решит проблему, потому что функция будет выполняться только при изменении зависимости.После этого каждый повторный рендеринг получит кэшированную функцию. 

import React, { useState, useMemo, useCallback } from "react";

const App = () => {
  // We create two states that will keep count of the number of time all hooks are called
  const [callbackCount, setCallbackCount] = useState(0);
  const [memoCount, setMemoCount] = useState(0);

  const memoFunction = () => {
    console.log(memoCount, "memo called");
    // Do something that will take a lot of processing ...
  };

  // Here if we give an empty array of dependencies, the callback function will return the old value of callbackCount
  // because useCallback will return its memoized version
  const callbackFunction = useCallback(() => {
    console.log(callbackCount, "callback called");
    // Do something with callbackCount ...
    return callbackCount;
  }, [callbackCount]);

  // We create the memo hook, when memoCount changes, the function will be executed again
  useMemo(memoFunction, [memoCount]);

  return (
    <>
      {/* This component will receive a function that will change when the dependency value changes */}
      <ChildComponent action={callbackFunction} />

      {/* Change the callback hook dependency to trigger a change in the child */}
      <button onClick={() => setCallbackCount(callbackCount + 1)}>
        Change callback count
      </button>

      {/* After creating useMemo, each change of memoCount will trigger the function passed to the hook,
    otherwise the memoized value will be returned */}
      <button onClick={() => setMemoCount(memoCount + 1)}>
        Change memo count
      </button>
    </>
  );
};

const ChildComponent = ({action}) => {
  const [value, setValue] = useState(0)

  useEffect(() => {
    let val = action()
    setValue(val)
  }, [action]) 

  return(
    <>
    Child : {value}
    </>
  )
}

Теперь вы должны быть готовы оптимизировать свой код с помощью React Hooks.Напомним: вы не должны использовать «useCallback» и «useMemo» для всего.'useMemo' должен использоваться для обработки больших данных, тогда как 'useCallback' - это способ добавить больше зависимости к вашему коду, чтобы избежать бесполезного рендеринга.

...