前端框架基于React开发一个井字棋（4）并支持保存游戏历史

以下为最后一个训练环节，我们将通过特定途径达成“回到过去”的效果，使游戏能够回溯至先前的历史操作步骤。

历史记录保存机制

若直接对 square 数组进行修改，将使实现时间旅行的功能变得极为复杂。

然而，我们可以通过 slice() 函数为每一步生成 squares 数组的副本，并将该数组视为不可更改的对象。这样一来，所有 squares 数组的历史状态均可被完整保留，从而允许我们在任意历史步骤之间自由切换。

我们将 squares 数组的历史版本存储于一个名为 history 的数组中。该 history 数组记录了从初始步骤至最终步骤的所有棋盘状态。history 数组的结构如下所示：

    history = [
      // 第一步之前
      {
    squares: [
      null, null, null,
      null, null, null,
      null, null, null,
    ]
      },
      // 第一步之后
      {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, null,
    ]
      },
      // 第二步之后
      {