Каков размер кэша для ловушки реакции 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
ссылка и один массив зависимых значений.
Ему нужны зависимые значения, чтобы проверить, следует ли создавать новую ссылку обратного вызова или нет.