大家在網購或者寄快遞時，應該都有碰到地址選擇欄，也就是選擇省市區。
我在開發一個國外快遞官網的時候也遇到了這個需求，在這個項目中，由於國外業務剛展開，並不是所有區域都可選的，需要人工維護這份數據（時常會改動），所以地址信息是由後端維護的，當前端頁面遇到需輸入地址的地方，就向後端發起地址數據的請求。在這，我記錄一下優化這個功能的思路。
1. 前期：分散開發時的階段
項目從0開始由多人協同開發，涉及到地址選擇的地方挺多（下單、運費查詢、站點查詢、收件人信息、寄件人信息等），在不同的頁面，地址選擇的樣式及交互是不一樣的：比如下單頁面要求地址是省-市-區按順序來選，而運費查詢則直接就是“省-市-區”拼接成一個字段來進行選擇，也是由不同的人各自開發，所以比較雜亂。
在這個階段，大家的處理方式是在React生命週期函數componentDidMount()中獲取地址數據，然後各自預處理，等處理完後才展示頁面。
這樣做的缺陷：因爲地址數據還是比較大的（地址名，對應的id、code、類別等，原始數據800多KB，壓縮後在網絡上傳輸的數據量也達到100多KB），在異步請求的過程中，受網絡連接及網速的影響，該請求花的時間較長，阻塞了頁面的渲染，所以白屏時間也偏長，影響用戶體驗。前期開發任務緊張，大家在測試環境自測還OK，沒啥時間管這個了，功能先實現再說，所以這個缺陷就暫時放着了。
2.中期：統一的階段
中期階段，上線後，根據業務反饋，地址選取功能的需求改變了：全站使用統一的方式來進行選擇。
該需求分到我這了，我改變了大家前期分散的處理方式，抽象出一個地址選擇組件供各個頁面調用。數據相關的處理從分散在頁面中變成了統一放到組件中處理，這樣代碼邏輯更清晰了，代碼量也精簡了很多。數據的異步請求也不放在各個頁面的componentDidMount()生命週期函數中處理，而是放在地址選擇組件中處理，在用戶點擊地址選擇組件時再發起請求，這樣就避免了多餘的網絡連接，也不會阻塞主頁面的渲染，減少了白屏時間。
缺陷：每次點擊地址選擇組件時，都會發起數據請求，增加了請求數。
3. 後期：單次訪問只發起1次請求
中期階段的處理方式，馬馬虎虎，算是進行了優化，但不完美。考慮到每次點擊組件都會重新請求數據，心裏總有疙瘩：短時間內的數據是不變的，同樣的數據我爲啥要請求多次？
我也考慮過使用本地儲存將數據保存在本地，但這樣我又不能保證數據是最新的，要保證最新的話，還得後端加字段進行校驗。這該怎麼辦？疙瘩揮之不去…如何僅僅依靠前端自己就能減少請求數並且保證數據是最新的？
要減少請求數，必然是要用到本地存儲的，然而當初我只想到了localStorage（不瞭解的查考這，localStorage中的數據可以長期保留），因爲用的比較多，怪我太愚笨，其實可以用sessionStorage（不瞭解的查考這，sessionStorage中存儲的數據在頁面會話結束時會被清除）啊！
較完美的解決方法：在用戶訪問官網的過程中，第一次點擊地址選擇組件時，發起地址請求並將數據保存在sessionStorage，接下來用戶再次點擊地址選擇組件時，就可以直接從sessionStorage中獲取數據了！這樣就把用戶在一次訪問官網的過程中，地址數據的請求只發生1次，當用戶關掉頁面下次再訪問，又會重新發起1次請求，保證數據是最新的，而且這樣的處理不需要後端進行任何調整，算是比較完美的解決方式了！
心裏的疙瘩放下了…
PS:大家若有更好的處理方法，歡迎探討交流~