React一字棋游戏微实践

根据React官网教程，实现“一字棋”小游戏。逻辑比较简单，拿来练练手，目的是为了培养一下纯英文技术文档的阅读习惯，把握英文教程的语言表达方式。

demo演示：

demo.gif

组件设计：

QQ截图20180220114251.png

1、Game组件，由一个Board组件和游戏步骤列表组成。Board是游戏区域。右侧文字列表保存了游戏的历史操作记录，点击某条记录能返回至历史步骤。

2、Board组件，由9个Square组件组成，这构成了游戏画布。

3、Square组件，渲染了单个Button，即游戏操作按钮。当点击事件发生时，向画布上添加一颗棋子，同时生成一条操作记录。

​几点小结：

1、react提倡，组件细分越小越好，一个组件的功能越简单越好。

2、父子组件之间通过props来传递数据，这数据可以是父组件中的state数据，也可以事件处理器。

3、在改变state时，要先复制一份state再去修改它，不建议直接修改state（可控组件）。

4、当多个子组件需要共享某部分数据时，Lifting State Up，把这部分数据放在它们共同的父组件中。

5、一个性能优化技巧，在列表循环时，给每一个列表项都加一个唯一的key，这能大大提升列表变化时Diff算法的速度。

参考资料：

React Tutorial：https://reactjs.org/tutorial/tutorial.html

在线代码：https://codepen.io/gaearon/pen/gWWZgR?editors=0010