Во-первых: какова была проблема сегодня?
У меня была простая форма Admin Admin с компонентом ввода текста (который записывает имя пользователя) и некоторые другие компоненты, и этот текстовый вход имел подтверждение функции, которая вызывала API и проверяя, если введенное имя пользователя уже не было принято.
Проблема заключалась в том, что всякий раз, когда я изменил другие значения компонентов, запустил функцию проверки Validate, поскольку именно так работает форма Admin Admin.
И я хотел иметь функцию, которая кэширует введенное имя пользователя локально и только вызов API, если имя пользователя уже не проверяется.
В нормальных ситуациях это не проблема, вы можете просто манипулировать временем для вызова проверки, например, когда ваш компонент теряет фокус, как используя слушатель блокировки.
Однако, как я уже сказал, прежде чем админ-админ ведет себя по-другому, поэтому я читал вокруг, и я в конечном итоге читаю о мемузаризации функции
И я думал, что должен поделиться с вами, ребята, что я нашел и как это сработало для меня.
Так что такое методика памяти?
Memoation или Memoisation – это методика оптимизации, используемая в основном для ускорения компьютерных программ, сохраняя результаты дорогих вызовов функций и возврата кэшированного результата, когда одни и те же входы происходят снова.
Ну, я нашел эту отличную статью от этого великого автора Дивижаншу Майтани На FreeCodeCap.org вы можете проверить это здесь https://bit.ly/3difunv.
Кто я ухожу и использую некоторые примеры из его статьи, чтобы помочь распространить знания.
Что это значит?
Вомение в простых терминах означает запоминание или хранение в памяти. Воме воменой функции обычно быстрее, поскольку функция вызывается впоследствии с предыдущим значением (ыми), то вместо выполнения функции мы получили бы результат из кэша.
Хорошо, покажи мне несколько примеров!
Позвольте сказать, что у вас есть функция, которая возвращает факториал ряд Давайте назовем это GetFactorial
function getFactorial(n) {
// Calculations: n * (n-1) * (n-2) * ... (2) * (1)
return factorial
}
Отлично, теперь давайте найдем GetFactorial (50)
Компьютер будет выполнять расчеты и вернуть нам последний ответ, сладкий! Когда это сделано, давайте найдем GetFactorial (51)
Компьютер снова выполняет ряд вычислений и получает нам результат, но вы, возможно, заметили, что мы уже повторяем ряд шагов, которые могли бы избежать.
Оптимизированный способ будет:
GetFactorial (51) (50) * 51
Но наша функция выполняет расчеты с нуля каждый раз, когда это называется:
GetFactorial (51) * 50 * 49 * … * 2 * 1
Разве это не будет круто, если каким-то образом наша функция GetFactorial может вспомнить значения из своих предыдущих расчетов и использовать их для ускорения выполнения? Вот что может выглядеть простая воменая функция
//Простая функция, чтобы добавить что-то
const add = (n) => (n + 10); add(9);
//Простая воменая функция, чтобы добавить что-то
const memoizedAdd = () => {
let cache = {};
return (n) => {
if (n in cache) {
console.log('Fetching from cache');
return cache[n];
}
else {
console.log('Calculating result');
let result = n + 10;
cache[n] = result;
return result;
}
}
}
//Возвращенная функция из memoiedadd
const ();
console.log (newadd (9));//рассчитанный
console.log (newadd (9));//кэшировать
Некоторые вынос из вышеуказанного кода:
— memoizeddd возвращает функцию, которая вызывается позже. Это возможно, потому что в JavaScript функции являются первыми классовыми объектами, которые позволяют нам использовать их как Функции высшего порядка и вернуть другую функцию.
— Кэш может вспомнить его значения, поскольку возвращенная функция имеет закрытие над ним.
— Важно, чтобы метеозированная функция чиста. А чистый Функция вернет тот же выход для определенного ввода, независимо от того, сколько раз его называют, что делает кэш-память, как ожидалось.
Итак, как написать общую мемузионную функцию?
const memoizedFunction = (fn) => {
let cache = {};
return (value) => {
if (value in cache) {
console.log('Fetching from cache');
return cache[value];
}
else {
console.log('executing and fetching results');
let result = fn(value);
cache[value] = result;
return result;
}
}
}
Теперь вы можете пройти вашу функцию к этой памятной функции. В моем случае моя функция была такой: –
const alreadyExists = async value => {
return dataProvider
.getOne(username, {id: value})
.then(({data}) => (data && data.id ? 'UserName Already Exists' : null ))
.catch(error => {
console.log(error)
})
}
const memoizedUsername = memoizedFunction(alreadyExists); const validateUsername = [required(), minLength(3),memoizedUsername]
} redirect="list" validate={validateTimeframe} validateOnBlur submitOnEnter={false} > . . .
Так Например
console.log(validateUsername(SuperHero)); // calculated and will return null
console.log(validateUsername(SuperHero)); // cached and will return UserName Already Exists
console.log(validateUsername(username1234)); // calculated and will return null
Мемонография такая же, как кэширование?
Да, вид. Memoation на самом деле является определенным типом кэширования. В то время как кэширование может означать в общем в любой методике хранения (например HTTP-кеширование ) для будущего использования, мемзаризация конкретно включает кэширование возвращаемых значений функции.
Каково ограничение воменения?
— Для того, чтобы воспокоить функцию, она должна быть чистой, так что возвратные значения одинаковы для того же входа каждый раз.
— Немередность – это компромисс между добавленной пространством и дополнительной скоростью и, таким образом, только значимым для функций, имеющих ограниченное входное диапазон, так что кэшированные значения могут быть использованы чаще.
— Как будто вы должны выглядеть, как вы должны восполнить ваши вызовы API, однако это не нужно, потому что браузер автоматически кэширует их для вас. Посмотреть HTTP Caching Для более подробной информации.
— Лучший случай, который я обнаружил, что для мемонализированных функций предназначен для тяжелых вычислительных функций, которые могут значительно улучшить производительность (факториал и фибоначчи не очень хорошие реальные примеры мира).
— Если вы в React/Redux, вы можете проверить вспомогательный, который использует мемуизок селектор Чтобы убедиться, что расчеты происходят только тогда, когда изменение происходит в соответствующей части дерева состояния.
Оригинал: “https://dev.to/jadzeino/how-to-cache-your-javascript-functions-meet-the-memoization-technique-2i2l”