Как запрашивать данные API в React только один раз и не отображать страницу при каждом посещении?

Question

Итак, на веб-сайтах с несколькими страницами, где какой из них использует внешние данные из API, каков наилучший логический способ сделать запрос только один раз, когда страница загружается в первый раз? Так, например, я go впервые перехожу на страницу О КОМПАНИИ (используя React Router), и он делает запрос Ax ios и загружает данные, затем я перехожу на ГЛАВНУЮ страницу, и когда я go вернемся к ПРОФИЛЬМ, он не загружает данные снова.

Потому что то, что я сейчас делаю, - это запрос каждый раз при загрузке страницы, а это очень неудобно для пользователя. Я делаю запросы с помощью Ax ios в методе componentDidMount. Могут ли React Hooks с Context API помочь решить эту проблему?

Я видел этот пост, но не понимаю: React rerender каждый раз при посещении страницы

Заранее спасибо, извините, если бы я не мог быть яснее!

Answer 1

Вы можете изучить кеширование - это не потребует изменений в вашем текущем коде, но только при настройке ax ios. Когда вы сделаете запрос на одни и те же данные с небольшими изменениями времени с момента последнего запроса, он будет обслуживаться из кеша, а не вызывать сервер.

Пример библиотеки, которая может позаботиться о кешировании в ax ios это ax ios -cache-adapter .

Answer 2

Использование Redux или аналогичного инструмента глобального управления состоянием (например, Context API) может быть одним из решений для этого. С Redux вы сможете сохранить данные API в глобальном состоянии, а затем в своем методе componentDidMount вы можете запустить запрос Ax ios только в том случае, если ваше соответствующее значение глобального состояния пусто.

Другое решение, связанное с Redux, - иметь вездесущий компонент макета, такой как панель навигации, который будет отвечать за запрос всех данных API. Если вы разместите свою панель навигации за пределами React Router, этот компонент не отключится, когда React Router переведет вас на другую страницу. Используя этот метод, если вы хотите загрузить соответствующие данные при первом доступе к странице, но сохранить их на протяжении оставшейся части сеанса, у вас может быть useEffect с зависимостью от useLocation().pathname (от response -router-dom), который загружает данные API, хранит их глобально и запрашивает указанные данные только в том случае, если их еще нет.

Еще одним преимуществом использования глобального управления состоянием является то, что ваш код HTTP в в большинстве случаев они будут выделены из компонента и организованы в папку «действия» определенного типа, что упростит управление всем.

Answer 3

Этого можно легко достичь с помощью компонента Link, присутствующего в пакете react-router-dom. Просто замените свои обычные теги привязки, которые вы используете для перехода между страницами, на <Link to="yourUrl" />. Таким образом, состояние не будет обновляться каждый раз, когда вы посещаете другую страницу, и останется там, если вы не закроете браузер.