Проверяет понимание мемоизации функций с несколькими аргументами, включая объекты и массивы, что важно для оптимизации производительности в React и других приложениях.
Мемоизация — это техника оптимизации, при которой результаты вызова функции сохраняются в кэше, и при повторном вызове с теми же аргументами возвращается сохранённый результат вместо повторного вычисления. Это особенно полезно для дорогих вычислений, например, в рекурсивных алгоритмах или при рендеринге компонентов React.
Если функция принимает несколько аргументов, нужно создать уникальный ключ, который однозначно идентифицирует набор аргументов. Простейший способ — объединить аргументы в строку. Однако объекты и массивы при приведении к строке дают '[object Object]' или '1,2,3', что может привести к коллизиям.
Для объектов и массивов можно использовать JSON.stringify. Но у этого метода есть ограничения: порядок ключей в объекте может меняться, циклические ссылки вызывают ошибку, а функции и undefined не сериализуются. Альтернатива — использовать WeakMap для объектов, но это работает только если объект передаётся как единственный аргумент.
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}
// Пример использования
const add = (a, b) => a + b;
const memoAdd = memoize(add);
memoAdd(1, 2); // 3
memoAdd(1, 2); // 3 (из кэша)
В React для мемоизации компонентов используется React.memo, а для функций — useCallback и useMemo, которые сравнивают зависимости по ссылке. Если зависимости — объекты, их нужно мемоизировать отдельно или использовать глубокое сравнение.
Итог: мемоизация с несколькими аргументами требует аккуратной сериализации ключей. Для простых случаев подходит JSON.stringify, но для сложных структур лучше использовать специализированные библиотеки или WeakMap. Применяйте мемоизацию там, где функция вызывается часто с одинаковыми аргументами и вычисления дороги.
Уровень
Рейтинг:
4
Сложность:
6
Навыки
JavaScript
React
Ключевые слова
Подпишись на React Developer в телеграм
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию