如何在React应用程序中正确加载和使用API​​？

Question

我的服务器上存在一些性能问题。这是我的根App组件的容器。每当用户访问我的网站主页时都会调用此容器，这意味着每次有人访问我的网站时，系统都会不断请求API。

但是，我认为这需要占用服务器大量内存。我最近开始在带React js的Django REST Framework中使用REST API。每次我请求API时，我应该做些什么还是将它们存储在某个地方，以便当它们再次返回主页时不需要再次请求？

container.js

class Container extends Component {
  state = {};

  componentDidMount() {
    this._getStores();
    this._getImages();
  }

  _getStores = async () => {
    const stores = await this._callStoreApi();
    this.setState({
      stores
    });
  };

  _callStoreApi = () => {
    return fetch("/boutiques/stores/")
      .then(response => response.json())
      .then(json => json)
      .catch(e => console.log(e));
  };

  _getImages = async () => {
    const randomImages = await this._callImageApi();
    this.setState({
      randomImages
    });
  };

  _callImageApi = () => {
    return fetch("/boutiques/random-feed-images/")
      .then(response => response.json())
      .then(json => json)
      .catch(e => console.log(e));
  };

  render() {
    const { stores, randomImages } = this.state;

    return (
      <DocumentMeta {...head}>
        <div>
          {stores && randomImages ? (
            <App {...this.props} stores={stores} randomImages={randomImages} />
          ) : (
            <Loader />
          )}
        </div>
      </DocumentMeta>
    );
  }
}

export default Container;

Answer 1

最好实现某种类型的数据缓存。您可以编写以下服务来随时缓存数据。

  

注意：以下代码仅供参考，可能需要很多   在投入生产之前进行了改进。

APIService.js：

let cache = {};
class APIService {
  fetch(url, options = {}) {
    let cacheStatus = this.cacheStatus;
    this.cacheStatus = false;
    let cacheKey = url + JSON.stringify(options);
    if (cacheStatus && cache[cacheKey]){
      return new Promise((resolve, reject) => resolve(cache[cacheKey]));
    }

    return fetch(url, options)
      .then(response => response.json())
      .then(response => {
        if (cacheStatus) {
          cache[cacheKey] = response;
        }
        return response;
      });
  }

  cache(status) {
    this.cacheStatus = status;
    return this;
  }
}

const API = new APIService();
export default API;

然后您可以将其导入所需的位置：

import API from "./APIService.js";

并尝试如下调用api：

await API.cache(true).fetch('https://jsonplaceholder.typicode.com/todos/1');
await API.cache(true).fetch('https://jsonplaceholder.typicode.com/todos/1');
await API.cache(true).fetch('https://jsonplaceholder.typicode.com/todos/1');

您可以看到它只会调用一次api。如果您不想缓存，请照常调用该api。

因此，想法是将数据缓存保留在浏览器内存中，并在需要时从缓存中将其返回。但是如果页面被重新加载，它将获取新数据。

您可以从代码中获得想法。

我使用codesandbox.io编写了代码。您可以在以下链接上查看代码：

https://codesandbox.io/s/rrwv7xxj3n