React官网的井字棋游戏

这个是我在官网再次复习这个小游戏时梳理的一些思路，其中也包含了我在尝试时出的一些bug

文章目录

React官网的井字棋游戏
- 1.整体分析项目
- 2.为变量添加state并绑定点击事件
- 3.轮流落子
- 4.判断输赢
- 5.时间旅行
- 6.展示历史步骤
- 7.总结

1.整体分析项目

先对整个项目进行分析，可以分割为哪些组件，组件之间应该如何联系

这个小游戏中一共分为三个组件

Square组件：用来渲染每一个小方格

Board组件：控制九个方格这一面板

Game组件：控制更宏观的东西

可以通过初步的分析设计出这三个组件，以及确定好组件之间的关系

可以先由此写出一个没有交互，没有变化的静态页面

2.为变量添加state并绑定点击事件

接下来为这个项目添加"活力"

1.Square组件需要实时打印’X’、'Y’或空白，是变化量，因此要设置为state可以修改

2.但是在这个游戏中，需要判断输赢，单独的九个Square无法关联，因此需要状态提升

将这个value设置值为Board的State，再通过参数Props传入Square，就能实现在Board层面，宏观控制九个值的关系，判断输赢

  constructor(props){super(props);this.state={squares: Array(9).fill(null),}}

在Board组件中声明

3.根据用户的点击，要在棋盘上落子，因此要响应onClick事件

但是，onClick是直接与Square的botton相关联，而state在Board中

直接的onClick处理函数无法越级更改父级中的State

因此，onClick事件的处理一定要在Board组件中

所以，可以在Square中额外添加一个onClick属性，由父组件的props传入，这样在点击时就会调用Board里的处理函数

value的值也与onClick一样由Board传入

相当于这个点击事件的状态也随之提升了

Square组件也被称为受控组件，完全由Board进行控制

4.下面需要完善Board里的点击事件处理函数

    handleClick(i){const squares =this.state.squares.slice();squares[i]='X';this.setState({squares: squares,})}

需要注意的是，在这里，我们用新的一份数据来替换旧的数据，这样比直接修改数据有一些好处

如果直接进行修改的话，很难追踪到数据的改变，而用整体替换，相当于有很多的历史版本，对于数据维护，或者是撤销等复杂功能提供了更好的实现方法。

写完之后点击会在相应的方格出现’X’

但是我在这里犯了两个小错误：

①

在这里，应该传递的是数字这个索引，而不是直接传递值

如果传递数字的话，它就像一个Id，有很高的复用性，但是值得复用性就很低

因此要把8也改为this.renderSquare(8) (前几个我已经改回来了)

②

然后运行后点击还是没有反应，对比代码后发现，传入的onClick必须加括号

可能因为onClick的值是一段js代码，所以被理解为了函数

修改完之后就可以正常运行了

5.由于Square只有一个render方法，可以改写成函数组件，更方便一些

像这样：

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

但是之后又又又报错了，，找了半天才发现改为函数组件后，要去掉后面的括号

这样才是对的

3.轮流落子

在这里需要在state中额外添加一个变量来储存，下一位应该是哪个玩家/改玩家能不能落子

这个地方要写圆括号，写大括号会报错

4.判断输赢

要写一个能判断输赢的全局函数

  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;}

要防止用户多次点击，或者在决出胜者之后，不能再落子

一个类组件一般包含几部分

第一部分一般写构造函数、事件处理函数等等

第二部分一般写一些逻辑代码

第三步部分return内的，代表想在页面上展示的

5.时间旅行

实现时间回溯的功能，与之前的squares.slice()处理有很大的关系

用这种切片的处理，让数据追踪变得容易，每一次都是静态不变的历史数据版本，只要再声明一个history将其储存下来即可

我们想用最外层的game组件实现这一部分，因此history应声明在history的state中，同时要将board组件里的squares状态再次梯提升，这样history就能直接与其操作了

注意大括号

用Array声明相当于执行了js代码，所以要套在大括号里

修改后的点击事件处理函数

6.展示历史步骤

在处理未知个数据时，可以用map方法，把它们一个个都渲染出来

写成move元素的形式，然后再在最下面调用即可

比直接写在下面要好得多

在构建动态列表时，要指定一个合适的key

系统会根据key查找上次与其相同的元素，进行比较，然后重新渲染

最后引入一个state参数，stepNumber，来记录版本号，这样处理会更方便一些

两个核心函数：

所有代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';function Square(props){return(<button className="square" onClick={props.onClick}>{props.value}</button>);}class Board extends React.Component {renderSquare(i) {return (<Squarevalue={this.props.squares[i]}onClick={()=>this.props.onClick(i)}/> )}render() {return (<div><div className="board-row">{this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}</div><div className="board-row">{this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}</div><div className="board-row">{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div></div>);}}class Game extends React.Component {constructor(props){super(props);this.state={history: [{squares: Array(9).fill(null)},],xIsNext: true,stepNumber: 0,}}handleClick(i){const history=this.state.history.slice(0,this.state.stepNumber+1);const current=history[history.length-1];const squares=current.squares.slice();if(squares[i]||calculateWinner(squares)){return;}squares[i]=this.state.xIsNext?'X':'O';this.setState({history: history.concat([{squares: squares,}]),xIsNext: !this.state.xIsNext,stepNumber: history.length,});}jumpTo(step){this.setState({stepNumber: step,xIsNext: (step%2)===0,})}render() {const history=this.state.history;const current=history[this.state.stepNumber];const winner=calculateWinner(current.squares);const moves=history.map((step,move)=>{const desc=move?'Go to move #'+move:'Go to game start';return(<li key={move}><botton onClick={()=>this.jumpTo(move)}>{desc}</botton></li>)})let status;if(winner){status='Winner: '+ winner;}else{status='Next Player: '+(this.state.xIsNext?'X':'O');}return (<div className="game"><div className="game-board"><Board squares={current.squares}onClick={(i)=>this.handleClick(i)}/></div><div className="game-info"><div>{ status }</div><ol>{moves}</ol></div></div>);}}// ========================================const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<Game />);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;}

效果：

7.总结

在学习技术的时候，永远是要勤写，光停留在理论层面是学不会的，在自己敲代码的时候，能留意到更多的细节，也会引发更多的思考，同时也会加深对这个项目的理解，也能积累下来很多代码的经验

在写代码的过程中要仔细，一个小小的错误可能会为找bug带来巨大的苦恼，所以尽量不犯小错误，能减少bug的出现，保护头发

在IT行业，一方面技术更新迭代很快，另一方面确实感受到知识面很广，要学很多的东西，了解很多的东西，还是要多学多看多了解，慢慢积累

在前端项目中，尤其是大型项目，一般要使用React+Axios，

简单的项目一般使用jQuary+$.ajax就可以了

当然前端也有使用很广泛的Vue框架，这个等之后有空再学

复习到这里，基本上也算复习完了，在暑期实训的同时，要把axios学了，再学一学与后端对接的知识

加油！！