本文旨在描述，react官方文档描述的井字游戏在不参照官方方法的情况下实现各种功能，以便起到锻炼react基本语法的目的。

具体实现方案

代码将使用的是 Ant Design 模板。 执行 yarn create react-app antd-demo --template typescript来创建项目。

/* eslint-disable @typescript-eslint/no-unused-vars */
// @ts-nocheck
/** App.tsx */
import { FC, useState } from 'react'
import { Button, message } from 'antd'
import './app.css'

// 棋盘
const ChessBoard:FC = ({chessBoardData, chessData, changeDrop}) => <div className='chess-board'>
  {
    chessBoardData.map((board, index) => <div className='rect-item' key={index} onClick={() => {changeDrop(index)}}>
      { chessData[index].label }
      <span className='tip-text'>#{index}</span>
    </div>)
  }
</div>


const LogList:FC = ({list, handleChangeLog}) => {

  return <div className='log-list'>
    <div className='log-item'><Button size='small' onClick={() => handleChangeLog(-1)}>Restart the Game !!!</Button></div>
    {
      list.length > 0 && list.map((log,index) => {
        return <div key={index + '-log-item'} className='log-item'>{index + 1}. <Button size='small' onClick={() => handleChangeLog(index)}>Player {log.label} #{log.idx}</Button></div>
      })
    }
  </div>
}

const MockData = {
  label: '',
  value: '',
  idx: 0
}

const Custom:FC = () => {

  const [chessBoardFill, setChessBoardFill] = useState(new Array(9).fill({...MockData}))
  const [chessData, setChessData] = useState(new Array(9).fill({...MockData}))
  const [currPlayer, setCurrPlayer] = useState('X')
  const [logList, setLogList] = useState([])
  const [winner, setWinner] = useState('')
  const [backIdx, setBackIdx] = useState(-1) // 每次changDrop前要判断是否回退后的再次Drop

  const changeDrop = (idx:number) => {
    if (!chessData[idx].value && !winner) {
      // 如果idx位置的value不存在
      const tmpChessData = [...chessData]
      tmpChessData[idx] = {label: currPlayer, value: currPlayer, idx: idx}
      setChessData(tmpChessData)

      /**
       * 每次操作要进行记录放入Logs中使用
       * ! 如果不是回退操作后再次进入的操作，则可以直接把数据push进入数组。
       * ! 如果是回退后再次进入的操作，则需要清除回退位置之后的记录。
       */
      const tmpLogList = [...logList]
      if (backIdx > 0) {
        tmpLogList.splice(backIdx + 1) // 再次落棋子是要清除backIdx位置之后的数据记录
        setBackIdx(-1) // 重置回退状态
      }
      tmpLogList.push(tmpChessData[idx])
      setLogList(tmpLogList)
      // 判断是否有玩家达到胜利的条件
      computedWinner(tmpChessData, tmpLogList)
      // 更改当前玩家
      setCurrPlayer(currPlayer === 'X' ? 'O' : 'X')
    } else {
      winner !== '' ? message.error(`Player ${winner} is winner, game over!!`) : message.error('当前位置已被占领!!')
    }
  }

  const handleChangeLog = (index:number) => {
    /**
     * 根据index判断要切回步骤位置
     * 更新格子数据填充
     * 计算退回的当前步骤应该是哪个玩家进行下一步
     * restart game 清空所有数据
     * log内容保持不变
     */
    if (index < 0) {
      setChessData(new Array(9).fill({...MockData}))
      setLogList([])
      setWinner('')
      setCurrPlayer('X')
      return
    }
    /**
     * 1. 计算点击log-item后还应该渲染哪些格子tmpRender
     * 2. 重新初始化chessData.
     * 3. 然后用tmpRender去匹配chessData的位置，把logList对应idx的值填入chessData对应的位置上。
     */
    const tmpRender = logList.slice(0, index + 1)
    const tmpChessData = new Array(9).fill({...MockData})
    tmpRender.forEach((render, index) => {
      tmpChessData[render.idx] = {...render}
    })
    setChessData(tmpChessData)
    /**
     * 判断是否有存在满足胜利条件
     * 如果点击的是log-item的最后一项，棋盘数据没有更新，无需更新winner状态
     * 如果点击的不是最后一项，肯定不满足了胜利条件，修改winner状态
     */
    /**
     * 计算下一步玩家
     * 根据当前点击log-item的数据计算下一步玩家
     * 如果index>8超出边界,既是9个格子全部填满了不在再更新玩家了
     */
    /**
     * 计算是否有回退操作
     * 如果点击的是log-item的最后一条数据，则无回退
     * 如果点击的不是log-item的最后一条，则是回退操作，需要记录
     */
    if (index < logList.length - 1) {
      setWinner('')
      setCurrPlayer(logList[index+1].value)
      setBackIdx(index)
    }
  }

  const computedWinner = (chessData, logData) => {
    /**
     * 判断是否有玩家达到了胜利的条件
     * 有横竖或斜线达到三个子能练成一条线不管顺序只要结果能练成一条线即为达到胜利的条件。
     * 用格子的index记录达到胜利条件的集合（参考了官方文档）
     * ! 优化条件，必须满足至少下了5颗子才有可能会出现达成胜利条件。
     */
    let isWinner = false
    if (logData && logData.length >= 5) { 
      const getWinnerRuleList = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // 横着三条
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // 竖着三条
        [0, 4, 8], [2, 4, 6] // 斜线二条
      ]
      for(let i = 0; i < getWinnerRuleList.length; i++) {
        const [a, b, c] = getWinnerRuleList[i]
        if (chessData[a].value && chessData[b].value && chessData[c].value && chessData[a].value === chessData[b].value && chessData[a].value === chessData[c].value) {
          message.success(`Player ${chessData[a].label} is Winner !!`)
          isWinner = true
          setWinner(chessData[a].value)
        }
      }
    }
    // 填满了格子还没有分出胜负--和棋
    if (logData.length === chessBoardFill.length && !isWinner) {
      message.info('未分出胜负，和棋!!! 请重新开始游戏！')
    }
  }

  return <div className='cus-page'>
    <div className='row-item'>
      <div className='next-player-tip'>下一步玩家： { currPlayer }</div>
      <ChessBoard chessBoardData={chessBoardFill} chessData={chessData} changeDrop={changeDrop} />
    </div>
    <div className='row-item'>
      <LogList list={logList} handleChangeLog={handleChangeLog} />
    </div>
  </div>
}

export default Custom

/** app.css */

.cus-page {
  width: 600px;
  height: 400px;
  margin: 40px auto;
  border: 1px solid #000;
  display: flex;
  justify-content: space-around;
}

.row-item {
  flex: 0 0 40%;
  background-color: #eff;
}

.next-player-tip {
  text-align: center;
  width: 100%;
  font-size: 14px;
  margin-top: 20px;
}

.chess-board {
  width: 151px;
  height: 151px;
  box-sizing: border-box;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  margin: 20px auto;
}

.rect-item {
  width: 50px;
  height: 50px;
  float: left;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
}
.tip-text {
  position: absolute;
  right: 2px;
  bottom: -18px;
  display: block;
  font-size: 12px;
  color: #ccc;
  font-weight: 400;
}

.log-item {
  margin: 5px 15px;
}