[ 一起學(xué)React系列 -- 6 ] 秘術(shù)之時(shí)間旅行-1

付倫發(fā)布于2019-08-23 12:11 / 2166人閱讀

摘要：所謂的時(shí)間旅行從廣義上來(lái)說(shuō)無(wú)非就是三個(gè)動(dòng)作回到過(guò)去進(jìn)入未來(lái)回到現(xiàn)在，這個(gè)無(wú)論是從現(xiàn)實(shí)還是前端技術(shù)來(lái)說(shuō)都是可靠的。單從技術(shù)棧來(lái)說(shuō)，時(shí)間旅行不是一門(mén)技術(shù)而是一個(gè)思想套路。

標(biāo)題看起來(lái)挺新穎的，筆者都覺(jué)得很高大上是不是哈哈...

拋轉(zhuǎn)

時(shí)間旅行在生活中是一個(gè)非常吸引人的概念，雖然現(xiàn)在無(wú)法實(shí)現(xiàn)但說(shuō)不定未來(lái)的某天就實(shí)現(xiàn)了！然后就穿梭會(huì)過(guò)去殺掉小時(shí)候的自己然后就開(kāi)始懵逼自己是誰(shuí)類似的狗血?jiǎng)∏?..那么問(wèn)題來(lái)了，我們能活到那個(gè)時(shí)候嗎？這個(gè)問(wèn)題咱們暫且放一下，畢竟今天不是聊科技談科幻的?。。?！

引玉

雖說(shuō)生活中我們無(wú)法實(shí)現(xiàn)時(shí)間旅行，但是在React世界中我們卻可以輕而易舉得實(shí)現(xiàn)時(shí)間旅行，當(dāng)然也不僅僅限于React，所有存在狀態(tài)的組件都可以實(shí)現(xiàn)時(shí)間旅行。說(shuō)了那么多時(shí)間旅行，那么時(shí)間旅行到底是什么東西？本篇以React為例，不討論其他框架。所謂的時(shí)間旅行從廣義上來(lái)說(shuō)無(wú)非就是三個(gè)動(dòng)作：回到過(guò)去、進(jìn)入未來(lái)、回到現(xiàn)在，這個(gè)無(wú)論是從現(xiàn)實(shí)還是前端技術(shù)來(lái)說(shuō)都是可靠的。對(duì)于React某個(gè)組件來(lái)說(shuō)，我們可以讓它退回到過(guò)去的某個(gè)點(diǎn)或者回到最新的狀態(tài)，這就是時(shí)間旅行的基本表現(xiàn)形式。單從React技術(shù)棧來(lái)說(shuō)，時(shí)間旅行不是一門(mén)技術(shù)而是一個(gè)思想套路。為什么說(shuō)是一個(gè)思想套路？我們繼續(xù)說(shuō)...

鋪墊

看我筆者前面關(guān)于State的博文的朋友都知道，React組件是具有狀態(tài)(State)的，而且組件的具體表現(xiàn)形式(也就是組件的UI)也是狀態(tài)所決定的，一旦狀態(tài)發(fā)生改變那么組件的表現(xiàn)也會(huì)發(fā)生相應(yīng)變動(dòng)，因?yàn)?b>State是組件改變的唯一依據(jù)。那么我們是否會(huì)得到一個(gè)啟示？假使我們將組件的某個(gè)State在不同時(shí)間的值記錄下來(lái)保存在某個(gè)地方，在合適的時(shí)機(jī)拿出不同的值賦值給相應(yīng)的State，那么組件不就可以隨之改變從而實(shí)現(xiàn)所謂的時(shí)間旅行了嗎！??！沒(méi)錯(cuò)，實(shí)際上時(shí)間旅行就是基于這個(gè)思路被開(kāi)發(fā)出來(lái)的思想套路。

縱深

這個(gè)概念最早是在Redux架構(gòu)中提出的，基于組件State中值的不可變性，通過(guò)對(duì)狀態(tài)的管理實(shí)現(xiàn)某個(gè)組件的狀態(tài)切換。當(dāng)然本文不直接跳到Redux上去說(shuō)時(shí)間旅行，我們暫用最簡(jiǎn)單的State來(lái)實(shí)現(xiàn)組件的時(shí)間旅行。所有狀態(tài)的切換、保存、重新渲染都在一個(gè)組件中進(jìn)行，為了方便大家能看明白，筆者構(gòu)思了一張圖和寫(xiě)了一個(gè)例子，代碼會(huì)在文章末尾呈上，雖說(shuō)是一個(gè)簡(jiǎn)單的例子但是對(duì)于第一次接觸這個(gè)概念的朋友來(lái)說(shuō)肯定是一個(gè)優(yōu)秀的可以用來(lái)理解的例子。
不過(guò)先前筆者在查閱資料的過(guò)程中發(fā)現(xiàn)Redux文章有相關(guān)的介紹，雖然沒(méi)有直接說(shuō)是時(shí)間旅行但是實(shí)現(xiàn)上大同小異。文檔中用三個(gè)變量來(lái)實(shí)現(xiàn)相關(guān)功能：

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

顧名思義：
past用來(lái)存儲(chǔ)相對(duì)于當(dāng)前的過(guò)去的狀態(tài);
present用來(lái)存儲(chǔ)當(dāng)前的狀態(tài)；
future用來(lái)存儲(chǔ)相對(duì)于當(dāng)前的未來(lái)的狀態(tài)。

假如我們點(diǎn)擊 Undo(撤銷)的時(shí)候先present值存到future中再將past中最后一個(gè)狀態(tài)對(duì)象取出來(lái)賦值給present，這樣就實(shí)現(xiàn)了文檔中撤銷的功能；假如我們點(diǎn)擊 Redo(返回)的時(shí)候先present值存到past中再將future中最后一個(gè)狀態(tài)對(duì)象取出來(lái)賦值給present，這樣就實(shí)現(xiàn)了文檔中返回的功能；如此來(lái)看，本質(zhì)上還是狀態(tài)的管理。

另辟蹊徑

什么叫另辟蹊徑？筆者看完文檔后若有所思，是不是有必要用三個(gè)變量來(lái)實(shí)現(xiàn)這個(gè)功能？頻繁得處理數(shù)組和賦值會(huì)不會(huì)太過(guò)麻煩？于是筆者在思考之后覺(jué)得完全可以使用兩個(gè)變量就可以實(shí)現(xiàn)同樣的功能：

archive = [];
currentIndex = 0;

archive變量來(lái)存儲(chǔ)每個(gè)時(shí)刻的狀態(tài)
currentIndex變量用來(lái)記錄當(dāng)前狀態(tài)是archive中的那個(gè)狀態(tài)對(duì)象

警告：這種實(shí)現(xiàn)方式?jīng)]有在項(xiàng)目中實(shí)際使用過(guò)，只是停留在筆者的例子中，所以筆者不能完全保證能經(jīng)受住項(xiàng)目的真實(shí)考驗(yàn)！

咱們繼續(xù)說(shuō)！
筆者覺(jué)得這樣實(shí)現(xiàn)的方式可以相對(duì)簡(jiǎn)潔：每次我們改變組件某個(gè)狀態(tài)的時(shí)候同時(shí)將該狀態(tài)存儲(chǔ)在archive變量中，同時(shí)currentIndex+1；假如我們點(diǎn)擊了Undo或者Redo,我們只要對(duì)currentIndex進(jìn)行減一或者加一就能知道需要的狀態(tài)在archive變量的哪個(gè)位置，繼而拿出來(lái)賦值給State變量不就可以實(shí)現(xiàn)組件UI的重新渲染了嗎?。?！筆者也對(duì)此花了一個(gè)手稿圖，雖簡(jiǎn)陋但不失優(yōu)雅(emmmm....吐)

實(shí)例展示

筆者根據(jù)自己的思路寫(xiě)出了對(duì)應(yīng)的例子，由于代碼不算復(fù)雜所以就沒(méi)必要在這里做代碼分析了，相信大家都能看得懂，所以筆者就把項(xiàng)目代碼放在這供大家學(xué)習(xí)參考，當(dāng)然項(xiàng)目中也包含了下一篇所要說(shuō)的基于Redux實(shí)現(xiàn)時(shí)間旅行的代碼，大家有興趣的可以看下。