Создание пользовательского .config файла в asp.net

Цель useCallback - иметь возможность использовать реквизит или состояние, которые находятся в текущей области видимости и которые могут измениться при повторном рендеринге. Затем массив зависимостей сообщает React, когда вам нужна новая версия обратного вызова. Если вы пытаетесь запоминать дорогостоящие вычисления, вам нужно вместо этого использовать useMemo.

Пример ниже демонстрирует различия между useCallback и useMemo и последствия их неиспользования. В этом примере я использую React.memo для предотвращения повторного рендеринга Child, если только его реквизиты или состояние не изменятся. Это позволяет увидеть преимущества useCallback. Теперь, если Child получит новый onClick реквизит, это вызовет повторную визуализацию.

Дочерний элемент 1 получает незарегистрированный обратный вызов onClick, поэтому всякий раз, когда родительский компонент выполняет повторную визуализацию, дочерний элемент 1 всегда получает новую функцию onClick, поэтому он вынужден выполнять повторную визуализацию.

Ребенок 2 использует запомненный обратный вызов onClick, возвращенный из useCallback, а ребенок 3 использует эквивалент через useMemo, чтобы продемонстрировать значение

useCallback (fn, input) эквивалентно useMemo (() => fn, input)

blockquote>

Для дочерних элементов 2 и 3 обратный вызов по-прежнему выполняется каждый раз, когда вы нажимаете дочерний элемент 2 или 3, useCallback просто гарантирует, что один и тот же версия функции onClick передается, когда зависимости не изменились.

Следующая часть дисплея помогает указать, что происходит:

nonMemoizedCallback === memoizedCallback: false | true

blockquote>

Отдельно я Отображаю somethingExpensiveBasedOnA и запомнили версию, используя useMemo. В демонстрационных целях я использую неверный массив зависимостей (я намеренно пропустил b), чтобы вы могли видеть, что запомненная версия не изменяется при изменении b, но меняется при изменении a. Незамеченная версия изменяется всякий раз, когда изменяется a или b.

import ReactDOM from "react-dom";

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

const Child = React.memo(({ onClick, suffix }) => {
  const numRendersRef = useRef(1);
  useEffect(() => {
    numRendersRef.current++;
  });

  return (
    
 onClick(suffix)}>
      Click Me to log a and {suffix} and change b. Number of Renders:{" "}
      {numRendersRef.current}
    
  );
});
function App(props) {
  const [a, setA] = useState("aaa");
  const [b, setB] = useState("bbb");

  const computeSomethingExpensiveBasedOnA = () => {
    console.log("recomputing expensive thing", a);
    return a + b;
  };
  const somethingExpensiveBasedOnA = computeSomethingExpensiveBasedOnA();
  const memoizedSomethingExpensiveBasedOnA = useMemo(
    () => computeSomethingExpensiveBasedOnA(),
    [a]
  );
  const nonMemoizedCallback = suffix => {
    console.log(a + suffix);
    setB(prev => prev + "b");
  };
  const memoizedCallback = useCallback(nonMemoizedCallback, [a]);
  const memoizedCallbackUsingMemo = useMemo(() => nonMemoizedCallback, [a]);
  return (
    

      A: {a}
      

      B: {b}
      

      nonMemoizedCallback === memoizedCallback:{" "}
      {String(nonMemoizedCallback === memoizedCallback)}
      

      somethingExpensiveBasedOnA: {somethingExpensiveBasedOnA}
      

      memoizedSomethingExpensiveBasedOnA: {memoizedSomethingExpensiveBasedOnA}
      

      

      
 setA(a + "a")}>Click Me to change a
      

      
      
      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот связанный ответ: React Hooks useCallback заставляет дочерний процесс перерисовывать