根据React官网教程,实现“一字棋”小游戏。逻辑比较简单,拿来练练手,目的是为了培养一下纯英文技术文档的阅读习惯,把握英文教程的语言表达方式。
教程链接:React Tutorial:https://reactjs.org/tutorial/tutorial.html
demo演示:
组件设计:
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
领取专属 10元无门槛券
私享最新 技术干货