看react的文档教程的第五天 -跟着文档走 井字棋判断谁是胜者

这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

今天已经是腊月22了,再上六天班,就是可爱的春节假期了,提前祝各位兄弟姐妹们,春节快乐,万事如意.

判断出胜者

之前跟随教程的指导,我可以轮流下棋,但是按照我们的理解,我们还需要让它来自动判断胜负,我们还需要显示游戏的结果来判定游戏结束。拷贝如下 calculateWinner 函数并粘贴到文件底部：

function calculateWinner(squares) {
  const lines = [
    [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 < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

我当时看到,哇,这些数字都是啥啊.但是我转念一想,想起来这张图

ref在之前的文章上,就很容易看明白,三横三竖,两个交叉的,这都是,井字棋的胜利的方式,后面的for循环是用来判断,不管是O还是X 只要能够三个数字的块都一样,那么就是胜利,返回值是"o"或者"x"

在 Board 组件的 render 方法中调用 calculateWinner(squares) 检查是否有玩家胜出。一旦有一方玩家胜出，就把获胜玩家的信息显示出来，比如，“胜者：X” 或者“胜者：O”。现在，我们把 Board 的 render 函数中的 status 的定义修改为如下代码：

  render() {
    const winner = calculateWinner(this.state.squares);    
    let status;   
    if (winner) {      status = 'Winner: ' + winner;    } 
    else {      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');    
    }

现在就完成了井字棋的所有功能了, 我明白了React 的基本常识,React 元素、React 组件、props，还有 state,目前来讲,还不太会使用,还得再进一步的练一练. 写在后面,我看到文档井字棋教程的结尾,还有几个进阶项目,来让我继续操练,预计在后面的日子里,继续去学习react相关知识,真是挺有意思的.