資訊專欄INFORMATION COLUMN
摘要：所謂的時間旅行從廣義上來說無非就是三個動作回到過去進入未來回到現在，這個無論是從現實還是前端技術來說都是可靠的。單從技術棧來說，時間旅行不是一門技術而是一個思想套路。
標題看起來挺新穎的，筆者都覺得很高大上是不是哈哈...
拋轉時間旅行在生活中是一個非常吸引人的概念，雖然現在無法實現但說不定未來的某天就實現了！然后就穿梭會過去殺掉小時候的自己然后就開始懵逼自己是誰類似的狗血劇情...那么問題來了，我們能活到那個時候嗎？這個問題咱們暫且放一下，畢竟今天不是聊科技談科幻的啊！！！
引玉雖說生活中我們無法實現時間旅行，但是在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實現時間旅行的代碼，大家有興趣的可以看下。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98075.html
摘要：但這樣做的缺點很多，不利于狀態在組件之間共享。所以本篇使用作為狀態管理器來實現時間旅行。并且從中可以看出過程不僅僅向對象中添加一個狀態對象，還對進行了加一操作，這是為了保證狀態與保持同步。 距離上一次更新已經有半個月了，這半個月來主要在忙兩件事：一個是最近老板給了個自動化測試任務，另一個是和學校的弟弟一起搞一個微信小游戲...emmmm！其實主要是懶！！！ 本篇是作為上篇的續集，不知道...
摘要：半路出家的前端程序員應該不在少數，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序員應該不在少數，我也是其中之一。 為何會走向前端 非計算機專業的我，畢業之后，就職于一家電力行業公司，做過設備調試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...
摘要：六個月前，我辭掉了初級開發者的工作，并去東南亞旅行了五個月。我的目標了解更多資料我原本計劃去東南亞旅行個月，我也有信心在旅行回來后能夠找到一份更好的工作。申請工作我下一站旅行地是老撾境內一個偏遠的攀爬區。 金三銀四，謹以此文獻給所有正在準備跳槽的你。 showImg(https://segmentfault.com/img/bVbhXVQ?w=640&h=640);六個月前，我辭掉了初...
摘要：的出現真可謂是前端界的福音，正與之宗旨所說，。據統計，目前世界上有的項目使用了。技術棧學習路線直到前段時間筆者的朋友給推薦了一個，真是欣喜若狂也更加堅定了自己在繼續前進的想法。這是一個外國友人總結的一套技術棧學習路線，先給傳送門。 我相信點進來的同學都是沖著標題來的，當然本文也不會讓各位失望。不過在正式介紹標題所述的內容之前，我們不妨先放下技術，一起回顧下自己做前端技術的心路歷程。 前...
摘要：首先賣個關子，下面我們一起來復習下小學還是初中的一枚數學知識。一旦更改了，會觸發組件的重新渲染。為了頁面渲染性能的考慮，有助于在中進行比較并確定是否重新渲染。 概念引入 對于React來說, 沒有State就沒有頁面的渲染, 我們也將什么都看不到 咋一聽怎么那么唬人？不過的確是這樣，正如標題所言State是UI的靈魂。我們都知道React的核心思想之一是組件化，將頁面所展示的東西按一定...
閱讀 4822·2021-10-13 09:39
閱讀 1962·2019-08-29 11:12
閱讀 1154·2019-08-28 18:16
閱讀 1866·2019-08-26 12:16
閱讀 1254·2019-08-26 12:13
閱讀 3000·2019-08-26 10:59
閱讀 2308·2019-08-23 18:27
閱讀 2998·2019-08-23 18:02
