1. 知识点总结
1. 组件之间传值
该游戏一共有三个组件，Game, Board, Square。
其中Game组件为Board的父组件，Board组件为Square组件的父组件。
Square组件负责维护每一个小正方形块的信息。
Board组件负责维护整个棋盘的信息。
Game组件负责维护棋盘的历史记录。
子组件可以通过props属性获取到父组件传过来的值。
父组件如果想要控制子组件的交互则通过传递函数实现。例如Board组件想要点击Square组件时，Square组件显示’X’，可以这么做：
- 将自己的state中value(也可以是其他名字）属性传给子组件。
Board组件中：
<Square value={this.props.value}>
- 将自己的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>
- 在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. 代码复盘
- 创建三个组件：Game, Board, Square。
- Board组件创建square数据记录每一个Square组件的值。完成点击之后交叉显示’X’和’O’功能。
- 写一个判断谁赢的函数，和完成点击过的Square组件再次点击无效功能。
- 完成历史记录追踪功能：将数据上升至Game组件管理，Game通过history数组记录每一个改变之后的square。数据接口如下：
interface SquareHistory{
square: [];
}
history: SquareHistory[];
3. 代码优化
除了教程只有指出可优化的地方，个人认为还有如下地方可以优化（毕竟这个入门教程只是想通过简单的例子了解组件之间的传值）：
- 判断谁赢了的函数（原函数通过枚举棋盘每一种情况，3*3棋盘可枚举，但棋盘变大了就不行）。
优化代码会在下篇文章给出。
官方教程链接：https://react.docschina.org/tutorial/tutorial.html
建议自己看了之后再手写一遍。
|