[ 一塊兒學React系列 -- 6 ] 祕術之時間旅行-1

標題看起來挺新穎的，筆者都以爲很高大上是否是哈哈...

拋轉

時間旅行在生活中是一個很是吸引人的概念，雖然如今沒法實現但說不定將來的某天就實現了！而後就穿梭會過去殺掉小時候的本身而後就開始懵逼本身是誰相似的狗血劇情...那麼問題來了，咱們能活到那個時候嗎？這個問題我們暫且放一下，畢竟今天不是聊科技談科幻的啊！！！

引玉

雖然說生活中咱們沒法實現時間旅行，可是在React世界中咱們卻能夠垂手可得得實現時間旅行，固然也不只僅限於React，全部存在狀態的組件均可以實現時間旅行。說了那麼多時間旅行，那麼時間旅行究竟是什麼東西？本篇以React爲例，不討論其餘框架。所謂的時間旅行從廣義上來講無非就是三個動做：回到過去、進入將來、回到如今，這個不管是從現實仍是前端技術來講都是可靠的。對於React某個組件來講，咱們可讓它退回到過去的某個點或者回到最新的狀態，這就是時間旅行的基本表現形式。單從React技術棧來講，時間旅行不是一門技術而是一個思想套路。爲何說是一個思想套路？咱們繼續說...

鋪墊

看我筆者前面關於State的博文的朋友都知道，React組件是具備狀態(State)的，並且組件的具體表現形式(也就是組件的UI)也是狀態所決定的，一旦狀態發生改變那麼組件的表現也會發生相應變更，由於State是組件改變的惟一依據。那麼咱們是否會獲得一個啓示？假使咱們將組件的某個State在不一樣時間的值記錄下來保存在某個地方，在合適的時機拿出不一樣的值賦值給相應的State，那麼組件不就能夠隨之改變從而實現所謂的時間旅行了嗎！！！沒錯，實際上時間旅行就是基於這個思路被開發出來的思想套路。

縱深

這個概念最先是在Redux架構中提出的，基於組件State中值的不可變性，經過對狀態的管理實現某個組件的狀態切換。固然本文不直接跳到Redux上去說時間旅行，咱們暫用最簡單的State來實現組件的時間旅行。全部狀態的切換、保存、從新渲染都在一個組件中進行，爲了方便你們能看明白，筆者構思了一張圖和寫了一個例子，代碼會在文章末尾呈上，雖然說是一個簡單的例子可是對於第一次接觸這個概念的朋友來講確定是一個優秀的能夠用來理解的例子。
不過先前筆者在查閱資料的過程當中發現Redux文章有相關的介紹，雖然沒有直接說是時間旅行可是實現上大同小異。文檔中用三個變量來實現相關功能：

const initialState = {
  past: [],
  present: null,
  future: []
}

顧名思義：
past用來存儲相對於當前的過去的狀態;
present用來存儲當前的狀態；
future用來存儲相對於當前的將來的狀態。

假如咱們點擊 Undo(撤銷)的時候先present值存到future中再將past中最後一個狀態對象取出來賦值給present，這樣就實現了文檔中撤銷的功能；假如咱們點擊 Redo(返回)的時候先present值存到past中再將future中最後一個狀態對象取出來賦值給present，這樣就實現了文檔中返回的功能；如此來看，本質上仍是狀態的管理。

另闢蹊徑

什麼叫另闢蹊徑？筆者看完文檔後如有所思，是否是有必要用三個變量來實現這個功能？頻繁得處理數組和賦值會不會太過麻煩？因而筆者在思考以後以爲徹底可使用兩個變量就能夠實現一樣的功能：

archive = [];
currentIndex = 0;

archive變量來存儲每一個時刻的狀態
currentIndex變量用來記錄當前狀態是archive中的那個狀態對象

警告：這種實現方式沒有在項目中實際使用過，只是停留在筆者的例子中，因此筆者不能徹底保證能經受住項目的真實考驗！

我們繼續說！
筆者以爲這樣實現的方式能夠相對簡潔：每次咱們改變組件某個狀態的時候同時將該狀態存儲在archive變量中，同時currentIndex+1；假如咱們點擊了Undo或者Redo,咱們只要對currentIndex進行減一或者加一就能知道須要的狀態在archive變量的哪一個位置，繼而拿出來賦值給State變量不就能夠實現組件UI的從新渲染了嗎！！！筆者也對此花了一個手稿圖，雖簡陋但不失優雅(emmmm....吐)

實例展現

筆者根據本身的思路寫出了對應的例子，因爲代碼不算複雜因此就不必在這裏作代碼分析了，相信你們都能看得懂，因此筆者就把項目代碼放在這供你們學習參考，固然項目中也包含了下一篇所要說的基於Redux實現時間旅行的代碼，你們有興趣的能夠看下。