react 框架入门小游戏（三子棋）（状态提升）

前言：本文针对react框架讲述react官方教程上的入门教程（三子棋）参考网址如下：点击打开链接主要涉及知识点是状态提升，注：本文只讲解js代码官网中在这个游戏中所加的css代码本文不会去讲述

1.

首先先看图形的形状代码没有加任何的交互，只是通过react组件来实现：

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</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 {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

对上述代码进行简单概述：首先上段代码中一共有三个类，第一个类主要实现的是返回一个格子，第二个类在react中可以理解为第一个组件的一个容器，用来盛放多个square组件，至于第三个组件现在博主刚开始看的时候觉得有点多此一举，后来才发现并不是这样，这里先不做过多的解释，先暂时理解为这个组件是用来保存board每一个状态的组件里面在界面的渲染表现为一个游戏状态与游戏画面（九宫格）

2.

OK上面我们已经大体了解了一下三个组件的功能这三个组件组合在一块表现出来的形式如下图所示：

好，下一步，我们要完成的是各种交互，我们先要明确我们的游戏目的是什么，通过鼠标的点击使某种图案充满格子（button）然后再次点击时呈现不一样的图案，直到横竖斜凑够某种图案为止判定某一方取得获胜，首先，第一步，点击按钮时，使图案充满button，其实细心的人已经发现我们在board组件中的render方法中给每一个square组件加入了一个参数，这个参数在这就起到了作用，改变square组件的render方法以及修改board组件中的rendersquare方法：

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

效果如下：

然后加入交互，这里我们用到的react的state属性，先将每一个格子的state的value全部置为null，然后通过给square添加点击事件使value展现出来：

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

当每一次点击格子时，就会有一个X充满格子，这样我们就完成了我们的第一步，但是，需要注意的是，JavaScript语言的this比较特殊，为了使用正确的上下文我们这里在添加onclick事件时用了箭头函数

3.

  我们完成这个交互之后，下面要想的事情是如何实现图案的变化，这里有个方法是用一个变量来实现，在state里放入一个叫做xisnext的变量，并且让其默认值为true，然后当我们每一次点击格子的时候xisnext的值都会发生变化，这样就能够通过这个变量值的变化来改变图案

  好，那么我们再来想一下下一步，很明显下一步在于如何判断输赢，首先，我们可能自然而然想到的方法是将每一个格子的图案状态都保存下来然后去核实是否出现结局，这种方法可以，但是会很复杂，就好比一个团队里每一个人都是各干各的，彼此之间不交流，这样会出现很多的问题（bug）那么下面就要提到我们react中很牛叉的状态提升，我对于他的理解是，给每一个同等级别的人找一个上司，让上司来管理下属之间的事情，这样可以有效的实现各个数据之间的共享，OK，square所有的状态都交给board来管理，这样上文提到的图案交换这件交互里面的state也交给board而不是给square，看下列代码：

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

通过数组来实现存放的各个square的状态，xIsNext用来改变图案

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

用来处理点击变换图案事件，注意这里的第一行代码是首先将之前的状态复制了一份然后再去改变，很多人可能不理解为什么要这样做，改变数据其实有两种方式，第一种是直接在存储数据的数据结构上面改掉，还有一种方法是，复制一下原来数据结构中存储的数据，然后在复制的那一份中改数据，这样做的好处在于它有效的保存的原来的数据状态，为以后可能还有会用到做准备，其实这个游戏恰巧也会用到，所以建议各位在以后修改数据的时候采用第二种方法

下面代码就是渲染以及事件的绑定：

renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');

    return (
      <div>
        <div className="status">{status}</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>
    );
  }
}

4.

获胜条件，最后一步是通过以一个函数来实现的，将获胜的位置所有可能的情况放在一个数组中，然后遍历数组，当数组某一组的位置和我们的square的三个位置恰好吻合时，获得胜利

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

还有一个问题，避免游戏结束后误触，我们在点击事件中加一个判断条件，如果结束了游戏则点击事件无效

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

同样状态栏也要改变

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

本文就先讲到这，避免篇幅太长，下一篇将会用到game组件当然也用到了状态提升，请各位想一想是怎么用的