大家在网购或者寄快递时，应该都有碰到地址选择栏，也就是选择省市区。
我在开发一个国外快递官网的时候也遇到了这个需求，在这个项目中，由于国外业务刚展开，并不是所有区域都可选的，需要人工维护这份数据（时常会改动），所以地址信息是由后端维护的，当前端页面遇到需输入地址的地方，就向后端发起地址数据的请求。在这，我记录一下优化这个功能的思路。
1. 前期：分散开发时的阶段
项目从0开始由多人协同开发，涉及到地址选择的地方挺多（下单、运费查询、站点查询、收件人信息、寄件人信息等），在不同的页面，地址选择的样式及交互是不一样的：比如下单页面要求地址是省-市-区按顺序来选，而运费查询则直接就是“省-市-区”拼接成一个字段来进行选择，也是由不同的人各自开发，所以比较杂乱。
在这个阶段，大家的处理方式是在React生命周期函数componentDidMount()中获取地址数据，然后各自预处理，等处理完后才展示页面。
这样做的缺陷：因为地址数据还是比较大的（地址名，对应的id、code、类别等，原始数据800多KB，压缩后在网络上传输的数据量也达到100多KB），在异步请求的过程中，受网络连接及网速的影响，该请求花的时间较长，阻塞了页面的渲染，所以白屏时间也偏长，影响用户体验。前期开发任务紧张，大家在测试环境自测还OK，没啥时间管这个了，功能先实现再说，所以这个缺陷就暂时放着了。
2.中期：统一的阶段
中期阶段，上线后，根据业务反馈，地址选取功能的需求改变了：全站使用统一的方式来进行选择。
该需求分到我这了，我改变了大家前期分散的处理方式，抽象出一个地址选择组件供各个页面调用。数据相关的处理从分散在页面中变成了统一放到组件中处理，这样代码逻辑更清晰了，代码量也精简了很多。数据的异步请求也不放在各个页面的componentDidMount()生命周期函数中处理，而是放在地址选择组件中处理，在用户点击地址选择组件时再发起请求，这样就避免了多余的网络连接，也不会阻塞主页面的渲染，减少了白屏时间。
缺陷：每次点击地址选择组件时，都会发起数据请求，增加了请求数。
3. 后期：单次访问只发起1次请求
中期阶段的处理方式，马马虎虎，算是进行了优化，但不完美。考虑到每次点击组件都会重新请求数据，心里总有疙瘩：短时间内的数据是不变的，同样的数据我为啥要请求多次？
我也考虑过使用本地储存将数据保存在本地，但这样我又不能保证数据是最新的，要保证最新的话，还得后端加字段进行校验。这该怎么办？疙瘩挥之不去…如何仅仅依靠前端自己就能减少请求数并且保证数据是最新的？
要减少请求数，必然是要用到本地存储的，然而当初我只想到了localStorage（不了解的查考这，localStorage中的数据可以长期保留），因为用的比较多，怪我太愚笨，其实可以用sessionStorage（不了解的查考这，sessionStorage中存储的数据在页面会话结束时会被清除）啊！
较完美的解决方法：在用户访问官网的过程中，第一次点击地址选择组件时，发起地址请求并将数据保存在sessionStorage，接下来用户再次点击地址选择组件时，就可以直接从sessionStorage中获取数据了！这样就把用户在一次访问官网的过程中，地址数据的请求只发生1次，当用户关掉页面下次再访问，又会重新发起1次请求，保证数据是最新的，而且这样的处理不需要后端进行任何调整，算是比较完美的解决方式了！
这种处理方式同样适用于需要向后端请求相对静态（相对端的时间内不做修改）并且前端频繁用到的数据的情形。
心里的疙瘩放下了…
PS:大家若有更好的处理方法，欢迎探讨交流~
