「快速上手React」⚛️井字棋游戏
站长
· 阅读数 61
最近开始接触React，我认为读官方文档是最快上手一门技术的途径了，恰好React的官方文档中有这样一个井字棋游戏的demo，学习完后能够快速上手React，这是我学习该demo的总结
需求分析
首先看看这个游戏都有哪些需求吧
- 游戏玩家：
X和O，每次落棋后需要切换到下一个玩家 - 赢家判断：什么情况下会诞生赢家，如何进行判断？
- 禁止落棋的时机：游戏已有赢家 or 棋盘上已有棋子时
- 时间旅行：能够展示游戏下棋历史，点击可跳转回相应的棋局
实现分析
首先声明一下，我不会像官方文档那样一步步从底层实现，然后逐步状态提升至父组件的方式讲解，而是直接从全局分析，分析涉及哪些状态，应当由哪个组件管理以及这样做的原因是什么
涉及的组件
先来思考一下整个游戏会涉及什么组件：
- 首先最基本的，打开游戏最能吸引目光的，就是棋盘了，所以肯定得有一个棋盘组件
Board - 棋盘有多个格子，因此还能将棋盘分割成多个格子组件
Square - 还需要有一个游戏界面去控制游戏的
UI以及游戏的逻辑，所以要有一个Game组件
涉及的状态
- 棋盘中的每个格子的棋子是什么，比如是
X还是O - 下一步是哪个玩家
- 棋盘的历史记录，每下一步棋都要保存整个棋盘的状态
- 棋盘历史记录指针，控制当前的棋盘是历史记录中的哪个时候的棋盘
我们可以自顶向下分析，最顶层的状态肯定是历史记录，因为它里面保存着每一步的棋盘，而棋盘本应该作为Board组件的状态的，但又由于有多个变动的棋盘（用户点击历史记录切换棋盘时），所以不适合作为state放到Board组件中，而应当作为props，由父组件Game去控制当前展示的棋盘
而棋盘中的格子又是在棋盘中的，所以也导致本应该由棋盘格子Square组件管理的格子内容状态提升至Game组件管理，存放在历史记录的每个棋盘对象中，所以Square的棋盘内容也应当以props的形式存在
下一步轮到哪个玩家由Game组件控制
有了以上的分析，我们就可以开始写我们的井字棋游戏了！
编码实现
项目初始化
首先使用vite创建一个react项目
pnpm create vite react-tic-tac-toe --template react-ts
cd react-tic-tac-toe
pnpm i
code .
这里我使用vscode进行开发，当然，你也可以使用别的ide（如Neovim、WebStorm）
定义各个组件的props/state
由于使用的是ts进行开发，所以我们可以在真正写代码前先明确一下每个组件的props和state，一方面能够让自己理清一下各个组件的关系，另一方面也可以为之后编写代码提供一个良好的类型提示
Square组件props
每个棋盘格中需要放棋子，这里我使用字符X和O充当棋子，当然，棋盘上也可以不放棋子，所以设置一个squareContent属性
点击每个格子就是落棋操作，也就是要填充一个字符到格子中，根据前面的分析我们知道，填充的逻辑应当交由棋盘Board组件处理
所以再添加一个onFillSquare的prop，它起到一个类似事件通知的作用，当调用这个函数的时候，会调用父组件传入的函数，起到一个通知的作用，这样命名语义上相当于emit一个自定义事件fill-square给父组件
所以Square组件的props接口定义如下：
interface Props {
squareContent: string | null;
onFillSquare: () => void;
}
Board组件props
棋盘填充棋子的逻辑也应当交给Game组件去完成，因为要维护历史记录，而棋盘的状态都是保存在历史记录中的，所以填充棋子也要作为Board组件的一个prop
还要在棋盘上显示下一个玩家以及在对局结束时显示赢家信息，所以要有一个boardInfo的prop显示对局信息
最终Board组件的props接口定义如下：
type Squares = Omit<SquareProps, 'onFillSquare'>[]
interface Props {
squares: Squares
boardInfo: string;
onFillSquare: (squareIdx: number) => void;
}
Game组件state
要记录历史信息，以及通过历史记录下标获取到对应历史记录的棋盘，所以它的State如下
import type { Props as BoardProps } from './Board'
type BoardPropsFiltered = Omit<BoardProps, 'onFillSquare'>
type Player = 'X' | 'O'
interface State {
// 记录棋盘历史
history: BoardPropsFiltered[]
// 当前处在历史记录的哪个记录中
currentHistoryIdx: number
// 下一个落棋玩家
nextPlayer: Player
}
各组件实现
Square
格子组件只需要关注格子的内容的渲染以及点击格子时通知父组件进行落棋操作即可
由于react没有vue那样的defineEmit的API，所以子组件通知父组件只能够是通过props中接收回调的方式来通知
这点我觉得没有vue好，vue的defineEmit能够起到一个更好的语义化的作用，并且vue中也可以像react一样通过props传递回调的方式来起到子组件通知父组件的功能，所以这一方面我觉得vue更胜一筹，当然，也可能我刚接触react，或许也有类似的机制只是我还不知道，如果有读者知道的话欢迎在评论区指点我一下
import React from 'react'
export interface Props {
squareContent: string | null
onFillSquare: () => void
}
export default class Square extends React.Component<Props> {
render(): React.ReactNode {
const { squareContent, onFillSquare: emitFillSquare } = this.props
return (
<div
className="square"
// 点击的时候通知父组件修改 squareContent
onClick={() => emitFillSquare()}>
{squareContent}
</div>
)
}
}
Board
棋盘有两部分组成：
- 棋盘顶部的对局信息 -- 包括下一个落棋的玩家，以及对局结束时显示赢家
- 棋盘主体
大致框架结构
所以先在渲染函数中写出大致结构
render(): React.ReactNode {
const { boardInfo } = this.props
// 棋盘的行列数
const [boardRow, boardCol] = [3, 3]
return (
<div className="board">
{/* 棋盘顶部显示下一个游戏玩家以及棋局结束时显示赢家 */}
<div className="board-info">{boardInfo}</div>
{/* 棋盘 */}
<div className="board-container">
{this.renderBoard(boardRow, boardCol)}
</div>
</div>
)
}
改进 -- 支持指定棋盘大小
棋盘主体的渲染封装到了一个方法renderBoard中实现，代码如下：
// 格子 props 中的事件监听属性我们不需要 将其忽略
type SquarePropsFiltered = Omit<SquareProps, 'onFillSquare'>
// 棋盘中的所有格子类型
export type Squares = SquarePropsFiltered[]
interface Props {
squares: Squares
boardInfo: string
fillSquare: (squareIdx: number) => void
}
export default class Board extends React.Component<Props> {
// 渲染第几个格子
renderSquare(squareIdx: number) {
const { squares } = this.props
// 根据 squareIdx 取出目标 square 对象
const targetSquare = squares[squareIdx]
return (
<Square
key={squareIdx}
squareContent={targetSquare.squareContent}
fillSquare={() => this.fillSquare(squareIdx)}
/>
)
}
// 渲染几行几列的棋盘
renderBoard(row: number, col: number) {
// 渲染棋盘的每一行
const renderBoardRow = (rowIdx: number) => {
// 每一行的起始下标
const colIdx = rowIdx * col
const squareEls = new Array(col)
.fill(0)
.map((_, idx) => this.renderSquare(colIdx + idx))
return (
<div
className="board-row"
key={rowIdx}>
{squareEls}
</div>
)
}
const board = []
for (let i = 0; i < row; i++) {
board.push(renderBoardRow(i))
}
return board
}
}
这里我做了一点改进，可以支持渲染任意行列数的棋盘，默认是3 * 3的棋局，可以通过修改渲染函数中的行列数渲染不同的棋盘
3 * 3 棋盘
3 * 5 棋盘
5 * 5 棋盘
那么这里其实可以考虑提取成props，由父组件决定棋盘大小
interface Props {
squares: Squares
boardInfo: string
fillSquare: (squareIdx: number) => void
+ shape: [number, number]
}
export default class Board extends React.Component<Props> {
render(): React.ReactNode {
- const { boardInfo } = this.props
+ const { boardInfo, shape } = this.props
// 棋盘的行列数
- const [boardRow, boardCol] = [3, 3]
+ const [boardRow, boardCol] = shape
return (
<div className="board">
{/* 棋盘顶部显示下一个游戏玩家以及棋局结束时显示赢家 */}
<div className="board-info">{boardInfo}</div>
{/* 棋盘 */}
<div className="board-container">
{this.renderBoard(boardRow, boardCol)}
</div>
</div>
)
}
}
fillSquare
填充格子，也就是落棋的逻辑，应当指定格子的下标，然后往格子处落棋，也就是在父组件Board中修改Square组件的squareContent属性
由于props中有squares，所以我们可以通过下标获取到目标格子，然后修改它的squareContent
export default class Board extends React.Component<Props> {
// 填充第几个格子
fillSquare(squareIdx: number) {
const { squares } = this.props
const targetSquare = squares[squareIdx]
console.log(
'Square组件的click事件触发，导致父组件传入的 fillSquare 回调触发 -- ',
squareIdx,
)
targetSquare.squareContent = 'X'
}
}
来试一下能否落棋
可以看到，控制台能够输出信息，说明是通过格子的点击事件触发了Board传给格子的回调了，但是并没有将格子的内容修改
squares是props，由父组件Game传入，不应当在子组件Board中修改props- 修改的时候并不知道应当修改成
X还是O，因为下一个玩家是谁这是由Game组件控制的
所以应当将填充格子的逻辑交给父组件Game去控制，所以这里fillSquare仍然是调用props中的fillSquare回调，起到一个通知父组件处理落棋逻辑的目的
export default class Board extends React.Component<Props> {
// 填充第几个格子
handleFillSquare(squareIdx: number) {
const { onFillSquare: emitFillSquare } = this.props
// 通知父组件 Game 处理落棋逻辑
emitFillSquare(squareIdx)
}
}
Game
由于Board组件中增加了一个shape属性，而这个属性由Game组件传入，所以Game的state也要增加一个shape
interface State {
// 记录棋盘历史
history: BoardPropsFiltered[]
// 当前处在历史记录的哪个记录中
currentHistoryIdx: number
// 下一个落棋玩家
nextPlayer: Player
// 棋盘大小
shape: [number, number]
}
大致框架结构
游戏面板有左侧棋盘区域，中间分割线以及右侧历史记录区域
export default class Game extends React.Component<any, State> {
render(): React.ReactNode {
const { history, currentHistoryIdx, shape } = this.state
const { squares, boardInfo } = history[currentHistoryIdx]
return (
<div className="game">
{/* 左侧棋盘 */}
<Board
squares={squares}
boardInfo={boardInfo}
shape={shape}
onFillSquare={this.handleFillSquare}
/>
{/* 分割线 */}
<Divider />
{/* 右侧历史记录面板 */}
<History />
</div>
)
}
}
初始化逻辑
需要初始化Game的状态
export default class Game extends React.Component<any, State> {
constructor(props: any) {
super(props)
const shape: [number, number] = [3, 3]
// 初始化棋盘中的格子
const squares: Squares = new Array(shape[0] * shape[1]).fill({
squareContent: null,
})
this.state = {
history: [
{
squares,
boardInfo: 'Next player is X',
},
],
currentHistoryIdx: 0,
nextPlayer: 'X',
shape,
}
}
}
处理落棋逻辑
落棋的时候，需要做一下几件事情：
- 落棋点的内容改为当前玩家
- 落棋后更新历史记录
- 计算下一个落棋玩家
- 计算新的棋盘对局信息
对应的代码如下：
handleFillSquare(squareIdx: number) {
const { history, currentHistoryIdx, nextPlayer } = this.state
const { squares } = history[currentHistoryIdx]
// 需要复制一份棋盘格子数据 保证历史记录的准确
const clonedSquares = squares.slice(0)
clonedSquares[squareIdx] = {
squareContent: nextPlayer,
}
// 计算新数据
const newNextPlayer = (currentHistoryIdx + 1) % 2 === 0 ? 'X' : 'O'
const newBoardInfo = `Next player is ${newNextPlayer}`
this.setState({
history: history.concat([
{
squares: clonedSquares,
boardInfo: newBoardInfo,
},
]),
currentHistoryIdx: history.length,
nextPlayer: newNextPlayer,
})
}
赢家判断
每次落棋后都需要检测一下是否产生了赢家，是的话就不允许再落棋，并且对局信息要修改为显示赢家是谁
handleFillSquare(squareIdx: number) {
const { history, currentHistoryIdx, nextPlayer } = this.state
const { squares } = history[currentHistoryIdx]
// 判断是否允许落棋
// 1. 已经有赢家的情况下不允许落棋
// 2. squareIdx 对应的格子已有棋子时不允许落棋
if (
calcWinner(squares) !== null ||
squares[squareIdx].squareContent !== null
) {
return
}
// 需要复制一份棋盘格子数据 保证历史记录的准确
const clonedSquares = squares.slice(0)
clonedSquares[squareIdx] = {
squareContent: nextPlayer,
}
// 计算新数据
const newNextPlayer = (currentHistoryIdx + 1) % 2 === 0 ? 'X' : 'O'
const newBoardInfo = `Next player is ${newNextPlayer}`
this.setState({
history: history.concat([
{
squares: clonedSquares,
boardInfo: newBoardInfo,
},
]),
currentHistoryIdx: history.length,
nextPlayer: newNextPlayer,
})
}
计算赢家的逻辑如下
const calcWinner = (squares: Squares): Player | null => {
// 赢的时候的棋局情况
const winnerCase = [
[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 < winnerCase.length; i++) {
const [a, b, c] = winnerCase[i]
const contentA = squares[a].squareContent
const contentB = squares[b].squareContent
const contentC = squares[c].squareContent
if (contentA && contentA === contentB && contentA === contentC) {
return contentA as Player
}
}
return null
}
渲染函数
渲染函数中要负责棋盘对局信息的更新
render(): React.ReactNode {
const { history, currentHistoryIdx, shape } = this.state
const { squares, boardInfo } = history[currentHistoryIdx]
const winner = calcWinner(squares)
let newBoardInfo: string
if (winner !== null) {
newBoardInfo = `Winner is ${winner}!`
} else {
newBoardInfo = boardInfo
}
return (
<div className="game">
{/* 左侧棋盘 */}
<Board
squares={squares}
boardInfo={newBoardInfo}
shape={shape}
onFillSquare={(squareIdx: number) => this.handleFillSquare(squareIdx)}
/>
{/* 分割线 */}
<Divider />
{/* 右侧历史记录面板 */}
<History />
</div>
)
}
时间旅行
首先要渲染历史记录，并且还要给每个历史记录添加点击事件，点击之后通知父组件修改历史记录的指针
import React from 'react'
import type { Squares, Props as BoardProps } from './Board'
type BoardPropsFiltered = Omit<BoardProps, 'onFillSquare' | 'shape'>
export type HistoryType = BoardPropsFiltered[]
interface Props {
history: HistoryType
onJumpTo: (historyIdx: number) => void
}
export default class History extends React.Component<Props> {
emitJumpTo(historyIdx: number) {
this.props.onJumpTo(historyIdx)
}
renderHistoryItems() {
const { history } = this.props
const historyItems = history.map((_, idx) => {
const desc = idx ? `Go to #${idx}` : `Go to game start`
return (
<li key={idx}>
<span
className="history-item"
onClick={() => this.emitJumpTo(idx)}>
{desc}
</span>
</li>
)
})
return historyItems
}
render(): React.ReactNode {
return (
<div className="history">
<span className="info">History</span>
<ol className="history-list">{this.renderHistoryItems()}</ol>
</div>
)
}
}
Game组件要作出相应修改
export default class Game extends React.Component<any, State> {
constructor(props: any) {
super(props)
const shape: [number, number] = [3, 3]
// 初始化棋盘中的格子
const squares: Squares = new Array(shape[0] * shape[1]).fill({
squareContent: null,
})
this.state = {
history: [
{
squares,
boardInfo: 'Next player is X',
},
],
currentHistoryIdx: 0,
nextPlayer: 'X',
shape,
}
}
handleFillSquare(squareIdx: number) {
const { history, currentHistoryIdx, nextPlayer } = this.state
const { squares } = history[currentHistoryIdx]
// 判断是否允许落棋
// 1. 已经有赢家的情况下不允许落棋
// 2. squareIdx 对应的格子已有棋子时不允许落棋
if (
calcWinner(squares) !== null ||
squares[squareIdx].squareContent !== null
) {
return
}
// 需要复制一份棋盘格子数据 保证历史记录的准确
const clonedSquares = squares.slice(0)
clonedSquares[squareIdx] = {
squareContent: nextPlayer,
}
// 计算新数据
const newNextPlayer = (currentHistoryIdx + 1) % 2 === 0 ? 'X' : 'O'
const newBoardInfo = `Next player is ${newNextPlayer}`
const newHistory = history.slice(0, currentHistoryIdx + 1)
const newCurrentHistoryIdx = newHistory.length
this.setState({
history: newHistory.concat([
{
squares: clonedSquares,
boardInfo: newBoardInfo,
},
]),
currentHistoryIdx: newCurrentHistoryIdx,
nextPlayer: newNextPlayer,
})
}
handleJumpTo(historyIdx: number) {
this.setState({
currentHistoryIdx: historyIdx,
})
}
render(): React.ReactNode {
const { history, currentHistoryIdx, shape } = this.state
const { squares, boardInfo } = history[currentHistoryIdx]
const winner = calcWinner(squares)
let newBoardInfo: string
if (winner !== null) {
newBoardInfo = `Winner is ${winner}!`
} else {
newBoardInfo = boardInfo
}
return (
<div className="game">
{/* 左侧棋盘 */}
<Board
squares={squares}
boardInfo={newBoardInfo}
shape={shape}
onFillSquare={(squareIdx: number) => this.handleFillSquare(squareIdx)}
/>
{/* 分割线 */}
<Divider />
{/* 右侧历史记录面板 */}
<History
history={history}
onJumpTo={(historyIdx: number) => this.handleJumpTo(historyIdx)}
/>
</div>
)
}
}
至此，整个井字棋游戏就开发完成了
用函数式组件改造
之前的实现全都是基于类组件的，这次我们用函数式组件来重写一次
转换的方式很简单，就是把类变成函数，并且this全部删掉，props作为函数的第一个参数即可
而state的使用则通过useState去替代类组件中构造器里的this.state = {}定义
组件中的方法改成箭头函数即可
App
首先是入口组件App的重构
import './App.scss'
import Game from './Game'
export default function App() {
return <Game />
}
Square
export interface Props {
squareContent: string | null
onFillSquare: () => void
}
export default function Square(props: Props) {
const { squareContent, onFillSquare: emitFillSquare } = props
return (
<div
className="square"
// 点击的时候通知父组件修改 squareContent
onClick={() => emitFillSquare()}>
{squareContent}
</div>
)
}
Board
import Square from './Square'
import type { Props as SquareProps } from './Square'
// 格子 props 中的事件监听属性我们不需要 将其忽略
type SquarePropsFiltered = Omit<SquareProps, 'onFillSquare'>
// 棋盘中的所有格子类型
export type Squares = SquarePropsFiltered[]
export interface Props {
squares: Squares
boardInfo: string
shape: [number, number]
onFillSquare: (squareIdx: number) => void
}
export default function Board(props: Props) {
// 填充第几个格子
const handleFillSquare = (squareIdx: number) => {
const { onFillSquare: emitFillSquare } = props
// 通知父组件 Game 处理落棋逻辑
emitFillSquare(squareIdx)
}
// 渲染第几个格子
const renderSquare = (squareIdx: number) => {
const { squares } = props
// 根据 squareIdx 取出目标 square 对象
const targetSquare = squares[squareIdx]
return (
<Square
key={squareIdx}
squareContent={targetSquare.squareContent}
onFillSquare={() => handleFillSquare(squareIdx)}
/>
)
}
// 渲染几行几列的棋盘
const renderBoard = (row: number, col: number) => {
// 渲染棋盘的每一行
const renderBoardRow = (rowIdx: number) => {
// 每一行的起始下标
const colIdx = rowIdx * col
const squareEls = new Array(col)
.fill(0)
.map((_, idx) => renderSquare(colIdx + idx))
return (
<div
className="board-row"
key={rowIdx}>
{squareEls}
</div>
)
}
const board = []
for (let i = 0; i < row; i++) {
board.push(renderBoardRow(i))
}
return board
}
const { boardInfo, shape } = props
// 棋盘的行列数
const [boardRow, boardCol] = shape
return (
<div className="board">
{/* 棋盘顶部显示下一个游戏玩家以及棋局结束时显示赢家 */}
<div className="board-info">
<span className="info">{boardInfo}</span>
</div>
{/* 棋盘 */}
<div className="board-container">{renderBoard(boardRow, boardCol)}</div>
</div>
)
}
Game
import { useState } from 'react'
import Board from './Board'
import Divider from './Divider'
import History from './History'
import type { Squares } from './Board'
import type { HistoryType } from './History'
type Player = 'X' | 'O'
interface State {
// 记录棋盘历史
history: HistoryType
// 当前处在历史记录的哪个记录中
currentHistoryIdx: number
// 下一个落棋玩家
nextPlayer: Player
// 棋盘大小
shape: [number, number]
}
export default function Game() {
const [currentHistoryIdx, setCurrentHistoryIdx] =
useState<State['currentHistoryIdx']>(0)
const [nextPlayer, setNextPlayer] = useState<State['nextPlayer']>('X')
const [shape, setShape] = useState<State['shape']>([3, 3])
// 初始化棋盘中的格子
const initialSquares: Squares = new Array(shape[0] * shape[1]).fill({
squareContent: null,
})
const [history, setHistory] = useState<State['history']>([
{
squares: initialSquares,
boardInfo: 'Next player is X',
},
])
const handleFillSquare = (squareIdx: number) => {
const { squares } = history[currentHistoryIdx]
// 判断是否允许落棋
// 1. 已经有赢家的情况下不允许落棋
// 2. squareIdx 对应的格子已有棋子时不允许落棋
if (
calcWinner(squares) !== null ||
squares[squareIdx].squareContent !== null
) {
return
}
// 需要复制一份棋盘格子数据 保证历史记录的准确
const clonedSquares = squares.slice(0)
clonedSquares[squareIdx] = {
squareContent: nextPlayer,
}
// 计算新数据
const newNextPlayer = (currentHistoryIdx + 1) % 2 === 0 ? 'X' : 'O'
const newBoardInfo = `Next player is ${newNextPlayer}`
const newHistory = history.slice(0, currentHistoryIdx + 1)
const newCurrentHistoryIdx = newHistory.length
setHistory(
newHistory.concat([
{
squares: clonedSquares,
boardInfo: newBoardInfo,
},
]),
)
setCurrentHistoryIdx(newCurrentHistoryIdx)
setNextPlayer(newNextPlayer)
}
const handleJumpTo = (historyIdx: number) => {
setCurrentHistoryIdx(historyIdx)
}
const { squares, boardInfo } = history[currentHistoryIdx]
const winner = calcWinner(squares)
let newBoardInfo: string
if (winner !== null) {
newBoardInfo = `Winner is ${winner}!`
} else {
newBoardInfo = boardInfo
}
return (
<div className="game">
{/* 左侧棋盘 */}
<Board
squares={squares}
boardInfo={newBoardInfo}
shape={shape}
onFillSquare={(squareIdx: number) => handleFillSquare(squareIdx)}
/>
{/* 分割线 */}
<Divider />
{/* 右侧历史记录面板 */}
<History
history={history}
onJumpTo={(historyIdx: number) => handleJumpTo(historyIdx)}
/>
</div>
)
}
const calcWinner = (squares: Squares): Player | null => {
// 赢的时候的棋局情况
const winnerCase = [
[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 < winnerCase.length; i++) {
const [a, b, c] = winnerCase[i]
const contentA = squares[a].squareContent
const contentB = squares[b].squareContent
const contentC = squares[c].squareContent
if (contentA && contentA === contentB && contentA === contentC) {
return contentA as Player
}
}
return null
}
转载自:https://juejin.cn/post/7128048498016010270