使用缓存减少网络请求

---

highlight: monokai-sublime

先交待下背景，在动态表单中，客户标签数据数据来源于服务器，每次添加一项时，客户标签组件都会请求服务器获取待标签列表，当频繁添加项的时候就会频繁的发送网络请求

如何减少网络请求？普遍是思路是将获取的数据缓存到本地，待以后使用，为了保持数据的新鲜性，可以设置一个合理的“保鲜期”，当缓存过期时重新请求最新的数据。如下图

下面来写一段伪代码

function A (){
  // .... 
  // ....
  function getData(){
    //获取数据，并且设置缓存
  }
  useEffect(()=>{
    // 如果有缓存
    if(xx){
      // 判断是否过期
      // 如果过期则请求
      getData();
    }else{
      // 如果没有缓存则请求
      getData();
    }
  },[]);
}

这样一看感觉挺好，基本实现了我们想要的功能，但是有一个问题，在每个组件内都需要写一段更新缓存的代码，我们还需要将更新缓存的逻辑提取出来，首先设计一下方案，我们需要三个基础的要素