react router踩坑（一）——如何保持元件狀態keep-alive

前言

參考：
https://www.v2ex.com/amp/t/386516
http://react-china.org/t/react-react-router/3757/2

最近在學習react，其實有過mvvm框架學習經驗之後，再上手另一門框架不會太困難。
但是想要深入學習就會發現其中設計理念的不同，之前學的是vue，真的好方便，react初上手有些不習慣，習慣了jsx和es6寫法之後，那可真是爽死了，比vue的模版簡潔不少。

學習react router 4.0的時候將那些不適應放大到了極致，在RR4(react router 4.0)中，router是各種元件，對於習慣了之前vue的router.js配置檔案的我來說，感覺畫風一下子就變了。

這就是不同框架對於相同功能實現的不同理念吧，對於router元件化，這篇聊聊 React Router v4 的設計思想文章說的非常棒。

因為之前也用vue-router寫過一些單頁應用，上手RR4便馬上尋找譬如路由巢狀、獲取params、query等常用功能，看著文件也是能敲出來。

然而，如果真的那麼輕鬆，我也不會在這浪費筆墨了。

寫一個小demo的時候，想要實現類似於vue-router的keep-alive功能，突然發現，RR中沒有，對的，就是沒有。

keep-alive：包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。

假如我有以下兩種需求：

1. 有一個下拉載入更多列表頁，當列表項達到1000項，點選列表項到詳細頁，當點選返回按鈕時，保持列表頁的一千條記錄。
2. 把下拉載入更改為翻頁，假設不是通過改變URL，只是單純的ajax請求，擊列表項到詳細頁，當點選返回按鈕時，返回離開時的那一頁。

最近再做一個知乎日報的demo，介面如下：

這是最新訊息版塊：

倘若最新是10月4號的新聞，當我翻頁到10月2號，點進其中一篇文章，後退返回，發現我又回到了10月4號那一頁。

這是主題日報版塊：

倘若我選擇“開始遊戲”主題日報，當我點進其中一篇文章，後退返回，發現又回到了最初的“日常心理學”主題日報，很難受。

在vue裡面可以很輕鬆解決的問題，在react裡當然也可以解決，只不過要需要換一種方式。

方式一：

把載入頁面的必要資訊放URL裡，後退就是瀏覽器的後退，回退時元件依然會重新渲染，componentDidMount的時候根據這些url的資訊去請求API。資料保持離開時最新的狀態。

這種方法在翻頁情況下使用固然可以，但是像下拉載入那樣，是多次請求的資料集合，就無法通過這種方式解決，而且後退時依舊進行了一次http請求。

方式二：

1. 儲存當前已經載入的資料到本地（sessionStorage,localStorage）
2. 詳情回退後,從本地取出資料，進行渲染（所以componentDid內部要判斷本地是否已經存在資料，如果存在則return，不存在從伺服器獲取資料）

這種方式回退時不需要再次進行http請求，也能滿足下拉的情況，我選擇的就是這種方式。

如果還有更多的方法還望留言一同交流學習，謝謝回答過我這個問題的大佬！