ReactJS Tic-Tac-Toe（💥通过了面试💥）

大家好！我想分享一下我上次面试的成功经验。当时我被要求用 ReactJS 编写一个井字棋游戏，最终成功拿到了工作机会。🎉🥳 这不是我第一次被要求编写这个游戏🎮，在其他面试中也遇到过类似的情况。其他面试都是用原生 JS 编写的。

我推荐的解决这个挑战的方法是：📙 列出你将如何解决它的步骤（就像我下面的视频一样），然后逐一编写代码。即使你没有完成游戏，你也会获得积分💯。如果你没有完成挑战，只需谈谈你将如何编写其余步骤的代码，你很可能仍然会在面试中取得成功。

以下是我的操作方法。我创建了两个 2️⃣ 个组件——Square 和 Board 组件，以及一个辅助函数来计算获胜者。

方形组件

function Square({ onClick, value }) {
  return (
    <button className="square" onClick={onClick}>
      {value}
    </button>
  );
}

电路板组件

function Board () {
  const [squares, setSquares] = React.useState(Array(9).fill(null))
  const [isX, setIsX] = React.useState(true);

  const handleClick = (i) => {
    if (calculateWinner(squares) || squares[i]) {
      return
    }

    squares[i] = isX ? 'X' : 'O'
    setSquares(squares)
    setIsX(!isX)
  }

  const winner = calculateWinner(squares)
  let status

  if (winner) {
    status = `Winner: ${winner}`;
  } else {
    status = 'Next player: ' + (isX ? 'X' : 'O');
  }

  const handleRestart = () => {
    setIsX(true)
    setSquares(Array(9).fill(null))
  }

  const renderSquare = (i) => {
    return <Square value={squares[i]} onClick={() => handleClick(i)} />
  }

  return (
    <div className="board">
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
      <div className="status">{status}</div>
      <button className="restart" onClick={handleRestart}>Restart Game!</button>
    </div>
  )
}

计算获胜者的辅助函数

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

如果您想尝试我的解决方案，下面是一些 Codepen 链接。此外，如果您想亲自尝试，这里还有一个练习链接，可以避免设置步骤。

井字棋 Codepen 解决方案
 井字棋 Codepen 练习

最后总结：
这次面试挑战虽然艰难，但也可能充满乐趣。它能让你重温 ReactJS 的概念和基础知识。如果你被邀请参加这个挑战，它甚至可能帮助你找到理想的工作，所以这是一个双赢的局面，对你来说可能很有价值。

即使你暂时不需要，也可以随时收藏🔖。以后你寻找新职位的时候，可能需要刷新/回顾一下。

如果您在与该库相关的潜在面试中需要帮助，请列出我之前的 ReactJS 帖子的集合。

常见的 React 面试问题

高级 React 面试问题

10 个 ReactJS 编码挑战（💥编码面试准备💥）

（我制作了一个 7 分钟的视频，可以快速轻松地逐步解释细节，因为我看到其他教程长达 20 分钟到 1 小时，可以大大压缩成更短的视频）

鏂囩珷鏉ユ簮锛�https://dev.to/frontendengineer/reactjs-tic-tac-toe-passed-job-interview-1od8