为什么 React 的井字游戏会显示获胜者？

Question

按照 react 教程 创建一个 tic-tac-toe 游戏，它可以工作，没有问题。我明白为什么除了获胜者的显示之外几乎所有功能都有效。

import { useState } from 'react';

export default function Board() {
    const [xIsNext, setXIsNext] = useState(true);
    const [squares, setSquares] = useState(Array(9).fill(null));

    function handleClick(idx) {
        const nextSquares = squares.slice();

        if (nextSquares[idx] || calculateWinner(squares)) {
            return;
        }

        nextSquares[idx] = xIsNext ? 'X' : '0';

        setSquares(nextSquares);
        setXIsNext(!xIsNext);
    }

    let winner = calculateWinner(squares);
    let status = winner
        ? 'Winner: ' + winner
        : 'Next player: ' + (xIsNext ? 'X' : '0');

    return (
        <>
            <div className="status">{status}</div>
            <div className="board-row">
                <Square val={squares[0]} onSquareClick={() => handleClick(0)} />
                <Square val={squares[1]} onSquareClick={() => handleClick(1)} />
                <Square val={squares[2]} onSquareClick={() => handleClick(2)} />
            </div>
            <div className="board-row">
                <Square val={squares[3]} onSquareClick={() => handleClick(3)} />
                <Square val={squares[4]} onSquareClick={() => handleClick(4)} />
                <Square val={squares[5]} onSquareClick={() => handleClick(5)} />
            </div>
            <div className="board-row">
                <Square val={squares[6]} onSquareClick={() => handleClick(6)} />
                <Square val={squares[7]} onSquareClick={() => handleClick(7)} />
                <Square val={squares[8]} onSquareClick={() => handleClick(8)} />
            </div>
        </>
    );
}

方块更新很清晰 - 状态已设置并且

Square

组件已更新。

我不明白的是如何重新计算

status

。是什么触发了那一小段代码来设置

winner

和

status

再次运行？它正在更新状态吗？如果再次运行，那么

xIsNext

和朋友的定义一定会再次发生？

有一些我没有理解的魔法，教程中也没有解释（否则就很清楚了）。

非常感谢您的见解。

Answer 1

是什么触发了那一小段代码来设置获胜者和状态以再次运行？是否更新状态？

是的。 状态更新会触发重新渲染，重新渲染会再次执行 entier

Board()

函数。 React 的钩子（

useState

、

useEffect

等）中的功能在内部管理它在后续渲染/执行中执行的操作，因为它们在每个渲染上执行。

组件主体中的简单赋值语句在每次渲染时进行赋值。