React router загружает данные каждый раз

Question

Я новичок в использовании React и React Router.

Домашняя страница (домашний компонент) загружает данные через запрос ajax на сервер, который отображает данные.

Затем люди могут перемещаться внутри приложения, используя реактивный маршрутизатор. Но когда кто-то возвращается на домашнюю страницу (домашний компонент), вызов ajax снова делается на сервер, который не нужен.

Таким образом, в основном, когда вы выполняете навигацию по компонентам с помощью реактивного маршрутизатора каждый раз, когда компонент загружается, каждый раз выполняется вызов ajax.

Есть ли что-то, что мы можем сделать, чтобы, возможно, кэшировать данные, например, в Angular, где нам не нужно снова и снова запускать вызовы ajax при загрузке компонента.

Благодаря

class NewComponent extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     data : [] 
    } 
    } 

    componentWillMount() { 
     let length = Object.keys(this.state.data).length; 

     if(length === 0){ 
     let req = new Request('https://example.com/json', { 
      mode: 'cors', 
      method: 'get' 
     }); 

     this.serverRequest = fetch(req).then(function (result) { 
      return result.json() 
     }).then(function(j){ 
      this.setState({ 
      data: j.up 
      }) 

     }.bind(this)); 

     } 
    } 

render(){ 
    return(
    some html 
    ) 
} 

Answer 1

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

Если это более крупный проект, вы можете рассмотреть возможность использования системы управления государством наряду с реакцией, например redux.

Еще одна идея - перенести ваши функции ajax в их собственный модуль, который импортируется в ваш компонент. Затем вы можете разместить некоторое кеширование в своем модуле ajax, вдали от вашего компонента.