React学习笔记--Tic Tac Toe例程填坑

React学习笔记

三 Tic Tac Toe例程填坑

  React开发环境搭建好后，就是对React自己进行学习了，React官方的Tic Tac Toe是一个不错的练手样例。本人按照官方样例一步一步的进行开发，前面进行的都还算顺利，但是当进行到Implementing Time Travel章节后，发现按照样例实现的代码存在问题。
  主要表现为如下问题：

• 返回历史步骤后，步骤列表没有减小；
• 返回历史步骤后，继续下棋的过程当中棋盘会将历史步骤中的棋子再次渲染出来；
• 屡次返回历史步骤后，点击棋盘没有反应；

  经过研究源程序我发现问题出在了jumpTo函数上。原来的函数以下，每次跳转到历史步骤时，没有对state中的history数组进行修正，致使后续的操做产生了混乱。

jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext: (step % 2) === 0,
        });
}

  通过修正后，jumpTop函数以下，上述问题既不会产生了。

jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext: (step % 2) === 0,
            history: this.state.history.slice(0, step + 1),
        });
}

  可能本人的程序是其余地方有问题，致使按照例程开发出来的游戏没有预期的表现，请园友多多指正。