React入门实例：井字棋

下面是一个官方教程的实例，实现井字棋且可以回到任意一步。这个实例可以接触到 React 概念，包括元素、组件、props 和 state。详细每一步中文官方地址：https://zh-hans.react.dev/learn/tutorial-tic-tac-toe

代码

import { useState } from 'react';
import './App.css';
// Square组件：单个块可点击填充，接收传过来的2个props
function Square({ value, onSquareClick}) {
  return (
    //点击按钮调用父组件的函数
    <button
    className='square'
    onClick={onSquareClick}
    >{value}</button>
  )
}
// Board组件，共9个块，接收传过来的3个props
function Board({xIsNext, squares, onPlay }) {
  //点击块的函数
  function handleClick(i) {
    //如果已经被占了或者已经有胜者就返回
    if (squares[i] || calculateWinner(squares)) {
      return;
    }
    const nextSquares = squares.slice();//创建 squares 数组的副本
    if (xIsNext) {//如果xIsNext是true就往对应块位置填X
      nextSquares[i] = "X";
    } else {//否则填O
      nextSquares[i] = "O";
    }
    onPlay(nextSquares);//更新状态
  }
  function calculateWinner(squares) {//接收的参数是整个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];// 解构成功的三个索引
      //如果9个块中存在上面成功的情况就返回对应块的值
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];//返回的是X或O
      }
    }
    return null;// 如果没有胜者，返回null
  }
  const winner = calculateWinner(squares)// 计算当前局势的胜者
  let status;
  if (winner) {//如果有成功值就返回成功者
    status = "Winner: " + winner;
  } else {//否则返回下一局是谁
    status = "Next player: " + (xIsNext ? "X" : "O");
  }
  return(
  <>
  <div className="status">{status}</div>
  {/* 创建3行，每行3个Square组件 */}
  <div className="board-row">
        <Square value={squares[0]} onSquareClick={()=>handleClick(0)} />
        <Square value={squares[1]} onSquareClick={()=>handleClick(1)}/>
        <Square value={squares[2]} onSquareClick={()=>handleClick(2)}/>
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={()=>handleClick(3)}/>
        <Square value={squares[4]} onSquareClick={()=>handleClick(4)}/>
        <Square value={squares[5]} onSquareClick={()=>handleClick(5)}/>
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={()=>handleClick(6)}/>
        <Square value={squares[7]} onSquareClick={()=>handleClick(7)}/>
        <Square value={squares[8]} onSquareClick={()=>handleClick(8)}/>
      </div>
    </>
  )
}
function App(){
  //xIsNext初始化为true，表示X先行
  const [xIsNext, setXIsNext] = useState(true);
  // 初始化9个块的值都设置null
  const [history, setHistory] = useState([Array(9).fill(null)]);
  //用户当前正在查看的步骤
  const [currentMove, setCurrentMove] = useState(0);
  //当前落子的方块是history选中的位置
  const currentSquares = history[currentMove];

  // 处理落子并更新历史记录
  function handlePlay(nextSquares) {
    //回到过去后显示的历史记录是当前移动到的位置加以前的老历史
    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
    setHistory(nextHistory);//更新历史记录，在原来的history数组后加上nextHistory
    setCurrentMove(nextHistory.length - 1);//每次落子时，都需要更新 currentMove 以指向最新的历史条目
    setXIsNext(!xIsNext);//更新xIsNext，切换下一个玩家
  }
  // 跳转到指定历史记录
  function jumpTo(nextMove) {
    setCurrentMove(nextMove); // 更新当前移动
    setXIsNext(nextMove % 2 === 0); // 根据移动的奇偶性更新下一个玩家
  }
//遍历历史记录，生成每一步的描述。squares表示每个元素，move表示每个索引
  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;// 描述下一步
    } else {
      description = 'Go to game start';// 描述回到开始
    }
    return (
      //对于历史的每一步都创建一个li包含一个按钮
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });
  return(
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay}/>
      </div>
      <div className="game-info">
        <ol>{moves}</ol>{/* 显示历史记录 */}
      </div>
    </div>
  )
 }
export default App;

结果