Каков размер кэша для ловушки реакции useCallback и useMemo и почему?

Я смотрю на исходный код React и конкретно на useCallback реализация. Насколько я понимаю размер кеша useCallback это один. В mountCallback мы инициализируем hook.memoizedState в массив, где первый элемент является callback - первый параметр useCallback, В updateCallback если зависимости не изменились, то мы возвращаем первый элемент hook.memoizedState массив. Поскольку callbackСсылка не изменилась, не будет повторного рендеринга. И наоборот, если зависимости изменились и мы установили первый элемент hook.memoizedState массив к callback параметр updateCallback тогда callbackСсылка изменится (потому что параметры объекта функции всегда имеют новое значение), что вызывает повторный рендеринг.

Так что кеширование в useCallback основан на callbackСсылка. Правильно ли мое понимание?

function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

1 ответ

Кеширует callback сам плюс зависимые значения, которые вы передали в качестве второго аргумента. В любой момент времени он держит один callback ссылка и один массив зависимых значений.

Ему нужны зависимые значения, чтобы проверить, следует ли создавать новую ссылку обратного вызова или нет.

Другие вопросы по тегам