React井字棋教程进阶完整版（附完整源代码）

React井字棋教程进阶完整版（附完整源代码）

一、基本功能实现

注：以下为基本教程包含功能

1. 显示下一个棋手/轮流落子

   

2. 显示赢家棋手

   

3. 显示历史记录

   

4. 历史记录回退

   

二、进阶功能实现

注：此为教程之外实现的进阶功能

1. 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)

   

2. 在历史记录列表中加粗显示当前选择的项目

   加粗样式更改为切换背景颜色

   

3. 使用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode）

   

4. 添加一个可以升序或降序显示历史记录的按钮

   

5. 每当有人获胜时，高亮显示连成一线的 3 颗棋子

6. 获胜3秒后，自动初始化重开棋局

   

7. 当无人获胜时，显示一个平局的消息

   显示平局信息3秒后，自动初始化重开棋局

   

三、技术难点

1. 历史记录的升降序

   因为历史记录涉及操作和逻辑较多，加入升降序以后需要判断状态。

   1. 首先是翻转历史记录数组，这步较为简单，只是一开始判断显示start历史记录时，利用的是索引值。导致翻转之后start历史记录仍在第一位，而不是最后一位。后续给每个历史记录对象添加id属性，并且将id属性绑定为组件的key值。

      

   2. 然后是选中历史记录的高亮显示，因为之前记录步骤的stepNumber变量仅赋值为数组最后一位，加入升降序需要修改逻辑。在升降序的按钮类名中写入三元表达式，判断当前历史记录按钮组件id是否和记录步骤的stepNumber变量相等，相等则意味着该历史记录按钮被选中，使用选中class样式。

      

   3. 接下里是确保历史记录可以正确跳转，点击历史记录将原先传递的组件索引值替换为id值，这样可以确保正确的找到需要跳转的历史记录。

      因为跳转历史记录之后的第一次点击棋盘格，会把该历史记录之后的记录清除并且重新记录，所以这时会根据排序类型去分割出需要保留的历史记录数组。然后也需要找到当前跳转到的记录，因为数组已经分割好，所以只需要判断排序类型就可以简单获取到当前的记录。

      

   4. 最后是跳转记录后第一次下棋可以正确的记录。因为排序不同，新记录的插入位置也不同，id也需要正确记录。

      

四、源代码地址

github：https://github.com/iamshrood/React-Tic-Tac-Toe