React“一字棋”小游戏英文版教程

根据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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180220G0C9SP00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券