[ 一块儿学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实现时间旅行的代码，你们有兴趣的能够看下。