【React】井字棋代码优化

我在网上有找过几个版本的优化，要么不是一步步的实现的，要么就是代码不全或者有bug，这个我自己试过了没问题，如果有不能实现的地方，可以给我留言。我会持续更新版本。

需求

react入门的井字棋需要完成的优化如下：

1. 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)。
2. 在历史记录列表中加粗显示当前选择的项目。
3. 用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode）。
4. 添加一个可以升序或降序显示历史记录的按钮。
5. 每当有人获胜时，高亮显示连成一线的 3 颗棋子。
6. 当无人获胜时，显示一个平局的消息。
   这些功能实现的难度是递增的。

实现

1. 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)

• 思路： 将实时的点转换成目标坐标
• 代码：
  在Game中新增属性，记录落子位置

  this.state = {
    history: [{
      .....
      index: -1  //记录落子的位置
    }],
    ......
  }
  

  当落子时，状态改变。

  this.setState({
    history: history.concat([{
      ......
      index: i,  //落子时改变这个值
      .....
    }]),
    ......
  })
  

  改变历史记录的文字，加上坐标值。

  const moves = history.map((step, move)=>{
    //step.index是实际数字，move是第几次操作
    const desc =  move?
      `Go to move #${move}:(${Math.floor(step.index / 3)+1},${step.index % 3 +1})`
      :
      `Go to game start`; 
  })
  

2. 在历史记录列表中加粗显示当前选择的项目

• 思路： 选中当前按钮，给加上一个class即可。
• 代码：
  先将css写上

  .bold-font{
    font-weight: 900;
  }
  

  state加上boldClass控制每一个历史记录按钮的属性数组

  this.state = {
    history: [......],
    boldClass: Array(9).fill(null), //控制每一个历史记录按钮的属性数组
    ......
  }
  

  点击的时候给加上这个属性。

  jumpTo(step){
    const boldClass = Array(9).fill(null)
    boldClass[step] = 'bold-font'
    this.setState({
      stempNumber: step,
      xIsNext: (step % 2) === 0,
      boldClass: boldClass
    })
  }
  

  渲染的时候在button上加上这个属性。

  render(){
    ......
    const moves = history.map((step, move)=>{
      ......
      return (
        <li key={move}>
          <button variant="outlined" className={this.state.boldClass[move]} onClick={()=>this.jumpTo(move)}>{desc}</button>
        </li>
      )
    })
  }
  

3. 用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode)

• 思路：看作是两个数组，map循环输出
• 代码：
  将Board改造

  render(){
    const board = Array(3).fill(null).map((item,index1)=>{
      const boardRow =  Array(3).fill(null).map((item,index2)=>{
        return (
          this.renderSquare(index1*3+index2,index2)
        )
      })
       return (
        <div className="board-row" key={index1}>
          {boardRow}
        </div>
      )
    })
    return (
      <div>
        {board}
      </div>
    )
  }
  

  使用map一定要在组件添加key关键字，但是使用循环的index并不是最优解，最好使用数字自带的不会重复的number排序。

  renderSquare(i,key){
    return (
      <Square
         key={key}  
         value={this.props.squares[i]} 
         class={this.props.className[i]} 
         onClick={() => this.props.onClick(i)}
      />
    )
  }
  

4. 添加一个可以升序或降序显示历史记录的按钮

• 点击升序/降序改变状态，看状态让moves反转
• 代码：
  state添加isAsc判断是升序还是降序

  this.state = {
    ......
    isAsc: true, //默认为升序
  }
  

  增加两个按钮，这里引入了material-ui组件，可以自行安装

  import {Button. ButtonGroup} from '@material-ui/core';
  ......
  <div classNmae="game-info">
    <div>{status}</div>
    <div className="game-sort">
      <span>历史记录排序：</span>
      <ButtonGroup size="small" color="primary" aria-label="large outline primary button group">
        <Button onClick={()=>{ this.setState({isAsc: true}) }}>升序</Button>
        <Button onClick={()=>{ this.setState({isAsc: false}) }}>降序</Button>
      </ButtonGroup>
    </div>
    <ol>{!this.state.isAsc?moves.reverse(): moves}</ol>
  </div>
  

5. 每当有人获胜时，高亮显示连成一线的 3 颗棋子

• 思路：当赢家出现的时候，返回对应的line，并给line都加上高亮的样式。
• 代码：
  加上css样式代码

  .x-line{
    background: lightcyan;
  }
  .o-line{
    background: peachpuff;
  }
  

  在calculateWinner函数中将赢家对应的line返回。

  function calculateWinner(squares){
    const lines = [......]
    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 ({
          winner: squares[a],
          line: lines[i]
        })
      }
    }
    return null
  }
  

  定义oClass

  this.state = {
    history: [{
      squares: Array(9).fill(null),
      index: -1,
      oClass: Array(9).fill(null)
    }],
    ......
  }
  

  当出现赢家，给加上高亮样式

  handleClick(i){
    ......
    if(winner){
      winner.line.map((item)=>{
        if(winner.winner === 'X'){
          oClass[item] = oClass[item].concat(' x-line') //空格不能少 
        }else{
          oClass[item] = oClass[item].concat(' o-line') //空格不能少
        }
      })
    }
  
    this.setState({
      history: history.concat([{
        squares: squares,
        index: i,
        oClass: oClass
      }]),
      ......
    })
  }
  

  当然，不要忘记在其他调用calculateWinner的地方改变一下赋值。比如render中

  ......
  if(winner){
    status = 'Winner' + winner.winner
  }else{
    status = 'Next player: '+(this.state.xIsNext ? 'X' :'O')
  }
  ......
  

  然后我们需要把这个样式名称传到Square去。
  Game:

  return (
    ......
    <Board className={current.oClass} squares={current.squares} onClick={(i)=> this.handleClick(i)}/>
    ......
  )
  

  Board:

  renderSquare(i,key){
    return (
      <Square
        key={key}
        value={this.props.squares[i]}
        class={this.props.className[i]}
        onClick = {()=> this.props.onClick(i)}
      />
    )
  }
  

  Square:

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

6. 当无人获胜时，显示一个平局的消息

• 代码：

  if(winner){
    status = 'Winner: ' + winner.winner
  }else if(!current.squares.includes(null)){
    status = 'no one win~'
  }else{
    status = 'Next player: '+(this.state.xIsNext ? 'X' : 'O')
  }