摘要：所谓的时间旅行从广义上来说无非就是三个动作回到过去进入未来回到现在，这个无论是从现实还是前端技术来说都是可靠的。单从技术栈来说，时间旅行不是一门技术而是一个思想套路。
标题看起来挺新颖的，笔者都觉得很高大上是不是哈哈...
抛转时间旅行在生活中是一个非常吸引人的概念，虽然现在无法实现但说不定未来的某天就实现了！然后就穿梭会过去杀掉小时候的自己然后就开始懵逼自己是谁类似的狗血剧情...那么问题来了，我们能活到那个时候吗？这个问题咱们暂且放一下，毕竟今天不是聊科技谈科幻的啊！！！
引玉虽说生活中我们无法实现时间旅行，但是在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实现时间旅行的代码，大家有兴趣的可以看下。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98075.html
摘要：但这样做的缺点很多，不利于状态在组件之间共享。所以本篇使用作为状态管理器来实现时间旅行。并且从中可以看出过程不仅仅向对象中添加一个状态对象，还对进行了加一操作，这是为了保证状态与保持同步。 距离上一次更新已经有半个月了，这半个月来主要在忙两件事：一个是最近老板给了个自动化测试任务，另一个是和学校的弟弟一起搞一个微信小游戏...emmmm！其实主要是懒！！！ 本篇是作为上篇的续集，不知道...
摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序员应该不在少数，我也是其中之一。 为何会走向前端 非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...
摘要：六个月前，我辞掉了初级开发者的工作，并去东南亚旅行了五个月。我的目标了解更多资料我原本计划去东南亚旅行个月，我也有信心在旅行回来后能够找到一份更好的工作。申请工作我下一站旅行地是老挝境内一个偏远的攀爬区。 金三银四，谨以此文献给所有正在准备跳槽的你。 showImg(https://segmentfault.com/img/bVbhXVQ?w=640&h=640);六个月前，我辞掉了初...
摘要：的出现真可谓是前端界的福音，正与之宗旨所说，。据统计，目前世界上有的项目使用了。技术栈学习路线直到前段时间笔者的朋友给推荐了一个，真是欣喜若狂也更加坚定了自己在继续前进的想法。这是一个外国友人总结的一套技术栈学习路线，先给传送门。 我相信点进来的同学都是冲着标题来的，当然本文也不会让各位失望。不过在正式介绍标题所述的内容之前，我们不妨先放下技术，一起回顾下自己做前端技术的心路历程。 前...
摘要：首先卖个关子，下面我们一起来复习下小学还是初中的一枚数学知识。一旦更改了，会触发组件的重新渲染。为了页面渲染性能的考虑，有助于在中进行比较并确定是否重新渲染。 概念引入 对于React来说, 没有State就没有页面的渲染, 我们也将什么都看不到 咋一听怎么那么唬人？不过的确是这样，正如标题所言State是UI的灵魂。我们都知道React的核心思想之一是组件化，将页面所展示的东西按一定...
阅读 4100·2021-10-13 09:39
阅读 1695·2019-08-29 11:12
阅读 995·2019-08-28 18:16
阅读 1723·2019-08-26 12:16
阅读 1094·2019-08-26 12:13
阅读 2851·2019-08-26 10:59
阅读 2015·2019-08-23 18:27
阅读 2864·2019-08-23 18:02
