React---井字棋游戏练习

1. 知识点总结

1. 组件之间传值

该游戏一共有三个组件，Game, Board, Square。
其中Game组件为Board的父组件，Board组件为Square组件的父组件。

Square组件负责维护每一个小正方形块的信息。
Board组件负责维护整个棋盘的信息。
Game组件负责维护棋盘的历史记录。

子组件可以通过props属性获取到父组件传过来的值。
父组件如果想要控制子组件的交互则通过传递函数实现。例如Board组件想要点击Square组件时，Square组件显示’X’，可以这么做：

1. 将自己的state中value(也可以是其他名字）属性传给子组件。
   Board组件中：

<Square value={this.props.value}>

2. 将自己的handleChange函数通过onChange属性传给子组件。（一般监听函数用on开头命名，处理函数用handle开头命名）
   Board组件中：

renderSquare(i){
  <Square 
    value={this.props.squares[i]} 
    onChange={()=>this.handleChange(i)}>
}

Square函数组件中：

<button onClick={props.onChange}>
  {props.value}
</button>

3. 在Board组件中处理handleChange函数。
   Board组件：

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

将数据放在Board组件里面维护是为了之后更方便地去判断游戏规则。

2. 数据撤销和恢复

在这个游戏中，会有一个查看历史记录的功能。可以注意到在上述的第三部代码中，没有直接修改square数组的值，而是创建了一个新的副本，把改变后副本的值赋值给square数组。
这么做是为了方便追踪square数组的变化。如果不那么做，那么要发现square数组改变了什么，就需要去遍历square数组的所有属性。

2. 代码复盘

1. 创建三个组件：Game, Board, Square。
2. Board组件创建square数据记录每一个Square组件的值。完成点击之后交叉显示’X’和’O’功能。
3. 写一个判断谁赢的函数，和完成点击过的Square组件再次点击无效功能。
4. 完成历史记录追踪功能：将数据上升至Game组件管理，Game通过history数组记录每一个改变之后的square。数据接口如下：

interface SquareHistory{
  square: [];
}
history: SquareHistory[];

3. 代码优化

除了教程只有指出可优化的地方，个人认为还有如下地方可以优化（毕竟这个入门教程只是想通过简单的例子了解组件之间的传值）：

1. 判断谁赢了的函数（原函数通过枚举棋盘每一种情况，3*3棋盘可枚举，但棋盘变大了就不行）。
   优化代码会在下篇文章给出。
   官方教程链接：https://react.docschina.org/tutorial/tutorial.html
   建议自己看了之后再手写一遍。