React native очистить кэш

Обновлено: 04.07.2024

Получение данных в React — это один процесс, а вот их хранение и кэширование — совсем другой. Возможности кажутся безграничными, а отличия зачастую настолько тонкие, что выбрать правильную технику становится не так уж и просто.

В статье мы рассмотрим различные техники, обращая внимание на все их нюансы и неуловимые различия. Что выбрать: useMemo или мемоизацию, хранение данных с помощью useState или контекста? Изучив материал, вы сможете принимать осознанные решения относительно кэширования данных и будете владеть подробной информацией по данной теме. А еще вас ждет много GIF-анимации.

Данные

Перед тем, как углубиться в код, быстро просмотрим данные, которые нам предстоит получать в большинстве компонентов. Файл, выступающий в роли API, выглядит следующим образом:

Этот код выполняется при осуществлении запроса к пути проекта /api/people . Как видно, мы возвращаем объект с двумя свойствами:

randomNumber : произвольное число в диапазоне 0–10000.
people : статический массив с тремя вымышленными именами.

Свойство randomNumber поможет наглядно продемонстрировать, происходит ли отображение кэшированных данных во фронтенде. По мере углубления в тему вы поймете, о чем идет речь.

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

Компонент People

Отображая данные из API, мы передаем их в компонент с именем PeopleRenderer . Выглядит это следующим образом:

2 компонента, отображающие точно такие же (кэшированные) данные 2 компонента, отображающие точно такие же (кэшированные) данные 2 компонента, отображающих разные (некэшированные) данные 2 компонента, отображающих разные (некэшированные) данные

Имея в виду эту вводную информацию, рассмотрим первую технику.

useEffect

Внутри компонентов для получения данных можно задействовать хук useEffect , после чего сохранять эти данные локально (внутри компонента) с помощью useState :

При передаче пустого массива в качестве второго параметра (строка 11) хук useEffect будет выполнен после встраивания компонента в DOM. При новом отображении компонента повторно он выполняться уже не будет. Назовем этот хук “одноразовым”.

В связи с применением useEffect таким способом следует упомянуть о том, что при наличии нескольких экземпляров компонента в DOM все они будут получать данные по отдельности (при встраивании).

В этой технике нет ничего плохого. Более того, иногда она приходится как нельзя кстати. Но в ряде случаев требуется единожды получить данные и повторно их использовать во всех других экземплярах посредством кэширования. С этой целью можно обратиться к другим техникам.

Мемоизация

Мемоизация — это мудреный термин для обозначения очень простой техники. Суть ее в том, что вы создаете функцию, которая при каждом вызове сохраняет результаты в кэше, прежде чем их вернуть.

При первом вызове такой мемоизованной функции результаты вычисляются (или получаются — все зависит от выполняемых операций внутри тела функции). Прежде чем вернуть результаты, вы сохраняете их в кэше в ключе, который создается с входными параметрами:

Написание такого шаблонного кода вскоре может стать трудоемким процессом, поэтому такие известные библиотеки, как Lodash и Underscore , предоставляют вспомогательные функции, упрощая создание мемоизованных:

import memoize from "lodash.memoize" ;

const MyFunction = (age ) => return `You are $ years old!` ;
>
const MyMemoizedFunction = memoize(MyFunction);

Мемоизация для получения данных

Данная техника подходит для получения данных. Мы создаем функцию getData , возвращающую обещание Promise , разрешение которого происходит по окончании fetch-запроса. Мы сохраняем этот Promise :

import memoize from "lodash.memoize" ;

export default memoize(getData);

Обратите внимание, что в данном примере мы не проводим обработку ошибок. Эта тема заслуживает отдельной статьи, особенно в связи с мемоизацией (поскольку отклоненное обещание Promise тоже бы сохранилось, что чревато проблемами).

Теперь заменим хук useEffect на другой, который выглядит следующим образом:

Поскольку результат getData сохраняется, то при встраивании все компоненты получат одинаковые данные:

Компоненты используют один и тот же сохраненный Promise Компоненты используют один и тот же сохраненный Promise

Стоит также отметить, что при открытии страницы memoize.tsx (до добавления первого экземпляра компонента) данные уже предварительно получаются. Дело в том, что мы определили функцию getData в отдельном расположенном в верхней части страницы файле, при загрузке которого создается Promise .

Можно аннулировать (очистить) кэш мемоизованной функции, присвоив ее свойству cache нового Cache .

getData.cache = new memoize.Cache();

В качестве альтернативного варианта можно очистить существующий кэш (это экземпляр Map ).

getData .cache .clear ();

Однако данная функциональность характерна лишь для Lodash. Другие же библиотеки требуют иных решений. Ниже представлен наглядный пример очистки кэша в действии.

React Context

React Context — еще один известный и подробно изученный инструмент (в отношении которого однако часто происходит недопонимание). В связи с этим в очередной раз напоминаю, что он не заменяет такие инструменты, как Redux, поскольку не является средством управления состоянием.

Итак, что такое Context? Это механизм для внедрения данных в дерево компонентов. Если у вас есть некие данные, то их можно сохранить, к примеру, с помощью хука useState , внутри компонента, находящегося на более высоком уровне иерархии. Затем с помощью Provider Context внедрить эти данные в дерево, что позволит считывать (использовать) их в любом нижестоящем компоненте.

Для большей ясности приведем пример. Сначала создаем новый контекст.

export const PeopleContext = createContext(null );

После этого обертываем компонент, отображающий компоненты People , в Provider Context.

В 12 строке у нас есть возможность отобразить любой элемент. В определенный момент, опускаясь вниз по дереву, отобразим компонент(ы) People .

import < useContext >from "react" ;
import PeopleRenderer from "../PeopleRenderer" ;
import < PeopleContext >from "./context" ;

export default function PeopleWithContext ( ) const < json >= useContext(PeopleContext);

Можно применить значение из Provider с помощью хука useContext , получая следующий результат.

Обратите внимание на одно важное здесь отличие! На последнем этапе анимации мы нажимаем кнопку “Set new seed”. При этом повторно получаются данные, хранящиеся в Provider Context. По завершении этого (спустя 750 мс) полученные данные становятся новым значением Provider , и компоненты People отображаются еще раз. Как видите, все они пользуются одними и теми же общими данными.

Эта техника значительно отличается от ранее рассмотренного примера мемоизации, в котором каждый компонент хранил собственную копию мемоизованных данных с помощью useState . В этом же случае, задействуя контекст, они не хранят копии, а оперируют только ссылками на один и тот же объект. Вот почему все компоненты обновляются одинаковыми данными при обновлении значения в Provider .

useMemo

В последнем, но не маловажном разделе, проведем беглый обзор useMemo . От предыдущих техник этот хук отличается тем, что он является лишь формой кэширования на локальном уровне: внутри одного экземпляра компонента. useMemo не предназначен для совместного использования данных несколькими компонентами — по крайней мере, не без обходных решений в виде пробрасывания (prop-drilling) пропсов или внедрения зависимостей (например, React Context).

useMemo — это инструмент оптимизации. Он позволяет избежать пересчета значения при каждом повторном отображении компонента. Нет лучшего объяснения, чем сама документация , но рассмотрим пример.

getRnd (строка 2): функция, возвращающая случайное число в диапазоне 0–10000.
age (строка 4): с помощью useState сохраняет число, обозначающее возраст.
randomNumber (строка 5): сохраняет случайное число посредством useState .

И наконец, в строке 7 применяется useMemo . Мы запоминаем результат вызова функции и сохраняем его в переменной pow . Функция возвращает значение суммы age , возведенной во вторую степень, и случайного числа. Поскольку она зависит от переменной age , мы передаем эту переменную в аргумент зависимости вызова useMemo .

Функция выполняется только в случае изменения значения age . Если компонент отображается повторно, а значение age не изменилось, useMemo просто вернет мемоизованный результат.

В этом примере вычисление pow не представляет большой сложности, но не трудно представить себе все преимущества данного подхода в случае с более громоздкой функцией и при необходимости частого повторного отображения компонента.

Две последние анимации показывают, что происходит. Сначала мы обновляем randomNumber , не затрагивая значение age , вследствие чего наблюдаем useMemo в действии (значение pow не меняется при повторном отображении компонента). При каждом нажатии на кнопку компонент заново отображается.

В разработке react-native при создании приложения используется несколько кэшей:

React-native кэш упаковщика
Кэш эмуляторе
Папка Java side cache (.gradle) (только в android)
npm кэш (если это уместно?)

Я тоже что-то упускаю? Потому что я пытаюсь очистить кэш в react-native, чтобы иметь возможность повторить ошибку, которая возникает только при первом использовании. Но очистка этих тайников наверху не помогла. Это на android. Когда приложение строится, большинство строк не говорят UP-TO-DATE, как ожидалось, потому что я очистил кэш.

Но есть еще много строк, где печатается этот текст. Нравится:

app:preBuild UP-TO-DATE

app:preDebugBuild UP-TO-DATE

:app:preReleaseBuild UP-TO-DATE

Вопрос в том, как я могу очистить весь кэш, связанный с разработкой react-native?

Можно ли очистить файл cookie react-native webview? когда я заменяю на другой вид и обратно и снова mount webview, похоже, что файл cookie все еще существует в webview.. приветствие

Для подхода React Native инициализации (без экспы) использовать:

Очистка Кэша вашего проекта React Native:

npm < 6.0 и RN < 0.50:

npm >= 6.0 и RN >= 0.50:

Когда я использовал метод image.prefetch, я хотел очистить его дисковый кэш, но не нашел подходящего метода в React Native.

Я бегу react-native бег-ios. До сегодняшнего дня он работал нормально. Я использую react: 16.9.0, react-native: 0.61.2. Моя проблема заключается в том, что когда я перезагружаю приложение в симуляторе, оно переходит к более старой версии приложения. Однако когда я внесу изменения в код и сохраню.

Для тех, кто использует expo-cli

Самый простой(react native,npm и expo )

Для React Native

для выставки Expo

Это то, что работает для меня:

Если вы используете WebStorm , нажмите раскрывающуюся кнопку выбор конфигурации слева от кнопки выполнить и выберите Изменить конфигурации:

Дважды щелкните на Start React Native Bundler внизу в разделе Before launch :

Войдите в раздел --reset-cache - Arguments :

Вот отличная дискуссия на тему GitHub, которая мне очень помогла. Очистка Кэша вашего проекта React Native от Джаррета Мозеса

Существуют решения для 4 различных экземпляров.

RN <0.50 -
watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache

RN >=0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache

И есть обсуждение ниже по данной ссылке, так что даже если вышеперечисленные 4 случая не работают для вас, вы можете прокрутить их и найти возможное решение.

Вы можете очистить кэш в React Native >= 0.50 и npm > 5 :

Помимо очистки кэша npm вам может понадобиться сбросить симулятор или очистить сборку и т. д.

Очистка Кэша вашего проекта React Native: если вы уверены, что модуль существует, попробуйте выполнить следующие действия:

Ясные вахтенные часы: npm сторож watch-del-all
Удалить папки node_modules: РМ -РФ node_modules, в и запустить пряжа установите
Сброс кэша Metro: yarn start --reset-cache
Удалить кэш: rm -rf /tmp/metro-*

Вы пробовали gradle cleanBuildCache?

У меня была похожая проблема, я попытался очистить все возможные кэши (перепробовал почти все решения выше), и единственное, что сработало для меня, - это убить приложение expo и перезапустить его.

Компонент People

Отображая данные из API, мы передаем их в компонент с именем PeopleRenderer . Выглядит это следующим образом:

2 компонента, отображающие точно такие же (кэшированные) данные

2 компонента, отображающих разные (некэшированные) данные

Имея в виду эту вводную информацию, рассмотрим первую технику.

useEffect

Написание такого шаблонного кода вскоре может стать трудоемким процессом, поэтому такие известные библиотеки, как Lodash и Underscore, предоставляют вспомогательные функции, упрощая создание мемоизованных:

Мемоизация для получения данных

Теперь заменим хук useEffect на другой, который выглядит следующим образом:

Поскольку результат getData сохраняется, то при встраивании все компоненты получат одинаковые данные:

Компоненты используют один и тот же сохраненный Promise

Можно аннулировать (очистить) кэш мемоизованной функции, присвоив ее свойству cache нового Cache .

В качестве альтернативного варианта можно очистить существующий кэш (это экземпляр Map ).

Для большей ясности приведем пример. Сначала создаем новый контекст.

После этого обертываем компонент, отображающий компоненты People , в Provider Context.

Можно применить значение из Provider с помощью хука useContext , получая следующий результат.

getRnd (строка 2): функция, возвращающая случайное число в диапазоне 0–10000.
age (строка 4): с помощью useState сохраняет число, обозначающее возраст.
randomNumber (строка 5): сохраняет случайное число посредством useState .

Многочисленные повторные отображения, но значение pow запоминается с помощью useMemo

Однако изменение значения age повлечет за собой изменение pow , поскольку вызов useMemo зависит от значения age .

Мемоизованное значение обновляется вслед за обновлением зависимости

Заключение

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

С полным вариантом кода, представленного в статье, можно ознакомиться в репозитории на GitLab.

Читайте также:

React native очистить кэш

Данные

Компонент People

useEffect

Мемоизация

Мемоизация для получения данных

React Context

useMemo

Похожие вопросы:

Компонент People

useEffect

Мемоизация для получения данных

Заключение